SVG入门

当我们用SVG生成和操作一些炫酷的效果时,D3是最佳选择。使用div和其他原生HTML元素绘图也是可以的，但是太笨重，而且会受到不同浏览器的限制，传达出的视觉效果会有不一致的影响。使用SVG更可靠，视觉上更一致，最重要的就是方便，快捷。

像Illustrator这样的矢量绘图软件可用于生成SVG文件，但我们更需要学习如何使用代码生成它们。

SVG 元素

可缩放矢量图形是基于文本的图像格式。每一个SVG图像都是使用类似HTML的标识代码定义生成的。SVG代码可以直接包含在任何HTML文档中。除了IE 8及更早的版本外，其他每一个Web浏览器都支持SVG。

SVG是基于XML的，因此你会注意到没有结束标记的元素必须是自动关闭的，例如：

<element></element>   <!-- 结束标记 -->
<element/>            <!-- 自动关闭标记 -->

在绘制任何SVG图像之前，必须创建一个SVG元素。将SVG元素视为渲染视觉效果的画布。其实这方面，SVG在概念上有点类似于HTML中的canvas元素。SVG是可以指定宽度和高度的，如果不指定那么SVG将在其封闭元素中占用尽可能多的空间大小。

下面是一个指定空间大小的SVG：

<svg width="500" height="50">
</svg>

如果你将这段代码放在你的HTML中，会形成一块空白区域，此时你可以鼠标右键选择空白区域，选择检查，将会发现：

会看一个SVG元素，它占用了500个水平像素和50个垂直像素。但是看起来不像，下面解释。

浏览器将像素视为默认度量单位。我们指定的尺寸是500和50，而不是500px和50px。我们可以明确指定px,或者是任意数量的其他被支持的单位，比如：em，pt，in，cm，mm。

简单的形状

SVG标记之间包含很多可视化的元素，包括rect，circle，ellipse，line，text和path。

如果你比较熟悉计算机图形编程，那么你一定知道通常基于像素的坐标系统，其中(0,0)是我们桌面的最左上角。在(x,y)中，x表示x轴，y代表y轴，此时增加x值向右移动，而增加y值向下移动。

图像代码如下：

<svg width="505" height="65"><line x1="5" y1="5" x2="5" y2="50" stroke="gray" stroke-width="1"></line><line x1="5" y1="50" x2="0" y2="45" stroke="gray" stroke-width="1"></line><line x1="5" y1="50" x2="10" y2="45" stroke="gray" stroke-width="1"></line><line x1="5" y1="5" x2="500" y2="5" stroke="gray" stroke-width="1"></line><line x1="500" y1="5" x2="495" y2="0" stroke="gray" stroke-width="1"></line><line x1="500" y1="5" x2="495" y2="10" stroke="gray" stroke-width="1"></line><circle cx="5" cy="5" r="3" fill="#008"></circle><text x="10" y="20">0,0</text><circle cx="105" cy="25" r="3" fill="#008"></circle><text x="110" y="40">100,20</text><circle cx="205" cy="45" r="3" fill="#008"></circle><text x="210" y="60">200,40</text>
</svg>

rect

使用rect绘制一个矩形。使用x和y指定左上角的坐标，使用宽度和高度指定尺寸。这个矩形填满了SVG整个空间：

<svg width="500" height="50"><rect x="0" y="0" width="500" height="50"/>
</svg>

效果：

circle

circle标签可以画一个圆圈。使用cx和cy指定中心的坐标，使用r指定半径。这个圆圈位于我们500个像素宽的SVG中间，因为它的cx(center x)值为250。

<svg width="500" height="50"><circle cx="250" cy="25" r="25"/>
</svg>

效果：

ellipse

ellipse和circle是类似的，但是每个轴需要单独的半径值，由rx和ry指定。

<svg width="500" height="50"><ellipse cx="250" cy="25" rx="100" ry="25"/>
</svg>

效果：

line

line是画一条直线。使用x1和y1指定线一端的坐标，使用x2和y2指定另一端的坐标。必须为要显示的线指定画笔颜色。

<svg width="500" height="50"><line x1="0" y1="0" x2="500" y2="50" stroke="black"/>
</svg>

效果：

text

text用来渲染文字的。使用x指定左边缘的位置，使用y指定类型基线的垂直位置。

<svg width="500" height="50"><text x="250" y="25">Easy-peasy</text>
</svg>

效果：

如果没有有意指定text的字体样式，那么text将继承其父元素的CSS指定字体样式（稍后详细介绍样式文本）。上面的文字样式，我们可以自定义设置，如下：

<svg width="500" height="50"><text x="250" y="25" font-family="sans-serif"font-size="25" fill="gray">Easy-peasy</text>
</svg>

效果：

另外注意，当任何可视化元素在SVG的边缘上运行时，它将被剪裁。使用文字时要小心，否则会出现y操作设置无效，当我们将基线y设置为50时，可以看到这种情况发生，与SVG的高度相同。

<svg width="500" height="50"><text x="250" y="50" font-family="sans-serif"font-size="25" fill="gray">Easy-peasy</text>
</svg>

效果：

path

path用于绘制比上面的形状更复杂的东西（如地图的国家轮廓），这个后续我们再做介绍，现在暂时使用一些简单的形状入门。

SVG 样式

SVG的默认样式是黑色填充，没有画笔。如果需要其他任何内容，则必须将样式应用于元素。

常见的SVG属性是：

• fill - 填充的颜色。与CSS一样，颜色可以指定为
  
  • named colors - orange
  • hex values - #3388aa or #38a
  • RGB values - rgb(10, 150, 20)
  • RGB width alpha transparency - rgba(10, 150, 20, 0.5)
• stroke - Stroke属性定义一条线，文本或元素轮廓颜色
• stroke-width - 定义了一条线，文本或元素轮廓厚度
• opacity - 透明度，一个在0.0-1.0之间的数值

使用text，您还可以使用这些属性，就像在CSS中一样：

• font-family
• font-size

其实SVG的样式可以使用CSS样式规则。

以下是一些直接应用于圆形的样式属性作为属性：

<svg width="500" height="50"><circle cx="25" cy="25" r="22"fill="yellow" stroke="orange" stroke-width="5"/>
</svg>

效果:

或者，我们可以去除样式属性，为圆圈分配一个class(就像它是一个普通的HTML元素)

<svg width="500" height="50"><circle cx="25" cy="25" r="22" class="pumpkin"/>
</svg>

然后将fill，stroke和stroke-width规则放入以新类为目标的CSS样式中：

.pumpkin {fill: yellow;stroke: orange;stroke-width: 5;}

CSS方法有一些明显的好处：

1. 可以同时对多个元素进行样式设定，比如：

<svg width="500" height="50"><circle cx="25" cy="25" r="22" class="pumpkin"/><circle cx="80" cy="25" r="20" class="pumpkin"/>
</svg>.pumpkin {fill: yellow;stroke: orange;stroke-width: 5;}

1. CSS代码更方便阅读（相比内联属性）
2. CSS代码可能更易于维护，并且可以更快的实现设计更改要求

但是，使用CSS代码定义SVG的样式可能会让一些人感到不安。毕竟，fill，stroke和stroke-width不是CSS属性。（与之CSS等价物是背景颜色和边框）。

分层和绘图顺序

Layering and Drawing Order(分层和绘图顺序)。

在SVG中没有层，也没有真正的深度概念，就好比z-index。SVG不支持CSS的z-index属性，因此形状只能排列在二维x，y平面内。

然而，如果我们绘制多个形状，它们会发生重叠，如下：

<svg width="500" height="50"><rect x="0" y="0" width="30" height="30" fill="purple"/><rect x="20" y="5" width="30" height="30" fill="blue"/><rect x="40" y="10" width="30" height="30" fill="green"/><rect x="60" y="15" width="30" height="30" fill="yellow"/><rect x="80" y="20" width="30" height="30" fill="red"/>
</svg>

效果：

元素编码的顺序决定了对应元素的深度顺序。紫色方块第一个出现，因此第一个被渲染，然后蓝色方块呈现在紫色方块的顶部，接下来就是绿色方块，依此类推。

当有一些不应该被其他元素遮挡的视觉元素时，绘制顺序就变得很重要。例如，在一个散点图上显示轴或值标签，轴和标签应该是最后渲染，所以它们出现在任何其他元素的上层。

透明度

Transparency(透明度)

当可视化中的元素重叠但是又必须保持可见，这时可以使用透明度；或者希望突出显示其他元素和不强调某些元素时，透明度就非常有用。

有两种方法可以应用透明度：

• 使用带有alpha的RGB颜色
• 设置不透明度值。

可以在任何一个设定颜色的元素中使用rgba()，例如填充或者描边。对于红色，绿色和蓝色，rgba() 需要0到255之间的三个值，以及介于0.0到1.0之间的alpha(透明度)值。

例如：

<svg width="500" height="50"><circle cx="25" cy="25" r="20" fill="rgba(128, 0, 128, 1.0)"/><circle cx="50" cy="25" r="20" fill="rgba(0, 0, 255, 0.75)"/><circle cx="75" cy="25" r="20" fill="rgba(0, 255, 0, 0.5)"/><circle cx="100" cy="25" r="20" fill="rgba(255, 255, 0, 0.25)"/><circle cx="125" cy="25" r="20" fill="rgba(255, 0, 0, 0.1)"/>
</svg>

效果：

使用rgba() 时，透明度将独立应用于填充和描边颜色。以下圆圈填充的是75%不透明，而它们的笔画只有25%不透明：

<svg width="500" height="50"><circle cx="25" cy="25" r="20"fill="rgba(128, 0, 128, 0.75)" stroke="rgba(0, 255, 0, 0.25)" stroke-width="10"/><circle cx="75" cy="25" r="20"fill="rgba(0, 255, 0, 0.75)"stroke="rgba(0, 0, 255, 0.25)" stroke-width="10"/><circle cx="125" cy="25" r="20"fill="rgba(255, 255, 0, 0.75)"stroke="rgba(255, 0, 0, 0.25)" stroke-width="10"/>
</svg>

效果：

将透明度应用于整个元素，请设置不透明度属性。这是一些完全不透明的圆圈。

效果：

下面是不同透明度的圆圈:

<svg width="500" height="50"><circle cx="25" cy="25" r="20" fill="purple" stroke="green" stroke-width="10"opacity="0.9"/><circle cx="65" cy="25" r="20" fill="green"stroke="blue" stroke-width="10"opacity="0.5"/><circle cx="105" cy="25" r="20" fill="yellow"stroke="red" stroke-width="10"opacity="0.1"/>
</svg>

效果图：