svg 属性详解：填充与边框
- 1 颜色和透明度
- 2 填充规则 fill-rule
- 3 边框样式
- 3.1 stroke-width
- 3.2 stroke-linecap
- 3.3 stroke-linejoin
- 3.4 stroke-dasharray
1 颜色和透明度
图像都有颜色，svg 中可以使用属性 fill 和 stroke 来修改图形的颜色。fill 属性设置对象的内部颜色，stroke 属性设置绘制对象的线条的颜色。
颜色的取值可以参考 HTML 中 CSS 颜色命名方案，包括颜色名（比如“blue”），rgb 值（比如 rgb(0,0,255))、十六进制（比如 #0000FF) 等，参考 Colors Home 中颜色的定义。
透明度是另一个常见的图像属性， svg 中可以使用 opacity 属性来控制整个图像的透明度，也可以通过 fill-opacity 和 stroke-opacity 来分别定义填充色和边框的透明度。
<?xml version="1.0" standalone="no"?>
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1">
<g stroke-width="5">
<rect x="70" y="95" width="80" height="90"
fill="#FF0000" stroke="#00008B" />
<rect x="125" y="145" width="100" height="80"
fill="Gold" fill-opacity="0.8" stroke="Lavender" />
<rect x="80" y="45" width="140" height="60"
fill="rgb(255,102,255)" stroke="rgb(0,0,255)"
stroke-opacity="0.4" />
<rect x="20" y="150" width="75" height="60"
fill="Purple" stroke="DeepPink" opacity="0.5"/>
</g>
</svg>
上面的代码分别绘制了下面四个矩形，设置边框宽度为 4 以便查看边框透明效果：
2 填充规则 fill-rule
对于一个简单的、没有交错的路径来说，判断它的内部区域是很容易的。但是一些复杂的路径，比如与自身相交的路径，或者路径的其中一段包围着另一段，要判断它的内部区域，就没那么容易了。
fill-rule 是一个表现属性，用来定义一个多边形内部区域的算法。该属性为如何确定一个图形的内部提供了两个可选值：
下面图示也许更浅显易懂，箭头显示路径的方向：
如何为图形设置 fill-rule 属性，这里给出一个例子，绘制上面图示 A 组的两个五角星：
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<path d="M 100 20 L 129.39 110.45 L 52.45 54.55
L 147.55 54.55 L 70.61 110.45 Z"
fill="Red" stroke="Black" />
<g transform="translate(150,0)">
<path d="M 100 20 L 129.39 110.45 L 52.45 54.55
L 147.55 54.55 L 70.61 110.45 Z"
fill="Red" fill-rule="evenodd" stroke="Black"/>
</g>
</svg>
3 边框样式
边框除了有颜色属性，还有几何属性，参考下面的表格：
3.1 stroke-width
stroke-width 用来定义边框的宽度，注意，边框的宽度是以路径为中心向两边伸展的，可以参考下面的例子：
<?xml version="1.0" standalone="no"?>
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="85" cy="85" r="50" fill="Red"
stroke="Blue" stroke-opacity="0.5" stroke-width="20"/>
</svg>
这里设置了边框不透明度为 stroke-opacity=20，可以清楚得看到边框是如何绘制的：
3.2 stroke-linecap
stroke-linecap 用于控制边框终点的形状。
<?xml version="1.0" standalone="no"?>
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect width="180" height="170" fill="none" stroke-dasharray="3,3" stroke="black" />
<g stroke-width="20" stroke="Darkgray">
<line x1="40" y1="40" x2="140" y2="40" stroke-linecap="butt" />
<line x1="40" y1="80" x2="140" y2="80" stroke-linecap="square"/>
<line x1="40" y1="120" x2="140" y2="120" stroke-linecap="round"/>
</g>
<g stroke="Black">
<line x1="40" y1="40" x2="140" y2="40" />
<line x1="40" y1="80" x2="140" y2="80" />
<line x1="40" y1="120" x2="140" y2="120" />
</g>
</svg>
为了方便看清效果，这里画出了没有设置 stroke-linecap 属性的线段（中间的黑色线条）：
butt 是默认的效果，用直边来结束线段，线段边界 90 度垂直于描边的方向。square 和 butt 的效果差不多，只是两端会稍微超出实际路径的范围，超出的大小取决于 stroke-width。round 用于绘制圆角，圆角的半径也是取决于 stroke-width。
3.3 stroke-linejoin
stroke-linejoin 用于表达两段路径之间用什么方式来连接。
<?xml version="1.0" standalone="no"?>
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1">
<g stroke-width="16" stroke="Darkgray" fill="none">
<path d="M 20 60 L 100 60 A 40 40 0 0 0 180 60" stroke-linejoin="miter" />
<path d="M 20 160 L 100 160 A 40 40 0 0 0 180 160" stroke-linejoin="round"/>
<path d="M 20 260 L 100 260 A 40 40 0 0 0 180 260" stroke-linejoin="bevel"/>
<rect x="260" y="40" width="100" height="70" stroke-linejoin="miter" />
<rect x="260" y="140" width="100" height="70" stroke-linejoin="round" />
<rect x="260" y="240" width="100" height="70" stroke-linejoin="bevel" />
</g>
<g stroke="Black" fill="none">
<path d="M 20 60 L 100 60 A 40 40 0 0 0 180 60" />
<path d="M 20 160 L 100 160 A 40 40 0 0 0 180 160" />
<path d="M 20 260 L 100 260 A 40 40 0 0 0 180 260" />
<rect x="260" y="40" width="100" height="70" />
<rect x="260" y="140" width="100" height="70" />
<rect x="260" y="240" width="100" height="70" />
</g>
</svg>
在不显式指定 stroke-linejoin 的值时，默认使用 miter。miter 表示用方向笔在连接处形成尖角，round 表示用圆角连接，实现平滑效果。bevel 会在连接处形成一个斜接。需要注意的是，stroke-linejoin 不仅可以用于path，也可以用于 rect 元素。
与 stroke-linejoin 相关的还有 stroke-miterlimit 属性，我们已经知道，miter 会在路径的连接处形成一个尖角，尖角的样式取决于 stroke-width 和两路径的夹角。
参考下面图示：
事实上，没有显式指定 stroke-miterlimit 的情况下，在 stroke-linejoin=“miter” 时，默认 stroke-miterlimit=4，如果需要在任意情况下保留斜接，可以给 stroke-miterlimit 赋一个很大的值。
关于如何设置斜接限制，这里给了一个例子：
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect width="275" height="200"
fill="none" stroke-dasharray="3,3" stroke="black" />
<path d="M 40 40 L 20 100 H 100 A 50 50 30 0 0 85 163.3"
fill="none" stroke-width="10" stroke="DimGray"
stroke-linejoin="miter" stroke-miterlimit="2" />
<rect x="170" y="40" width="80" height="100"
fill="none" stroke-width="10" stroke="DimGray"
stroke-linejoin="miter" stroke-miterlimit="1" />
</svg>
上面的代码绘制了如下两个图形，可以看到，同一个 path 的多个路径连接处，storke-miterlimit 只对符合限制条件的斜接转换为斜角。stroke-miterlimit 也同样适用于 rect 元素。
3.4 stroke-dasharray
stroke-dasharray 用于将虚线类型应用与边框上。通过用一组以逗号分隔的数字来定义虚线的样式（注意与 path 的 d 属性进行区分，path 中 d 的参数用空格来进行区分）。每一组数字，第一个数字用来表示填色区域的长度，第二个用来表示非填色区域的长度，若还有其他数字，则跟前两个数字代表的含义一致。参考下面一个简单的例子：
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<line x1="20" y1="50" x2="220" y2="50"
stroke-dasharray="40,20" stroke="Pink"
stroke-width="10" />
<line x1="20" y1="50" x2="220" y2="50" stroke="Black" />
</svg>
上面的代码在同一位置上绘制了两条线，其中一条设置了虚线样式，下面图示展示了虚线是如何应用到图形上：
注意虚线最后一段填充区域，因为图形在这里绘制完毕，所以最后一段只有20。
使用 stroke-dashoffset 可以自定义虚线开始的位置，参考下面的例子：
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<path d="M 40 60 L 180 60 L 250 70"
stroke-dashoffset="15" stroke-dasharray="40,25"
stroke="Red" stroke-width="4" fill="none" />
<path d="M 40 60 L 180 60 L 250 70"
stroke="Black" fill="none" />
<path d="M 40 60 h 50" stroke-width="10"
stroke="Green" opacity="0.3" />
<path d="M 40 180 L 180 180 L 250 190"
stroke-dashoffset="95" stroke-dasharray="40,25"
stroke="Red" stroke-width="4" fill="none" />
<path d="M 40 180 L 180 180 L 250 190"
stroke="Black" fill="none" />
<path d="M 40 180 h 35" stroke-width="10"
stroke="Green" opacity="0.3" /
</svg>
下面图示展示 strokke-dashoffset 是如何应用的：
