【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座標變換 —— 張鑫旭

轉載請註明出處：http://www.javashuo.com/article/p-eopiyipi-de.html

文章不按期更新完善，若是能對你有一點點啓發，我將不勝榮幸。