知识问答
如何掌握HTML5中SVG 2D图形的笔画和填充技巧？
stroke和fill属性控制。stroke定义线条颜色，而fill定义内部填充颜色。HTML5中SVG 2D入门4—笔画与填充
h3 填充色 fill属性
在HTML5的SVG（Scalable Vector Graphics）中，fill属性用于设置图形内部的填充颜色，使用这个属性非常简单，只需将颜色值赋给它即可。
<rect x="10" y="10" width="100" height="100" stroke="blue" fill="red" fillopacity="0.5" strokeopacity="0.8"/>
上面的代码会绘制一个红色填充、蓝色边框的矩形。
需要注意的是：
1、默认填充：如果不提供fill属性，则默认会使用黑色填充，如果需要取消填充，可以将其设为none。
2、透明度：可以通过fillopacity属性设置填充颜色的透明度，取值范围是0到1。
3、填充规则：稍微复杂一点的是fillrule属性，它定义了判断点是否属于填充范围的算法，常用值包括nonzero和evenodd。
nonzero：从要判定的点向任意方向发射线，计算与路径的交点数，如果结果不为0，则该点在图形内部，需要填充；否则在外部，不需要填充。
evenodd：从要判定的点向任意方向发射线，计算与路径的交点数，如果交点数为奇数，则该点在图形内部，需要填充；否则在外部，不需要填充。
h3 边框色 stroke属性
stroke属性用于设置图形边框的颜色，使用方法同样简单，直接将颜色值赋给该属性即可。
<rect x="10" y="10" width="100" height="100" stroke="blue" fill="red"/>
上面的代码会绘制一个红色填充、蓝色边框的矩形。
需要注意的是：
1、默认边框：如果不提供stroke属性，则默认不绘制图形边框。
2、透明度：可以通过strokeopacity属性设置边框颜色的透明度，取值范围是0到1。
3、边框形状：边框除了颜色外，还有“形状”需要定义，如端点样式、连接处样式等。
h3 线的端点 strokelinecap属性
strokelinecap属性定义了线段端点的样式，常用的值包括butt、square和round。
<svg width="160" height="140"> <line x1="40" x2="120" y1="20" y2="20" stroke="black" strokewidth="20" strokelinecap="butt"/> <line x1="40" x2="120" y1="60" y2="60" stroke="black" strokewidth="20" strokelinecap="square"/> <line x1="40" x2="120" y1="100" y2="100" stroke="black" strokewidth="20" strokelinecap="round"/></svg>
这段代码绘制了三条使用不同风格线端点的线段。
h3 线的连接 strokelinejoin属性
strokelinejoin属性定义了线段连接处的样式，常用的值包括miter、round和bevel。
<svg width="160" height="280"> <polyline points="40 60 80 20 120 60" stroke="black" strokewidth="20" strokelinecap="butt" fill="transparent" strokelinejoin="miter"/> <polyline points="40 140 80 100 120 140" stroke="black" strokewidth="20" strokelinecap="round" fill="transparent" strokelinejoin="round"/> <polyline points="40 220 80 180 120 220" stroke="black" strokewidth="20" strokelinecap="square" fill="transparent" strokelinejoin="bevel"/></svg>
这段代码绘制了三个使用不同风格线段连接处的多边形。
h3 线的虚实 strokedasharray属性
strokedasharray属性可以设置线段采用何种虚实线。
<svg width="200" height="150"> <path d="M 10 75 Q 50 10 100 75 T 190 75" stroke="black" strokelinecap="round" strokedasharray="5,10,5" fill="none"/> <path d="M 10 75 L 190 75" stroke="red" strokelinecap="round" strokewidth="1" strokedasharray="5,5" fill="none"/></svg>
这段代码绘制了两条采用不同虚实线风格的路径。
h3 使用CSS展示数据
HTML5强化了DIV+CSS的思想，因此展示数据的部分也可以交给CSS处理，与普通HTML元素相比，只不过是将backgroundcolor和border换成了fill和stroke。
#MyRect:hover { stroke: black; fill: blue;}上述CSS代码表示当鼠标悬停在id为MyRect的元素上时，其边框颜色变为黑色，填充颜色变为蓝色。
h3 相关FAQs
Q1: 如何在SVG中设置图形的填充颜色和边框颜色？
A1: 使用fill属性设置填充颜色，使用stroke属性设置边框颜色。
<rect x="10" y="10" width="100" height="100" fill="red" stroke="blue"/>
上述代码会绘制一个红色填充、蓝色边框的矩形。
Q2: 如何设置SVG图形的透明度？
A2: 使用fillopacity属性设置填充颜色的透明度，使用strokeopacity属性设置边框颜色的透明度，取值范围都是0到1。
<rect x="10" y="10" width="100" height="100" fill="red" fillopacity="0.5" stroke="blue" strokeopacity="0.8"/>
上述代码会绘制一个半透明红色填充、半透明蓝色边框的矩形。
| 特性 | 描述 | 示例 |
stroke | 定义图形边框的颜色、宽度等属性。 | |
strokewidth | 定义边框的宽度，默认值为1。 | |
strokecolor | 定义边框的颜色，可以使用颜色名、十六进制颜色代码、RGB、RGBA等。 | |
strokelinecap | 定义线条的端点样式，可选值有butt、round、square。 | |
strokelinejoin | 定义线条交叉点的样式，可选值有miter、round、bevel。 | |
strokedasharray | 定义线条的虚线样式，通过一个由逗号分隔的数字序列来指定线段和间隙的长度。 | |
fill | 定义图形的填充颜色，可以设置为none以不填充图形。 | |
fillopacity | 定义图形填充颜色的透明度，值范围从0（完全透明）到1（完全不透明）。 | |
通过上述表格，可以了解SVG中用于定义笔画和填充的基本属性和示例用法，在绘制SVG图形时，合理运用这些属性可以创造出丰富的视觉效果。
