svg相关知识和描边动画

svg

<?xml version="1.0" standalone="no"?>
xml:定义了当前的格式为 xml
version:定义当前的版本
standalone:定义是否引用了外部文件

1. svg标签可以设置 width height，代表了svg的宽和高，（默认为 300*150）

2. 通过 path 即可设置路径

   <path d="M150 0 L75 200 L225 200 Z" stroke="pink" fill="#FFF"></path>
   M:move to    代表的是起始路径
   L:line to    代表移动的路径
   Z:closePath  代表封闭路径
   stroke:线条填充的颜色
   fill:封闭图形中间填充的颜色
   

3. 绘制多边形

   <polygon points="100,10 40,198 190,78 10,78 160,198" stroke="pink" stroke-width="1" fill="green" fill-rule="evenodd">
   </polygon>
   fill-rule:填充规则（nonzero：字面意思是非零。按照规则，要判断一个点是否在图形内，从该点作任意方向的一条射线，然后检测射线与图形路径的交点情况。从0开始计数，路径从左向右穿过射线则计数加1，从右向左穿过射线则计数减1。得出计数结果后，如果结果是0，则认为点在图形外部，否则认为在内部。）
   （evenodd：字面意思是“奇偶”。按照规则，要判断一个点是否在图形内，该点作任意方向的一条射线，然后检测射线与图形路径的交点的数量。如果结果是奇数则认为点在内部，是偶数则认为点在外部。）
   

4. 绘制多线段

   <polyline points="20,20 40,25 60,40 120,80 120,140 200,180" stroke="red" fill="none"></polyline>
   

5. 绘制矩形

   <svg>
   	<rect rx="20" ry="20" x="50" y="20" width="150" height="80" style="stroke:red; fill:xxx; stroke-width:5; stroke-opacity:0.2; fill-opacity:0.7;"></rect>
   </svg>
   rx:x轴半径
   ry:y轴半径
   x:x轴距离
   y:y轴距离
   stroke-opacity:描边透明度
   fill-opacity:填充透明度
   

6. 绘制圆形

   <circle cx="100" cy="50" r="40" stroke="red" stroke-width="4" fill="yellow"></circle>
   cx:距离x轴的距离
   cy:距离y轴的距离
   

7. defs 声明

   <defs>
   	<g id="left">
           <circle></circle>
       </g>
       <g id="right">
           <circle></circle>
       </g>
   </defs>
   若需要 defs 显示
   <use xlink:href="#left" x="100" y="100"></use>
   
   <symbol id="shape1" viewBox="0 0 50 100">
       <rect x="0" y="0" width="50" height="50" fill="green"></rect>
   </symbol>
   <use xlink:href="#shape1" x="25" y="25" width="200" height="100"></use>
   viewBox:设置显示的位置和大小
   

8. 设置描边类型的动画

   <rect x="100" y="50" width="100" height="100" stroke="green" fill="none" stroke-dasharray="400" stroke-dashoffset="400" stroke-linecap="square"></rect>
   
   

主要就是设置 stroke-dasharray:线条间距
stroke-dashoffset:指定了dash模式到路径开始的距离