【D3.V3.js系列教程】--（七）SVG概要
【D3.V3.js系列教程】--（七）SVG概要一、简单形状
有一些视觉元素可以包含那些SVG标签，包括矩形，圆形，椭圆形，线条，文字和路径之间。
基于像素的坐标系统，其中0,0是左上角的绘图空间。增加x值向右移动，同时增加?值向下移动。
正确绘制一个矩形。使用x和y的指定左上角的坐标，宽度和高度指定的尺寸。我们SVG的矩形填充整个空间：
<rect x="0" y="0" width="500" height="50"/>圈画出一个圆。使用cx和cy，指定指定半径的中心的坐标，和?。因为它CX（“X轴”）的值是250，这个圈子围绕在中间的500像素宽的SVG 。
<circle cx="250" cy="25" r="25"/>椭圆形相似，但每个轴的预期不同的半径值。相反?，使用RX和RY。
<ellipse cx="250" cy="25" rx="100" ry="25"/>线画一条线。使用x1和Y1到指定线的一端的坐标，和的2倍和y2指定的另一端的坐标。中风颜色必须指定为线，是可见的。
<line x1="0" y1="0" x2="500" y2="50" stroke="b??lack"/>文本呈现文本。使用 X 指定的左边缘的位置，?指定类型的基线的垂直位置。
<text x="250" y="25">易peasy </文>文本将继承其父元素的CSS指定的字体样式，除非另有规定。（在某一时刻的造型文本。）注意上面的示例文本的格式，本段比赛。我们可以覆盖，格式如下：
<文本=“250”Y =“25”字体家庭=“无衬线” 字体大小=“25”填充“灰色”>易peasy </文字的>SVG的默认样式没有中风是黑色填充。如果你想别的，你就必须将样式应用到你的元素。常见的SVG性质：
填充 -颜色值。正如用CSS，颜色可以被指定为- 命名的颜色-
橙色 - 十六进制值-
＃3388aa或38A - RGB值-
RGB（10，150，20） - RGB与Alpha透明度-
RGBA（10，150，20，0.5） 行程-颜色值。中风宽度-数字测量（通常以像素为单位）。不透明度- 0.0（完全透明）和1.0（完全不透明）之间的数值。有了
文字，也可以使用这些特性，这就像在CSS工作：字体家庭字体大小三、源码
<!DOCTYPE html><html> <head><meta charset="utf-8"><title>testD3-6-SVG.html</title><script type="text/javascript" src="http://localhost:8080/spring/js/d3.v3.js"></script><style type="text/css">.pumpkin { fill: yellow; stroke: orange; stroke-width: 5; }</style></head><body><script type="text/javascript"></script><svg><rect x="0" y="0" width="500" height="50"/><ellipse cx="250" cy="225" rx="100" ry="25"/><line x1="0" y1="120" x2="500" y2="50" stroke="black"/><text x="250" y="155" font-family="sans-serif" font-size="25" fill="gray">Easy-peasy</text><circle cx="25" cy="80" r="20" fill="rgba(128, 0, 128, 0.75)" stroke="rgba(0, 255, 0, 0.25)" stroke-width="100"/><circle cx="75" cy="80" r="20" fill="rgba(0, 255, 0, 0.75)" stroke="rgba(0, 0, 255, 0.25)" stroke-width="10"/><circle cx="125" cy="80" r="20" fill="rgba(255, 255, 0, 0.75)" stroke="rgba(255, 0, 0, 0.25)" stroke-width="10"/><rect x="0" y="300" width="30" height="30" fill="purple"/><rect x="20" y="305" width="30" height="30" fill="blue"/><rect x="40" y="310" width="30" height="30" fill="green"/><rect x="60" y="315" width="30" height="30" fill="yellow"/><rect x="80" y="320" width="30" height="30" fill="red"/><circle cx="25" cy="425" r="22" class="pumpkin"/><circle cx="25" cy="525" r="20" fill="rgba(128, 0, 128, 1.0)"/><circle cx="50" cy="525" r="20" fill="rgba(0, 0, 255, 0.75)"/><circle cx="75" cy="525" r="20" fill="rgba(0, 255, 0, 0.5)"/><circle cx="100" cy="525" r="20" fill="rgba(255, 255, 0, 0.25)"/><circle cx="125" cy="525" r="20" fill="rgba(255, 0, 0, 0.1)"/><circle cx="25" cy="625" r="20" fill="purple" stroke="green" stroke-width="10" opacity="0.9"/><circle cx="65" cy="625" r="20" fill="green" stroke="blue" stroke-width="10" opacity="0.5"/><circle cx="105" cy="625" r="20" fill="yellow" stroke="red" stroke-width="10" opacity="0.1"/></svg></body></html>
四、效果
