12.定义线条的样式

SVG 提供了很多描边（stroke）属性，一些常用的有如下几个：

stroke
stroke-width
stroke-linecap
stroke-linejoin
stroke-dasharray

所有这些属性可以被应用在任意线条、文本以及元素外框上。

SVG stroke 属性

<stroke> 属性用来定义线条、文本或元素轮廓（outline）的颜色。

SVG stroke-width 属性

<stroke-width> 属性用来定义线条、文本或元素轮廓的宽度。

SVG stroke-linecap 属性

<stroke-linecap> 属性用来定义线帽，也就是线条两端的外观。

可取值为：butt | round | square | inherit

代码示例如下：

<svg width="12cm" height="2cm" viewBox="0 0 1200 200" version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink"><desc>三种线帽示意图</desc><rect x="1" y="1" width="1198" height="198" fill="none" stroke="blue" /><style type="text/css"><![CDATA[ .thick {stroke: black;stroke-width: 70}.thin {stroke: #ffcccc;stroke-width: 5}text {text-anchor: middle;font-size: 50;font-family: Verdana}circle {fill: #ffcccc;stroke: none}]]></style><defs><line id="line1" x1="-125" x2="125" y1="0" y2="0" fill="none" /><g id="circles"><circle id="circle1" cx="-125" cy="0" r="8" /><circle id="circle2" cx="125" cy="0" r="8" /></g></defs><g transform="translate(200,75)"><use class="thick" xlink:href="#line1" stroke-linecap="butt" /><use class="thin" xlink:href="#line1" /><use xlink:href="#circles" /><text y="90">'butt' cap</text></g><g transform="translate(600,75)"><use class="thick" xlink:href="#line1" stroke-linecap="round" /><use class="thin" xlink:href="#line1" /><use xlink:href="#circles" /><text y="90">'round' cap</text></g><g transform="translate(1000,75)"><use class="thick" xlink:href="#line1" stroke-linecap="square" /><use class="thin" xlink:href="#line1" /><use xlink:href="#circles" /><text y="90">'square' cap</text></g>
</svg>

上述代码中使用了svg的框架元素如<g>、内置样式以及内部引用（xlink:href），我们可以暂时不关心。后面会详细讲解。目前我们只需要关心<line>元素及其stroke相关属性（上例中使用了stroke、stroke-width、和stroke-linecap）即可。

SVG stroke-linejoin 属性

<stroke-linejoin> 属性用来定义线条连接类型，也就是两个线条交接点的外观。

可取值为：miter | round | bevel | inherit

代码示例如下：

<svg width="12cm" height="3.5cm" viewBox="0 0 1200 350" version="1.1"xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink"><desc>Example linecap - demonstrates three stroke-linecap values</desc><rect x="1" y="1" width="1198" height="348" fill="none" stroke="blue" /><style type="text/css"><![CDATA[.thick { stroke:black; stroke-width:70 }.thin { stroke:#ffcccc; stroke-width:5 }text { text-anchor:middle; font-size:50; font-family:Verdana }circle { fill:#ffcccc; stroke:none }]]></style><defs><path id="path1" d="M -125,150 L 0,0 L 125,150" fill="none" /><circle id="circle1" cx="0" cy="0" r="8"/></defs><g transform="translate(200,75)"><use class="thick" xlink:href="#path1" stroke-linejoin="miter"/><use class="thin" xlink:href="#path1"/><use xlink:href="#circle1"/><text y="230">'miter' join</text></g><g transform="translate(600,75)"><use class="thick" xlink:href="#path1" stroke-linejoin="round"/><use class="thin" xlink:href="#path1"/><use xlink:href="#circle1"/><text y="230">'round' join</text></g><g transform="translate(1000,75)"><use class="thick" xlink:href="#path1" stroke-linejoin="bevel"/><use class="thin" xlink:href="#path1"/><use xlink:href="#circle1"/><text y="230">'bevel' join</text></g>
</svg>

SVG stroke-dasharray 属性

<stroke-dasharray> 属性用来创建虚线。

代码如下：

<svg height="80" width="300"><g fill="none" stroke="black" stroke-width="4"><path stroke-dasharray="5,5" d="M5 20 l215 0" /><path stroke-dasharray="10,10" d="M5 40 l215 0" /><path stroke-dasharray="20,10,5,5,5,10" d="M5 60 l215 0" /></g>
</svg>

代码解释如下：

stroke-dasharray的语法为：逗号或空格分隔的长度（或百分比）数值列表
第一条虚线为长度5的线段+长度5的空白，如此反复，从起点X坐标5绘制到215。
第二条虚线类似，小段线段的长度为10。
第三条线型复杂一些：线段20+空白10+线段5+空白5+线段5+空白10，如此反复，绘制出整条虚线。

前述章节，我们讲解了SVG的基本概念、技术特点和基本形状元素的使用。

到此为止，本课程系列中的入门教程已经全部结束。后续将开始我们的进阶之旅，从CSS3进阶开始，因为CSS3的动画特性应用最为广泛。