突袭HTML5之SVG(4)

边框色 - stroke属性

上面的例子中已经用到了stroke属性，这个属性使用设置的值画图形的边框，使用起来也很直接，把颜色值赋给它就可以了。注意： 1. 如果不提供stroke属性，则默认不绘制图形边框。

2. 可以设置边的透明度，就是stroke-opacity，值的范围是0到1。

实际上，边的情况比图形内部稍微复杂一点，因为边除了颜色，还有\形状\需要定义。 线的端点 - stroke-linecap属性

这个属性定义了线段端点的风格，这个属性可以使用butt,square,round三个值。看例子：

这段代码绘制了3条使用不同风格线端点的线， 从左面的图中我们可以很容易看出3中风格的不同。

线的连接 - stroke-linejoin属性

这个属性定义了线段连接处的风格，这个属性可以使用miter,round,bevel三个值。看例子：

从左面的图中我们很容易看到3中风格的不同。

线的虚实 - stroke-dasharray属性

这个属性可以设置线段采用何种虚实线。看例子：

stroke-linecap=\ stroke-dasharray=\ fill=\

stroke-linecap=\ stroke-width=\ stroke-dasharray=\ fill=\

e\

这个属性是设置一些列数字，不过这些数字必须是逗号隔开的。

属性中当然可以包含空格，但是空格不作为分隔符。每个数字

定义了实线段的长度，分别是按照绘制、不绘制这个顺序

循环下去。

所以左面的例子中绘制的线是画5单位的实线，留5单位的空格， 再画5单位的实线...这样一直下去。

除了这些常用的属性，还有下列属性可以设置：

stroke-miterlimit：这个和canvas中的一样，它处理什么时候画和不画线连接处的miter效果。

stroke-dashoffset：这个属性设置开始画虚线的位置。

使用CSS展示数据

HTML5强化了DIV+CSS的思想，所以展示数据的部分还可以交给CSS处理。与普通HTML元素相比，只不过是 background-color和border换成了fill和stroke。其他的大多都差不多。简单看个例子：

#MyRect:hover { stroke: black; fill: blue; }

是不是很熟悉，就是这么简单的。

突袭HTML5之SVG 2D入门5 - 颜色的表示

SVG和canvas中是一样的，都是使用标准的HTML/CSS中的颜色表示方法，这些颜色都可以用于fill和stroke属性。 基本有下面这些定义颜色的方式：

1. 颜色名字： 直接使用颜色名字red, blue, black...

2. rgba/rgb值： 这个也很好理解，例如#ff0000,rgba(255,100,100,0.5)。 3. 十六进制值： 用十六进制定义的颜色，例如#ffffff。

4. 渐变值：这个也与canvas中一样，支持两种渐变色：线性渐变，环形渐变。如下图所示：

5. 图案填充：使用自定义的图案作为填充色。 前面几种都很简单，重点看下后面两种填充色。 线性渐变

使用linearGradient元素即可定义线性渐变，每一个渐变色成分使用stop元素定义。看下面的例子：

在这个例子中，我们需要注意：

1. 渐变色元素必须要放到defs元素中；

2. 需要给渐变色元素设置id值，否则的话，别的元素无法使用这个渐变色。

3. 渐变色的成员使用stop定义，它的属性也可以使用CSS定义；它支持class，id这种标准HTML都支持的属性。其它常用属性如下：

offset属性：这个定义了该成员色的作用范围，该属性取值从0%到100%(或者是0到1)；通常第一种颜色都是设置成0%，最后一种设置成100%。 stop-color属性：这个很简单，定义了该成员色的颜色。 stop-opacity属性：定义了成员色的透明度。

x1,y1,x2,y2属性：这两个点定义了渐变的方向，默认不写的话是水平渐变，上面例子中同时也创建了一个垂直渐变。

4. 渐变色的使用，如例子中所示，直接用url(#id)的形式赋值给fill或者stroke就可以了。 5. 渐变色成员的复用：你也可以使用xlink:href引用定义过的渐变色成员，所以上面的例子也可以改写如下：

环形渐变

使用radialGradient元素定义环形渐变，还是使用stop定义成员色。看例子：