这是我的第一篇文章，如有错误还请谅解，错误请尽情指正，十分感谢。
svg 是一种以数学形式达成类似绘图板一样的组件，可以使我们在页面上自己‘画’出想要的图案。
svg标签是告诉浏览器这个组件内部全是专有标签。
svg标签的使用中，需要的属性有svg绘图区域的大小即宽高。其次要表示遵循那个标准，常用的是添加xmlns="http://www.w3.org/2000/svg"。
svg中有很多基础图形标签
例如：圆（与椭圆公用一个标签）、直线、折线等。
<line>直线标签 数学上两点确认一个直线，那么line标签必需的就是这两个点。
那么line标签的属性有 点1:x1="" y1="" 点2：x2="" y2="";
<ellipse> 圆(椭圆)标签 圆的确认需要的是圆心和半径，但是由于圆和椭圆公用一个标签（在数学上圆是特殊的椭圆）， 所以要画椭圆所需要的属性不要像数学定义一样到两定点的距离等于定长。
只需要 圆的中心点：cx="" cy="" x轴长：rx="" y轴长：ry="" 当x轴长=y周长时就是圆了
<rect>矩形标签 定义一个矩形需要的是一个定点确认位置和矩形的长宽。
左上角顶点： x="" y="" 长：width="" 宽：height=""
<polyline>折线标签 折线的定义就是多个点的定义
他需要的属性是 points=" a b a1 b1 a2 b2 ..." 这些的是点(a,b)链接点(a1,b1)链接点(a2,b2)。按照写的顺序链接。
上面说完了我学了的一点标签，接下来说一说基础共同属性。
共同属性
stroke属性： 字面意思是冲程划，它实际的作用是描边。
<style>
svg{ stroke:#000; stroke-width: 5;/*描边宽度*/ stroke-linecap: round;/*一行的两端变成半圆形*/ stroke-linejoin: round;/*两端的拐点变成弧形，包括文字*/ fill:none; }/*svg的样式*//*样式重置和html和body的大小设置不在这写是100%*/
.text{font-size: 64px;/*定义字体大小64px*/
font-weight: bold;/*文字加粗*/
text-transform: uppercase;/文字变大写*/
stroke:#abcdef;/**定义描边颜色/
}</style>
<text text-anchor="middle" x="200px" y="200px" class="text">the first</text>
<!-- text-anchor="middle" 是表示文本基点在中心 x="" y="" 表示文本基点距离主体左上角的距离-->效果：
上述图片所用的stoke属性有 stroke设置描边颜色，stroke-width设置描边宽度，stroke-linecap设置结尾路径的形式有butt(内缩平端)、round(半圆形端)、square(外延平端)，stroke-linejoin设置两条相连线段的拐点。
stroke-dasharray属性
stroke-dasharray属性：dasharray单词的意思是无序的杂乱的，在stroke中的属性是设置实线的空白断口。
stroke-dasharray属性的参数是不固定的。
stroke-dasharray：a b c d ...... ； 这个参数代表的是从开始口，a长度的实线，b长度的空白断口，c长度的实线，d长度的空白断口。 有人会问那不是要写很长的参数列表。其实不是的他会按照你写的规律不断的重复知道将你所有长度的描边应用到了样式。
那么就有问题了，我虚线和实线设置的长度之和不一定完全等于描边的长度啊，其实stroke-dasharray会按照参数不断的生成(按照参数不断的拼接)，基本是肯定有超出的部分，不过在超出的部分将无法被看到被覆盖了。闭合图形的超出的部分同理也无法被看到。
官方文档给出了属性说明：
它是一个<length>和<percentage>数列，数与数之间用逗号或者空白隔开，指定短划线和缺口的长度。如果提供了奇数个值，则这个值的数列重复一次，从而变成偶数个值。因此，5,3,2等同于5,3,2,5,3,2
stroke-dasharray属性识别的是偶数参数，空白断口数和实线数要相同。
stroke-dasharray: 5 6; 在上述代码.text类选择器中添加了这条属性。效果变成了下述图片：
stroke-dasharray: 5 6 10;变更了属性效果
按照官方文档的属性应用的是：
stroke-dasharray: 5(实) 6(空) 10(实) 5(空) 6(实) 10(空);大家比对一下，就可以理解了。
stroke-dashoffset属性
stroke-dashoffset的作用是偏移。那么偏移是怎么样的效果，我先放一张图片：
对比一下会发现虚线沿着字体逆时针移动了一点，而实现这个操作的是下述代码：
stroke-dashoffset: 5;这样可能就会理解作用了。
那么偏移有什么用呢，可能看起来没什么意义。但是配合计时器或者动作帧就会发生不同的作用，会形成动作效果。
偏移效果由一个注意点：
不要将空白部分设置的过大（有特殊用处除外）。
红色是当做空白断口部分，蓝色则是实线部分
这个圆比作你整体的虚实线相加，假设方框是我们可以看到的部分。
如果图形偏移过半是下述这样
视角中(也就是方框内)发现没有图案了。
这是因为dasharray是将空白断口和实线视为一体，再用dashoffset时偏移会将实线偏移后后面接的是空白断口，要将空白断口偏移完才会继续出现实线。
看了下一上面的gif，会发现实线在到了尾端的时候会逐渐变短，这就是上面的所说的情况，
在实线区域偏移到视图外时，我们看到的是之前隐藏的空白断口区域，因为空白断口设置的太长，长过了字体的能展现的总长，所以我们看到的会有一段时间是空白，其实就是空白断口在偏移的过程中占有了全部的窗口。
#因为是初学，所以可能有所错误，请尽情的指出，感谢阅读。
参考 菜鸟教程 MDN文档。
下面是我理解的实例的解析。
霓虹灯字体效果解析。(较长，下面是我的初步解析效果原理)
代码块：
/*样式*/
<style>*{
margin: 0;
padding: 0;
}
.text{
/*公共样式*/
/* 画家 */
font-size: 64px;
font-weight: bold;
/* 文字变大写 */
text-transform: uppercase;
stroke: #3498db;/*描边*/
stroke-width: 2;
fill: none;/*填充*/
stroke-linecap:round ;/*单行顶端半圆形*/
stroke-linejoin: round;/*两线段衔接点弧形*/
stroke-dasharray: 90 310;/*90px长实现 310长虚线*/
animation: stroke 6s infinite linear;/*创建动作 名字stroke 持续6s 不停止 线性*/
}
.text-1{
stroke:#3498db; /* 阴影 */
text-shadow: 0 0 5px #3498db;/*蓝色*/
/* 延时-1.5s == 提前1.5s运动 */
animation-delay: -1.5s;}
.text-2{
stroke: #f39c12;
text-shadow: 0 0 5px #f39c12;/*橙色*/
animation-delay: -3s;
/*提前3秒*/
}
.text-3{
stroke: #e74c3c;
text-shadow: 0 0 5px #e74c3c;/*红色*/
/*提前4.5s*/
animation-delay: -4.5s;
}
.text-4{
stroke: #9b59b6;
text-shadow: 0 0 5px #9b59b6;/*紫色*/
/*提前6s*/
animation-delay: -6s;
}
@keyframes stroke{
100%{
/* 偏移量 6s内顺时针偏移400px；*/
stroke-dashoffset: -400;
}}
</style>
<svg width="100%" height="100" xmlns="http://www.w3.org/2000/svg">
<text text-anchor="middle" x="50%" y="50%" class="text text-1">segmentfailt.com</text>
<text text-anchor="middle" x="50%" y="50%" class="text text-2">segmentfailt.com</text>
<text text-anchor="middle" x="50%" y="50%" class="text text-3">segmentfailt.com</text>
<text text-anchor="middle" x="50%" y="50%" class="text text-4">segmentfailt.com</text>
</svg>原理是四个相同基本完全的文本字体在同一个位置。做相同的动作，每一个文本的实线段长占总长的一部分，让其他文本先开始偏移动作，第一个开始动作的文本实线部分后部分空白断口被第二个开始动作的文本实现部分覆盖了，第三个文本覆盖了第二个的空白，第四个覆盖了第三个空白，第四个的空白则因为第一个文本已经运行完毕了，第一个文本的实线覆盖了第四个文本的空白，这就像是一个衔尾蛇，四段部分实线分别咬上一部分的实线部分。
