SVG：初步学习感想

在初步学习和了解svg后，我对svg的学习有了一些感想，但愿简单叙述一下。

这是个人第一篇文章，若有错误还请谅解，错误请尽情指正，十分感谢。

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>复制代码

原理是四个相同基本彻底的文本字体在同一个位置。作相同的动做，每个文本的实线段长占总长的一部分，让其余文本先开始偏移动做，第一个开始动做的文本实线部分后部分空白断口被第二个开始动做的文本实现部分覆盖了，第三个文本覆盖了第二个的空白，第四个覆盖了第三个空白，第四个的空白则由于第一个文本已经运行完毕了，第一个文本的实线覆盖了第四个文本的空白，这就像是一个衔尾蛇，四段部分实线分别咬上一部分的实线部分。