关于svg

动画：css3动画，canvas(js动画),svg(html动画)。

 

svg基本元素

• version： 表示 <svg> 的版本，目前只有 1.0，1.1 两种
• xmlns：http://www.w3.org/2000/svg 固定值
• xmlns:xlink：http://www.w3.org/1999/xlink 固定值
• xml:space：preserve 固定值，上述三个值固定，表示命名空间，当数据单独存在svg文件内时，这3个值不能省略
• class：就是我们熟悉的 class
• width | height： 定义 svg 画布的大小
• viewbox： 定义了画布上可以显示的区域，当 viewBox 的大小和 svg 不同时，viewBox 在屏幕上的显示会缩放至 svg 同等大小（暂时可以不用理解）

有了 svg 标签，我们就可以愉快的在内部添加 SVG 图形了，上面，我在 svg 中定义了两个 polyline 标签。

 

svg基本形状

polyline：是SVG的一个基本形状，用来创建一系列直线连接多个点。

其实，polyline 是一个比较不常用的形状，比较常用的是path，rect，circle 等。

stroke-linejoin 和 stroke-linecap 属性，在线段连接处创建圆滑过渡角。

SVG 图形的一个好处就是部分属性样式可以使用 CSS 的方式书写，更重要的是可以配合 CSS 动画一起使用。

 

.g-rect-path{

    fill: none;

    stroke-width:10;

    stroke:#d3dce6;

    stroke-linejoin:round;

    stroke-linecap:round;

}

 

.g-rect-fill{

    fill: none;

    stroke-width:10;

    stroke:#ff7700;

    stroke-linejoin:round;

    stroke-linecap:round;

    stroke-dasharray: 0, 1370;

    stroke-dashoffset: 0;

    animation: lineMove 2s ease-out infinite;

}

 

@keyframes lineMove {

    0%{

        stroke-dasharray: 0, 1350;

    }

    100%{

        stroke-dasharray: 1350, 1350;

    }

}

 

 

莫慌，其实很多和 CSS 对比一下非常好理解，只是换了个名字：

• fill：类比 css 中的 background-color，给 svg 图形填充颜色；
• stroke-width：类比 css 中的 border-width，给 svg 图形设定边框宽度；
• stroke：类比 css 中的 border-color，给 svg 图形设定边框颜色；
• stroke-linejoin | stroke-linecap：上文稍微提到过，设定线段连接处的样式；
• stroke-dasharray：值是一组数组，没数量上限，每个数字交替表示划线与间隔的宽度；
• stroke-dashoffset：则是虚线的偏移量

重点讲讲能够实现线条动画的关键属性 stroke-dasharray 。

属性 stroke-dasharray 可控制用来描边的点划线的图案范式。

它是一个<length>和<percentage>数列，数与数之间用逗号或者空白隔开，指定短划线和缺口的长度。如果提供了奇数个值，则这个值的数列重复一次，从而变成偶数个值。因此，5,3,2等同于5,3,2,5,3,2。

 

html:

<div class="container">
    <svg width="400" height="400" viewPort="0 0 400 400" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <line stroke-dasharray="5, 5" x1="10" y1="10" x2="390" y2="10" />
        <line stroke-dasharray="5, 10, 20" x1="10" y1="40" x2="390" y2="40" />
        <line stroke-dasharray="5, 10, 20, 40" x1="10" y1="80" x2="390" y2="80" />
    </svg>
</div>

css:

.container {
    width:400px;
    margin: 20px auto;
}
line {
    stroke-width:5;
    stroke:#ff7700;
}