SVG 揚帆起航

原文連接： http://hangyangws.win/2017/04...
本文不能讓你成爲 SVG 大神，可是能讓你知道、瞭解他「揭開神祕面紗」

基礎認知

SVG「Scalable Vector Graphics」表示「可縮放矢量圖形『放大不模糊』」面向將來「W3C 標準」。
基本的 SVG 文檔由 <svg> 根元素和 基本形狀元素 構成
做爲 XML 的一種方言，SVG 必須正確的綁定命名空間（在 xmlns 屬性中綁定）。命名空間速成 獲取更多信息
SVG 文件全局有效的規則是 「後來居上」，越後面的元素越可見。

能作什麼

動畫、圖形、漸變、旋轉、濾鏡、JavaScript 接口、各類超酷的動畫…

和 HTML 使用的幾種方式

<img src="xxx.svg" height="10" width="10" />
不能使用JS來控制

.svg { background-image: url(xxx.svg);}
最好不使用 base64 格式化 SVG「阻塞其它資源」、不能使用 JS 控制

<iframe src="xxx.svg">Not support iframe</iframe>

<embed type="image/svg+xml" src="xxx.svg" />

<object type="image/svg+xml" data="xxx.svg">Not support SVG</object>
能使用JS來控制「推薦方式」

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10">…</svg>
節省 HTTP 請求，能使用 JS 控制，不能被瀏覽器緩存

座標系統

看圖說話「原點在左上角」：

viewBox

<svg width="400" height="300" viewBox="0,0,40,30" style="border:1px solid #cd0000;">
  <rect x="10" y="5" width="20" height="15" fill="#cd0000"/>
</svg>

viewBox demo

動畫理解：

深度閱讀 - viewBox

CSS、JS 與 SVG

內斂樣式

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 65">
  <style type="text/css">
    <![CDATA[
    .red { strock: #f00; }
    ]]>
  </style>
  <path class="red" d="M10 10v20" />
</svg>

外鏈樣式

<?xml-stylesheet type="text/css" href="xxx.css"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 65">
  <path class="cls" d="M42 27v-20" />
</svg>

JS 操做 SVG

若是 SVG 代碼做爲 DOM 在 HTML 內部，能夠向日常同樣操做 DOM 操做 SVG
若是是使用 <object> 你可使用 contentDocument 來控制它 SVG

注意

1. <img>、background-image 形式的 SVG 不支持「外鏈 CSS、JS」
2. 內斂 CSS 和 JS 最好放在 <![CDATA[ 與 ]]> 之中

SVG 基礎元素

• <svg>：SVG 的根元素，能夠相互嵌套
• <g>：將 SVG 中的元素進行分組操做，分組後能夠當作一個單獨的形狀，統一轉換
• <defs>：用於定義在 SVG 中可重用的元素，def 元素不會直接展現出來，能夠經過 use 元素來引用
• <use>：經過它來複用 def 元素，也包括 <g>、<symbol> 元素，使用 <use xlink:href="#id"/> 調用
• <text>：文本節點，能夠實現 word 中的那種「藝術字」
• <image>：在 SVG 中嵌套圖片，能夠對圖片作對應的處理
• …

SVG 形狀元素

來張圖壓壓驚：

點我查看 SVG 元素的基本 DEMO

<path />

別說話，先舉個 ? ，一塊兒感覺一下 path：點我

基於 path 的不一樣屬性，能夠畫出各類各樣的路徑，因此 path 可算是 SVG 的「節點之王」
除了 path 以外的節點都「比較普通」，能夠當作是對 path 的封裝，好比「Rect、Circle…」

命令
命令都用一個關鍵字母來表示，命令 都有兩種 表示方式

1. 大寫字母，表示採用「絕對定位」
2. 小寫字母，表示採用「相對定位『相對於上一個點』」

path 的命令列表

document.getElementById(‘path’).getTotalLength() 獲得路徑長度

• M：moveto 移動到
• L：lineto 畫線到；H：horizontal lineto 水平線到；V：vertical lineto 垂直線到

L 命令將會在當前位置和新位置之間畫一條線段：L x y (or l dx dy)
還有兩個簡寫命令：H，繪製平行線。V，繪製垂直線。這兩個命令都只帶一個參數，標明在 x 或 y 軸移動到的位置：H x (or h dx) 、V y (or v dy)

• Z：closepath 關閉路徑

Z 命令會從當前點畫一條直線到路徑的起點，因此它仍是常常被放到路徑的最後。另外，Z 命令不用區分大小寫：Z (or z)

• C：curveto 三次貝塞爾曲線

C x1 y1, x2 y2, x y 或 c dx1 dy1, dx2 dy2, dx dy
(x1, y1)、(x2, y2) 分別是起點、終點控制點。最後一個座標 (x, y)，表示曲線的終點
三次貝塞爾曲線 表現形式 是：曲線沿着 起點開始 到第一控制點的方向伸出，逐漸彎曲，而後沿着第二控制點到 終點的方向結束

• S：smooth curveto 光滑三次貝塞爾曲線

S 命令能夠用來建立與以前那些曲線同樣的貝塞爾曲線，一般和 C 命令一塊兒使用
若是 S 命令跟在一個 C 命令或者另外一個 S 命令的後面，它的第一個控制點，就會被假設成前一個控制點的對稱點，不該該寫出來，因此 S 省略了一個對稱點

• Q：quadratic Belzier curve 二次貝塞爾曲線

Q x1 y1, x y 或 q dx1 dy1, dx dy

• T：smooth quadratic Belzier curveto 光滑二次貝塞爾曲線

T x y 或 t dx dy
T 命令相似於 S 命令，用於二次貝塞爾曲線。T 命令前面最好是一個 Q 命令，或者是另外一個 T 命令
若是 T 單獨使用，那麼控制點就會被認爲和終點是同一個點，因此畫出來的將是一條直線

• A：elliptical Arc 橢圓弧

A rx ry x-axis-rotation large-arc-flag sweep-flag x y 或 a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy

rx ry：「橢圓」的 x，y半徑
x-axis-rotation：X 軸旋轉角度，順時針爲正數
large-arc-flag：1 表示用大弧度，0 表示小弧度
sweep-flag：弧度回話方向，1 順時針，0 逆時針
x y：弧度終點

元素與樣式

• stroke
• fill
• transform
• linearGradient
• mask
• filter
• clipPath

一些 Demo：
svg 模糊 demo
symbol demo
symbol-use-demo
text mask demo
mask demo
clip demo
SVG 文字路徑動畫
linearGradient Demo

使用 CSS 請注意
把 background-color、border 改爲 fill 和 stroke
上色和填充的部分通常是能夠用 CSS 來設置的，好比 fill，stroke，stroke-dasharray，但不包括漸變和圖案等。
另外，width、height，以及路徑的命令等等，都不能用 css 設置
不是全部的屬性都能用 CSS 來設置：SVG 規範 將屬性區分紅 properties 和 attributes，前者是能夠用 CSS 設置的，後者不能

SVG 動畫

SVG 動畫 集合
SVG 的動畫元素是和 SMIL Synchronized Multimedia Integration Language開發組合做開發的。
SMIL 開發組和 SVG 開發組合做開發了 SMIL 動畫規範，在規範中制定了一個基本的 XML 動畫特徵集合。
SVG 吸取了 SMIL 動畫規範當中的動畫優勢，並提供了一些SVG繼承實現。

大概三種實現方式：

• JS 動畫「DOM 操做『忽視它』」
• CSS3 動畫「animation、transition『不是 svg 的重點』」
• SVG 自己的動畫「基於 SMIL」「主要藉助 SVG animate 相關標籤」

set

set 表示此元素沒有動畫效果 ???。
好吧：這樣的，雖然 set 雖然不能觸發連續的動畫，可是，其仍是能夠實現基本的延遲功能。
就是指：能夠在特定時間以後修改某個屬性值「也能夠是 CSS 屬性值」。

一個 Demo

animate

SVG animation 最強大的地方在於：「只要在頁面放幾個 animate 元素，沒有任何 CSS, 沒有任何JS」

<animate
  id="id"
  begin="id.end + 1s"
  attributeName="r"
  attributeType="XML"
  from="50"
  to="80"
  by="30"
  values="50;80"
  begin="0s"
  dur=".5s"
  repeatCount="indefinite"
  fill="freeze">
</animate>

一個 Demo

animateColor

一看就知道是顏色動畫。不過，animate 能夠實現其功能與效果，所以，此屬性已經被廢棄。
可謂由於兄弟相爭而年少隕落的天王。逝者已矣，過去的就讓它過去吧 ~~~

animateTransform

<animateTransform
  attributeName="transform"
  attributeType="XML"
  type="rotate"
  from="0 125 135"
  to="360 125 135"
  begin="0s"
  dur="10s"
  repeatCount="indefinite">
</animateTransform>

一個 Demo

animateMotion

animateMotion 元素可讓 SVG 各類圖形沿着特定的 path 路徑運動 ~~~

<animateMotion
  dur="6s"
  repeatCount="indefinite"
  path="M100 100, A120 120, -45 0 1, 300 300 A120 120, -45 0 1, 100 100">
</animateMotion>

一個 Demo

例子分析

組合：
一個 Demo

end 事件：
一個 Demo

click 事件：
一個 Demo

進階閱讀推薦

• 貝塞爾曲線原理「簡單闡述」

工具推薦

• svgo

項目地址：點我查看
比較厲害的壓縮優化 SVG 的工具，能夠將 SVG 中的無用信息刪掉，同時支持代碼進行壓縮

• SVGOMG

展現地址：SVGOMG - SVGO's Missing GUI
SVGOMG 是 svgo 的可視化界面工具，操做起來很方便，還提供了一些其餘有用的功能

• Snap.svg

項目地址：Snap.svg - Home Snap.svg 是一個可使你操縱 SVG 資源和 jQuery 操做 DOM 同樣簡單的類庫， 能夠寫出更加複雜的 SVG 效果，同時文檔超級齊全，推薦給想深刻了解的同窗。