svg可以做很多事情，如今和canvas在web开发中使用越来越多。默认svg画图，如果是空白填充，最后展示的形状线条是实线。
今天介绍一个属性，可以上画出的图形显示虚线。这个属性就是stroke-dasharray，一般给两个值，如下所示：
<!doctype html>
<meta charset=“utf-8”/>
<title>svg demo</title>
</head>
<h2>svg stroke with dashed line</h2>
<svg width="1000" height="500">
<rect x=20 y=20 width=100 height=100 stroke="gray" fill="white" stroke-width="2" stroke-dasharray="10 10"></rect>
<circle cx=70 cy=200 r=50 stroke="gray" fill="white" stroke-width="2" stroke-dasharray="2 2"></circle>
</body>
</html>
最终的效果：
stroke-dasharray="2 2"表示的意思是，虚线宽2，间隔是2，默认像素单位。
最近做项目遇到了
画
虚线
的问题，而且不是简单的border就能解决的。查阅了资料选择使用
svg
的
line
标签来实现。
<
svg
version="1.1" xmlns="http://www.w3.org/2000/
svg
">
<
line
x1="" y1="" x2="" y2=""
stroke
-
da
sha
rray
="3 2"
stroke
="#cbe6a3"/>
</
svg
>
要注意
line
的起始位置的坐标轴是相对于整个
svg
来说的，个人理解
svg
相当于整个
画
SVG
可以实现非常酷炫的线条动
画
甚至是这样的网页 传送门我们可以先来实现一个简单的
SVG
线条动
画
像这样不要着急，在此之前我们需要先了解一些属性值
虚线
属性
虚线
属性包括两个
stroke
-
da
sha
rray
与
stroke
-
da
shoffset
stroke
-
da
sha
rray
大家来看下面的例子 <
svg
width=300 height=300 viewbox="0 0 30 30">
1、
SVG
矩形
<
rect
x="10" y="10" height="50" width="50" rx="5" ry="5" style="
stroke
:#006600;
stroke
-width: 3;
stroke
-
da
sha
rray
: 10 5; fill: #00cc00;fill-opacity: 0.5"/>
SVG
矩形的位置由x和y属性决定。请记住，这个位置是相对于任何它最接近的父元素的位置。
SVG
矩形的尺寸由width和height属性决定。
style属性允许你为矩形设置
对
SVG
的笔
画
进行动
画
处理非常适合模拟笔迹。 在两个教程的过程中，我们将使用CSS动
画
使签名看起来整洁，就像您自己在对页面签名一样。
这是我们将要构建的：
1.
SVG
文件
在深入研究任何代码之前，我们需要您的签名的
SVG
版本。 使用哪种软件都无关紧要，但是请尝试使线条和曲线尽可能平滑以达到最佳效果。
这是我的，您可以看到它是通过三个单独的路径绘制的：
第一条路 第二条路...
svg
标签使用
SVG
代码
SVG
代码包括开启标签
svg
和关闭标签 /
svg
。这是根元素。width 和 height 属性可设置此
SVG
文档的宽度和高度。version 属性可定义所使用的
SVG
版本，xmlns 属性可定义
SVG
命名空间。
<
svg
></
svg
>
预定义
形状
元素
SVG
有一些预定义的
形状
元素，可被开发者使用和操作：
矩形 rec
我们在绘制
SVG
图形的时候经常需要绘制一些箭头、点状线和
虚线
效果，虽然我们可以通过Adobe Illustrator和Inkscape等矢量图软件来直接生成这些图形，但是我们更应该了解如何手动来实现这些图形效果。
一条路径（path）的外观是由描边（
stroke
）属性和
stroke
-width属性来控制的。
stroke
属性用于控制线条的颜色，而
stroke
-width属性则用于控制线条的宽度
stroke
-width: 10px;
stroke
-
da
sha
rray
: 15 7 5 5 5 7;
/*表示：
画
15px长，空7px，
画
5px长，空5px，
画
5px，空7px，后面则循环此过程
<
svg
xmlns="http://www.w3.org/2000/
svg
" version="1.1">
<g fill="none"
stroke
="black"
stroke
-width="4">
<path
stroke
-
da
sha
rray
="5,5" d="M5 20 l215 0" />
4. 将路径的
stroke
-
da
sha
rray
属性设置为圆的周长，以确保
虚线
的长度与圆的周长相等。
以下是一个简单的示例代码，可以实现一个环形
虚线
效果的
SVG
图形：
```html
<
svg
width="100" height="100">
<path d="M 50 0 A 50 50 0 1 1 49.99999999 0" fill="none"
stroke
="black"
stroke
-width="2"
stroke
-
da
sha
rray
="3, 3" />
</
svg
>
在这个示例中，我们创建了一个半径为50的圆形路径，并将其描边设置为黑色
虚线
，线宽为2px，线段长度为3px。通过
stroke
-
da
sha
rray
属性，我们将路径的
虚线
长度设置为3px，间隔长度也为3px。最后，我们将路径的fill属性设置为空，以确保路径内部不填充任何颜色。
