svg 属性详解：填充与边框-编程知识

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 图形解释
如何为图形设置 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.55L 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.55L 147.55 54.55 L 70.61 110.45 Z"fill="Red" fill-rule="evenodd" stroke="Black"/>
</g></svg>

3 边框样式

边框除了有颜色属性，还有几何属性，参考下面的表格：
stroke 相关属性

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>