【SVG】基本图形 —— 制作自己的SVG动态图标

本文章假设读者对SVG有基础的了解。

属性

width

元素的宽度

height

元素的高度

fill

为闭合图形填充颜色

fill-opacity

填充颜色的透明度

stroke

为线条添加颜色

stroke-width

线条宽度

stroke-opacity

线条透明度

stroke-linecap

线条终点的样式，支持三个值：butt（默认）,square,round。

stroke-linejoin

线条转折点的连接样式，支持三个值：miter（默认）,round,bevel。

stroke-dasharray

用逗号分隔的一组数字，表示虚线中实线段的长度。

stroke-dashoffset

支持百分比和数值，表示dash模式到路径开始的距离。

元素

<rect>

x矩形左上角的x位置
y矩形左上角的y位置
width宽度
height高度
rx圆角的x方位的半径
ry圆角的y方位的半径

<circle>

r圆形半径
cx圆心的x位置
cy圆心的y位置

<ellipse>

rx椭圆的x半径
ry椭圆的y半径
cx椭圆中心的x位置
cy椭圆中心的y位置

<line>

x1线条起点的x位置
y1线条起点的y位置
x2线条终点的x位置
y2线条终点的y位置

<polyline>

points折线的折点
exam:<polyline points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145"/>

<polygon>

points多边形的折点
exam:<polygon points="50 160, 55 180, 70 180, 60 190, 65 205, 50 195, 35 205, 40 190, 30 180, 45 180"/>

<path>

d“路径命令+参数”的序列，大写命令表示采用绝对定位，小写命令表示采用相对定位。
M(m) x y指定路径的起点
L(l) x y指定路径直线的终点
H(h) x指定路径水平直线终点的x
V(v) y指定路径垂直直线终点的y
Z(z)没有参数，闭合路径
A(a) rx ry x-axis-rotation large-arc-flag sweep-flag x y绘制弧形。弧形可以视为圆形或椭圆形的一部分。

• rx椭圆的x半径

• ry椭圆的y半径

• x-axis-rotation椭圆x轴的旋转角度

• large-arc-flag0表示小角度弧，1表示大角度弧。

• sweep-flag0表示从起点到终点沿逆时针画弧，1表示从起点到终点沿顺时针画弧。

• x弧形终点的x位置

• y弧形终点的y位置

控制点描述的是曲线始终点的斜率。贝塞尔曲线是从起点斜率到终点斜率的渐变弧线。
C(c) x1 y1, x2 y2, x y描绘三次贝塞尔曲线。6个参数分别是始终点的控制点位置和曲线终点位置。
S(s) x2 y2, x y描绘光滑三次贝塞尔曲线。
Q(q) x1 y1, x y描绘二次贝塞尔曲线。4个参数分别是控制点位置和曲线终点位置。
T(t) x y描绘光滑二次贝塞尔曲线。

<text>

文本

分组

<defs>

引用

transform

transform属性为元素变形，目前仅支持2维变形。默认都是以SVG原点为基点对元素进行变形，对于单个元素的简单变形，可以通过viewBox改变原点的方式校正。

translate

translate(x[,y])平移，支持百分比和数值。

rotate

rotate(angle[, x y])旋转，以x和y的位置为中心旋转。

scale

scale(x[, y])缩放。

skewX,skewY

skewX(angle),skewY(angle)斜切

matrix

通过矩阵实现复杂变形

CSS方法

通过css只能控制一部分svg属性。

• svg中引用样式

     <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
       <defs>
         <style type="text/css"><![CDATA[
            #MyRect {
              stroke: black;
              fill: red;
            }
         ]]></style>
       </defs>
       <rect x="10" height="180" y="10" width="180" id="MyRect"/>
     </svg>

• css中控制样式

     //svg
     <svg width="200" height="150" xmlns="http://www.w3.org/2000/svg">
         <rect height="10" width="10" id="MyRect"/>
     </svg>
     
     //css
     #MyRect {
         fill: red;
         stroke: black;
     }

• css3渐变

     //svg
      <svg width="200" height="150" xmlns="http://www.w3.org/2000/svg">
         <line x1="0" y1="0" x2="200" y2="150" stroke="black" id="myLine"/>
     </svg>
     
     //css
     #myLine {
         stroke-width: 50;
         transition: all 5s;
     }
     #myLine:hover {
         stroke-width: 100;
     }

• css3动画

     //svg
     <svg width="200" height="150" xmlns="http://www.w3.org/2000/svg">
         <line x1="0" y1="0" x2="200" y2="150" stroke="black" stroke-width="50" id="myLine"/>
     </svg>
     
     //css
     #myLine:hover{
         animation: lineAnimate 2s;
     }
     @keyframes lineAnimate {
         to {
             stroke-width: 100;
         }
     }
     
  

JavaScript方法

document.creatElementNS(ns, tagName)创建svg元素，ns为命名空间：svg元素的命名空间是：http://www.w3.org/2000/svg；如果使用引用xlink，需添加xlink的命名空间：http://www.w3.org/1999/xlink。
element.appendChild(childElement)添加子元素。
element.setAttribute(name, value)设置元素属性和值。
element.getAttribute(name)获取元素属性值。
path.getTotalLength()获取路径长度。
requestAnimationFrame(update)请求动画帧，接受一个回调函数，用来更新画面。下面是一个使用requestAnimationFrame(update)的例子：

//svg
 <svg width="800" height="800" viewBox="-400 -400 800 800" xmlns="http://www.w3.org/2000/svg">
    <line x1="0" y1="-400" x2="0" y2="-400" stroke="black" stroke-width="2" id="line"/>
</svg>

//javascript
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
(function() {
    var line = document.getElementById("line");
    var lastTime = +new Date();
    function update() {
        var curY2 = Number(line.getAttribute("y2"));

        var curTime = +new Date();
        var _time = curTime - lastTime;

        if (curY2 < 400) {
            line.setAttribute('y2', curY2 + _time / 5);
        } else if (curY2 > 400) {
            line.setAttribute('y2', 400);
        } else {
            return false;
        }

        lastTime = +new Date();
        requestAnimationFrame(update);
    }

    window.update = update;
})();

requestAnimationFrame(update);

使用requestAnimationFrame(update)可以制作简单的SVG动态图标。

---

不建议使用SVG animation with SMIL。在写这篇文章的时候，使用<set>,<animate>等元素会在chrome控制台中显示SVG's SMIL animations are deprecated and will be removed. Please use CSS animations or Web animations instead.。

参考：
SVG —— MDN
SVG教程 —— MDN
理解SVG transform坐标变换 —— 张鑫旭

转载请注明出处：https://segmentfault.com/a/1190000004670413

文章不定期更新完善，如果能对你有一点点启发，我将不胜荣幸。