SVG 讓 UI 工程師早點回家陪媳婦

05-02

TL;DR

本文主要是講解關於 SVG 的一些高級動畫特效，比如 SVG 動畫標籤，圖形漸變，路徑動畫，線條動畫，SVG 裁剪等。

例如：路徑動畫

圖形漸變：

線條動畫：

以及，相關的動畫的矩陣知識，這個也是現在 CSS 動畫裡面最重要，同時也是最為欠缺的知識點：

文章會先從基本語法入手，然後，慢慢深入。介紹一些動畫基本原理和對應的數學原理知識點。並且文章後面，還附有相關語法的介紹，當你在遇到不熟悉語法的時候可以參考參考。

前面一篇文章，主要介紹了一些 SVG 的基本概念和基本圖形。接下來我們需要了解一下，SVG 處理矢量這個特性之外，還有啥內容吸引我們，能讓 SVG 現在普及度這麼高？

更多內容可以關主我的公眾號：前端小吉米。

分享吉米的前端路，後面也會定期推出當前熱門的前端技術~ 比如，直播，VR

http://weixin.qq.com/r/Ij9hebLEpO-brfYa92ow (二維碼自動識別)

原文參考：前端小吉米

SVG Animation

在 SVG 中，如果我們想實現一個動畫效果，可以使用 CSS，JS，或者直接使用 SVG 中自帶的 animate 元素添加動畫。

使用 CSS 的話，有兩種選擇一種是通過 style 直接內聯在裡面，另外是直接使用相關的動畫屬性-- transform。

<use id="star" class="starStyle" xlink:href="#starDef" transform="translate(100, 100)" stylex="fill: #008000; stroke: #008000"/>

而使用 SVG 中自定的 animate 主要還是 SVG 自己的東西，比較好用。如果想用 CSS 的動畫，這都無所謂。

先看一個 SVG animate DEMO:

<rect x="10" y="10" width_="200" height="20" stroke="black" fill="none"> <animate attributeName="width" attributeType="XML" from="200" to="20" begin="0s" dur="5s" fill="freeze" /></rect>

通過將 animate 標籤嵌套在指定的圖形裡面，即可實現變換的效果。另外，還有 animateTransform，它主要是用來做變形動畫的。

<rect x="-10" y="-10" width_="20" height="20" stylex="fill: #ff9; stroke: black;"> <animateTransform attributeType="XML" attributeName="transform" type="scale" from="1" to="4 2" begin="0s" dur="4s" fill="freeze"/></rect>

簡單來說：

animate: 相當於 CSS 中的 transition
animateTransform: 相當於 CSS 中的 transform

裡面一些技術細節我們這裡就不過多講解了。這裡，主要想介紹一下 animate 中的 morph 的效果。

animate morph

該效果主要做的就是圖形內部的漸變。如圖：

這種動畫是怎麼實現呢？

直接看代碼吧：

這麼多，是不是感覺有點懵逼。不過，我們細分來看一下其實很簡單。裡面主要是利用 animate 中的 keyTimes，calcMode，keySplines，以及 values 這幾個屬性。不急，我們一個一個來解釋一下。

keyTimes: 這其實和 CSS 中定義的 @keyframes 一樣。通過 0-1 之間的值，定義每段動畫完成的時間。格式為：value;value...。例如 0;.0625;.208333333;.3125;.395833333;.645833333;.833333333;1。從第一個動畫，到第二個動畫經歷的時間比例為 6.25%。並且，keyTimes 需要和 values 裡面定義的幀數一致。
calcMode: 用來定義動畫具體的插值模型。取值有: discrete | linear[default] | paced | spline。具體可以參考 MDN。這裡我們主要介紹一下 spline。該值表示每個動畫間使用自定的貝塞爾變換曲線。如果沒有特殊要求，使用 linear 其實已經足夠了，這樣就不用麻煩去定義下面的 keySplines 屬性。
keySplines：該值用來具體定義動畫執行時的貝塞爾曲線。使用格式是通過 ; 來分隔每一個值。即，cubic-bezier(.31,.57,.93,.46) 為一組。使用 keySplines 表達，則為：keySplines = ".31,.57,.93,.46;"。當然，裡面的貝塞爾曲線組數為 整個動畫幀數 - 1。

而 values 就很簡單了。它是直接結合 attributeName 屬性，來設置具體的值，每個值之間使用 ; 進行分隔。

像上面那樣，可以在指定元素裡面嵌套多個 animate，既實現了形狀的改變，又實現了顏色的改變。Morph 比較常用於數字的更迭，比如，倒數 10s 的相關動畫。到這裡，Morpah 相關的知識點就結束了。

接著，讓我們來看一下 SVG 中，另外一非常重要的標籤 -- animateMotion。

該標籤可以讓指定的元素，繞著指定的路徑進行運動。所以這對於複雜的路徑來說非常有用，因為我們很難使用 transform 去模擬複雜的變換路徑。看一個 DEMO

animateMotion

animateMotion 大致的屬性和 animate 差不多，不過，它還擁有自己特有的屬性，比如 keyPoints、rotate、path 等。不過，calcMode 在 AM(animateMotion) 中的默認屬性由，linear 變為 paced。

這些屬性，我們慢慢介紹，先從最簡單的開始吧。首先，我們來看一個 DEMO：

<g> <rect x="0" y="0" width_="30" height="30" stylex="fill: #ccc;"/> <circle cx="30" cy="30" r="15" stylex="fill: #cfc; stroke: green;"/> <animateMotion from="0,0" to="60,30" dur="4s" fill="freeze"/></g>

from，to：指定兩點的位置，位置參數是以元素的坐標為原點的。
dur：執行渲染時間
fill：指定動畫結束後停留的裝填。有 freeze 和 remove 效果。remove 表示回到動畫開始的位置，freeze 表示停留在動畫結束的位置。

如果，你想要更複雜的路徑，可以直接使用 path 屬性來指定路徑。用法和 path 標籤中 d 屬性是一樣的。

<rect x="0" y="0" width_="30" height="30" stylex="fill: #ccc;"> <animateMotion path="M50,125 C 100,25 150,225, 200, 125" dur="6s" fill="freeze"/></rect>

或者使用 mpath 標籤，引用外部的 path。

動畫效果為：

所以，一般而言我們在定義 AM 的路徑的時候，只用一種方式定義即可，否則會發生相應的覆蓋：mpath>path>values>from/to。

在 AM 運動中，還有一個很重要的概念就是旋轉角。默認情況下，運動物體的角度是按照它和坐標軸的初始角度確定的。例如：

這樣看起來確實有些彆扭，那能不能讓物體垂直於路徑進行運動呢？

有的，根據 rotate 屬性值，一共有 3 個值可供選擇。

auto：讓物體垂直於路徑的切線方向運動。不過，如果你的路徑是閉合曲線的話，需要注意起始點的位置。

例如：

auto-reverse：讓物體垂直於路徑的切線方向並 + 180°。也就是和 auto 運動關於切線對稱。

Number：讓物體以固定的旋轉角度運動。這個就相當於使用 transform:rotate(deg) 進行控制。

在動畫設置標籤中，還有一個更簡單的--set。

set

該標籤也是用來模擬 transition 效果的。它和 animate 的主要區別是，它僅僅需要 to 的指定屬性，而不需要其他的參考屬性，比如 from，by 等。那它有啥特別的存在意義嗎？

有的，因為 set 針對於所有屬性，甚至包括 style 裡面的相關 CSS 屬性。所以，可以靠它來很好描述一些非 number 的屬性值。

<text text-anchor="middle" x="60" y="60" stylex="visibility: hidden;"> <set attributeName="visibility" attributeType="CSS" to="visible" begin="4.5s" dur="1s" fill="freeze"/> All gone!</text>

矩陣動畫

上面差不多簡單闡述了關於 SVG 一些比較有特點的動畫。當然，還有比較重要的線條動畫，這個我們放到後面進行講解。這裡先來看一下所有動畫中，非常重要的矩陣原理。線性代數應該是大學裡面來說，最容易學的一門科目，MD。。。還記得，大學線代期末考試的時候，100 分的同學應該說是如韭菜地般，一抓一大片（對不起，我沒能和他們同流合污。）

那矩陣是如何在動畫中使用的呢？

簡單的說，矩陣中的每個元素其實可以等價代換為每個因式裡面的係數：

上面也叫作三維矩陣。即，它涉及到 x,y,z 軸的計算。那對於我們平面 2D 變換來說，那麼此時矩陣又是哪種形式呢？

很簡單，只要將 z 軸永遠置為一個常數就 OK。這裡，慣例上是直接取 0 0 1 來設置。

不信的話，大家只要代進去乘以乘，應該就可以得到結果了。所以，在二維中，具體變換方式為：

後面，我們也會依據這個公式進行相關的變形操作。那矩陣變換是怎麼運用到 CSS/SVG 當中呢？

在 CSS 中，是直接使用 transform 中的屬性：

transform: matrix(a,b,c,d,e,f);

當然，在 SVG 中也是一樣的：

<g transform="matrix(1,2,3,4,5,6)"> <line x1="10" y1="20" x2="30" y2="40" stylex="stroke-width: 10px; stroke: blue;"/> </g>

所以，我們主要的重點就是講解一下 matrix 這個屬性。它的格式為：

matrix(a,b,c,d,e,f);

對應於我們上面的公式有：

在接觸 transform 的時候，大家應該了解到 transform 裡面有很多固定的動畫屬性：

translate()
rotate()
scale()
skew()

實際上，在底層還是使用 matrix 實現的變換。就拿 translate 舉個例子吧。

translate 的格式為：

translate(dx,dy)

相當於參考當前原點，在 x/y 軸上移動 dx/dy 的距離。那麼映射到矩陣，應該如何表示呢？

很簡單，它等同於：

matrix(1 0 0 1 dx dy);

使用代數證明一下：

假設有 matrix(1 0 0 1 20 30)

變為矩陣為：

根據，上面的表達式有：

X = x*1 + y*0 + 20 = x + 20Y = x*0 + y*1 + 30 = y + 30

所以，就是 X 在原有 X 軸坐標上向右移動 20 的距離，Y 相對於原有移動 30 的距離。

那麼其他幾個屬性呢？也是怎麼變化的嗎？

恩，類似。只是裡面取值不一樣：

scale(x,y): 放大 X/Y 軸，矩陣的表達為 matrix(x 0 0 y 0 0)。
rotate(θ): 坐標旋轉，矩陣的表達為 matrix(cosθ sinθ -sinθ cosθ 0 0)。
skew(θx,θy): X/Y 軸拉伸，矩陣的表達為 matrix(1 tanθx tanθy 1 0 0)。

注意，上面三個都會改變原有物體的坐標系！！！這點很重要，換句話說，後面每次變換都是基於前面一個的變換結果的。

詳情看圖：

詳情可以參考：MDN matrix

不過，這並不是我們使用 matrix 的重點，也不是它的優勢。它的優勢在於可計算，即，能夠將複雜的動畫集合到一個表達式中，並且，後續的變換可以直接基於當前的 matrix。

我們先來了解一下，如果多個變換動畫一起使用，matrix 應該如何表達呢？

只需要找到我們變換動畫對應的矩陣，然後相乘即可。例如，先旋轉 45°，然後放大 1.5 倍，則有變換動畫為：

transform: rotate(45deg) scale(1.5,1.5);

注意，雖然，你定義動畫是分開的，但此時的動畫是同時進行的。為啥？因為，這兩個動畫實際上可以整合成為一個變換矩陣：

並且，位置是不可以調換的。比如，transform: scale(2,2) translate(20px,30px)。即，你先放大兩倍，然後移動 20,30 的距離。注意，這裡移動的 20,30 相對的是已經放大過後的坐標，相對於原坐標而言就是 40,60 了。如果，你調換位置，即 transform: translate(20px,30px) scale(2,2)。就變成現在原坐標移動 20,30，然後再放大兩倍。

而上面強調的順序關係，實際上就可以理解為矩陣不滿足交換律的原則。因為一旦交換，結果很可能不一樣。

矩陣高級用法

上面的內容只是簡單的描述了關於矩陣的概念。在實際中，矩陣可以說是真正利器。

假設現在有一個動畫，要求你將一個物體從一個點通過拋物線的方式移動到另外一個點，那麼此時要求 JS/CSS 隨你挑。此時，你會不會感覺，呼吸急促，頭腦發熱呢？

恩，matrix 可以治，而且包治百病。不過，matrix 有一個限制點，它只能用於一次線性動畫表達式。即，針對於拋物線，橢圓曲線這類複雜曲線來說，不太合適。那麼有什麼辦法嗎？

有的，微分思想。每一段動畫其實都可以通過一定範圍內的直線拼接而成，那麼這樣，我們就可以將一段拋物線拆分為由幾段線段構成的曲線。當然，如果你分的越細，擬合度就越高。這裡我們不打算過度你和，我們簡單的將一段拋物線分為 5段。

如圖：

那麼接下來就是摳細節。這裡，依次取傾角為 45°，30°，0°，-45°，-30° 這 5 段直線。每段分配的時間比例為 20%、25%、10%、25%、20% 這主要是用於 keyframe 的設定。現在，用數學來分析一下，這個動畫到底該怎麼弄。

現在，已知兩點之間的距離為 100px。那麼我們同樣根據上述比例分，則有 20px, 25px, 10px, 25px, 20px。

這裡我們以 45° 傾角為參考點，則終點坐標為 (20,20); 。那麼，該段的矩陣為：

// 注意 Y 軸需要取負值！ 1 0 20 0 1 -20 0 0 1

CSS 中的變形動畫為：

transform: matrix(1,0,0,1,20,-20);

然後，第二段就為：

1 0 250 1 -14.40 0 1

使用矩陣的乘法法，則有：

1 0 45 0 1 -34.4 0 0 1

變形動畫為：

transform: matrix(1,0,0,1,45,-34.4);

剩餘幾段也是這樣的做法。最終，整個 keyframe 就應該表示為：

@keyframe Parabola{ 20%{ transform: matrix(1,0,0,1,20,-20); } 45%{ transform: matrix(1,0,0,1,45,-34.4); } ...}

整個動畫過程差不多都是這樣。當然，矩陣也不僅僅局限於這幾個動畫，憑藉著高度定製化和靈活性的特點，這它還常常用於進行回彈，彈跳等動畫中。如果大家有興趣，後期也可以對這類動畫進行簡單的講解。

後面，我們最後來了解一下 SVG 中很重要的線條動畫。

線條動畫

SVG 中的線條動畫常常用作過渡屏（splash screen）中。例如：

或者，一些比較炫酷的 LOGO 中，比如 AllowTeam 的：

看到這些炫酷的效果，大家有沒有動心想學一學，看看自己到底能否做的這麼好呢？

OK，我們現在來正式介紹一下線條動畫。在 SVG 中，最長用到的線條標籤就是 Path。這裡我前面一篇文章已經做了介紹，我這裡就不贅述了。

而在具體變化當中用到的是關於 stroke 的相關屬性：（下面的屬性都可以直接用在 CSS 當中！）

stroke*：定義筆觸的顏色。例如：stroke="green"
stroke-dasharray*：定義 dash 和 gap 的長度。它主要是通過使用 , 來分隔實線和間隔的值。例如：stroke-dasharray="5, 5" 表示，按照實線為 5，間隔為 5 的排布重複下去。如下圖：

放大看有：

另外，stroke-dasharray 並不局限於只能設置兩個值，要知道，它本身的含義是設置最小重複單元，即，dash,gap,dash,gap...。比如，我定義 stroke-dasharray="15, 10, 5" 則相當於，[15,10,5] 為一段。則有：

放大看則有：

stroke-dashoffset*: 用來設置 dasharray 定義其實 dash 線條開始的位置。值可以為 number || percentage。百分數是相對於 SVG 的 viewport。通常結合 dasharray 可以實現線條的運動。
stroke-linecap: 線條的端點樣式。
stroke-linejoin: 線條連接的樣式
stroke-miterlimit: 一個比較複雜的概念，如果我們只是畫一些一般的線段，使用上面 linejoin 即可。如果涉及對邊角要求比較高的，則可以使用該屬性進行定義。它的值，其實就是角長度比上線寬：

而實際理解的話，就是假設當 width 為 1。此時比例為 2。那麼 miter = 2。那麼超過 2 的 miter 部分則會被 cut 掉。可以參照：

他主要是配合 linejoin 一起使用。因為 linejoin 默認取值就是 miter。所以，默認情況下就可以使用該標籤屬性。它默認值為 4。其餘的大家下去實踐一下即可。詳細可以參考: miter

stroke-opacity：線段的透明度
stroke-width：線的粗細。

OK，介紹完關於 path 的所有 stroke 屬性之後，我們就要開始動手寫一下讓線條動起來的代碼。簡單來說，就是通過 stroke-dashoffset 和 stroke-dasharray 來做。整個動畫可以分為兩個過程：

通過 dasharray 將實線部分隱藏，空餘為全線段長。然後，將實線部分增加至全長。比如：dasharray: 0,1000 變為 dasharray: 1000,1000。
同時，通過 dashoffset 來移動新增的實線部分，造成線段移動的效果。有: dashoffset:0，變為 dashoffset:1000。

不過，這裡我們不打算使用 Path 來做啥複雜的動畫，這主要考慮到手頭沒有一些 SVG 生成工具。所以，這裡我們就以 Text 來做吧（因為做起來真的簡單）。

這裡，先以 IV-WEB 這段文字來做動畫。

先給大家看一下最終結果：

那麼這種動畫是怎麼做的呢？

這裡，我主要介紹一下關於 CSS 相關，SVG 就一個 Text 我直接貼代碼了：

<svg viewBox="0 0 1320 300">  <symbol id="s-text"> <text text-anchor="middle" x="50%" y="50%" dy=".35em"> IV-WEB </text> </symbol>  <use xlink:href="#s-text" class="text" ></use> <use xlink:href="#s-text" class="text" ></use> <use xlink:href="#s-text" class="text" ></use></svg>

上面是通過創建一個居中定位的字體，然後使用 3 個 text 重疊。具體 CSS 我們下面來說一下。首先，我們營造的效果是從無到有，就需要使用 dasharray 將 gap 設置的足夠大。這裡我取 300 即可。

stroke-dasharray: 0 300;

然後，通過 nth-child 選擇器，給每一個文字使用不同的顏色值：

.text:nth-child(3n + 1) { stroke: #F60A0A;}.text:nth-child(3n + 2) { stroke: #F2FF14;}.text:nth-child(3n + 3) { stroke: #FB9505;}

下面才是重點內容。此時，這 3 個 text 的起始點重合。我現在既要他們在運行時不完全重合，又要他們的線條能進行滾動。不啰嗦了，直接看代碼吧：

@keyframes stroke { 100% { stroke-dashoffset: 1000; stroke-dasharray: 80 160; }}@keyframes stroke1 { 100% { stroke-dashoffset: 1080; stroke-dasharray: 80 160; }}@keyframes stroke2 { 100% { stroke-dashoffset: 1160; stroke-dasharray: 80 160; }}

這就是上面 3 個不同的 text 運用的動畫。dashoffet 由 0 到 1000。這完成了滾動的目的。同時，為了讓字體不重合，我還需要在對應字體的 dashoffset 上，加上不同的間隔距離。比如，第一個字體 offset 為 1000。那麼第二個字體，我需要加上前一個字體 dash 的長度，即，80。所以，第二個字體就變為 1080。那麼第三個就是加上前兩個的 dash 長度，即 1160。

大致過程就是這樣，詳情可以查看： IVWEB 線條動畫。

這裡再給大家布置一個練習作業，如何實現無線連續的分段動畫呢？

具體效果如圖：

給點提示：

將多個文字重疊，取不同的 offset 和 array 即可。動畫的終止位置一般取一個 gap + dash 的周期長即可。

後面看看這篇文章反響如何，到時候再決定是否再寫一篇續集，介紹該作業的原理。

SVG 中使用 transition

在 SVG 中，本來就存在相關的動畫 Tag，不過裡面用起來比較複雜，最常用的還是直接利用 CSS 裡面相關的屬性標籤來做。其中，transition 是最常用的。比如，想做一下顏色的漸變等等。這裡可以直接利用 transition 修飾指定的 SVG 屬性即可。

# fill 是 SVG 中，專有屬性path { transition: fill .4s ease; } #europe path { fill: red; } #europe:hover path { fill: white; }

SVG 文字

在 SVG 中定義文字直接使用 text 標籤即可。關於文字來說，一般而言需要注意的點就那麼即可，文字的排列，間距等等。這些都可以直接使用 CSS 進行控制。不過，有幾個屬性比較特殊，這裡需要額外提一下。

text-anchor

用來定義參考點和實際字元之間的定位關係。格式為：

text-anchor: start | middle | end | inherit

直接看代碼解釋吧：

 <text text-anchor="start" x="60" y="40">A</text> <text text-anchor="middle" x="60" y="75">A</text> <text text-anchor="end" x="60" y="110">A</text>

第一個 A，參考的是 (60,40) 的點，定義為 start ，那麼參考點應該在字元的前面。

而剩下兩個也是同樣的道理：

tspan

現在，假如我們想在 text 裡面添加一些特殊的字元效果，比如斜體，加粗等。由於，text 標籤不能實現嵌套，所以，為了解決這個痛點，提出了 tspan 的標籤。它其實就是一個可以嵌套的 text 標籤。

<text x="10" y="30" stylex="font-size:12pt;"> Switch among <tspan stylex="font-style:italic">italic</tspan>, normal, and <tspan stylex="font-weight:bold">bold</tspan> text.</text>

tspan 裡面同樣可以自定義相關的自身屬性。詳細的可以參考 tspan 我這裡就不詳述了。

在 Path 展示 text

Text 一般可以橫放，豎放。那有沒有啥辦法讓文字可以按照一定的路徑任意排放呢？

有的，這裡可以使用 textPath 標籤，來定義具體參考路徑。

<path id="sharp-corner" d="M 30 110 100 110 100 160" stylex="stroke: gray; fill: none;"/><text> <textPath xlink:href="#sharp-corner"> Making a quick turn </textPath></text>

如圖：

具體細節我這裡就不多說了。

Clip

在 DOM 中如果想展示一個圖片的部分，或者以某種形狀展示圖片的部分，一般是通過一個 cover div 來實現的。不過，如果涉及到不規則圖形的話，那麼 DOM 就有天生缺陷了（當然使用 CSS 里的 clip-path 可以完成，不過兼容性不太好）。而在 SVG 中，提供了 clipPath 標籤，能夠讓我們自定義裁剪圖片的範圍和形狀。

clipPath 裡面可以接任何圖形，比如，path,rect 甚至是 text。使用的時候，直接在 style 中，指定 clip-path 即可，或者直接使用 clip-path 屬性指定。

<defs> <clipPath id="textClip"> <text id="text1" x="20" y="20" transform="rotate(60)" stylex="font-family: Liberation Sans; font-size: 48pt; stroke: black; fill: none;">CLIP </text> </clipPath> </defs> <use transform="translate(100, 0)" xlink:href="#shapes" stylex="clip-path: url(#textClip);"/> <use transform="translate(100, 0)" xlink:href="#shapes" clip-path="url(#textClip);"/>

或者說，如果我們想畫一個圓的裁剪區域的話：

<defs> <clipPath id="circularPath" clipPathUnits="objectBoundingBox"> <circle cx="0.5" cy="0.5" r="0.5"/> </clipPath></defs><use xlink:href="#shapes" stylex="clip-path: url(#circularPath);" />

Appendix 參考標籤

g

分組標籤應該毫無意外排第一，因為其實作為繪製圖形中最常和最基本的標籤。前面一篇文章也主要介紹過了，這裡做點補充。

每一個分組標籤都帶有 id 屬性，唯一標識該分組，為什麼呢？

因為，後面我們可以使用該 id 標籤添加動畫，重用該分組等。

<g id="demo" stroke="green" fill="white" stroke-width_="5"> <circle cx="25" cy="25" r="15"/> <circle cx="40" cy="25" r="15"/> <circle cx="55" cy="25" r="15"/> <circle cx="70" cy="25" r="15"/> </g>

每個分組裡面可以含有一些描述標籤，比如 desc。這些描述內容是不會被渲染的。

<g id="demo" stroke="green" fill="white" stroke-width_="5"> <desc>Just Demo</desc> <circle cx="25" cy="25" r="15"/> </g>

use

該標籤就是結合 g 標籤一起使用，作用是可以復用 g 分組的樣式。

<g id="Port"> <circle stylex="fill: inherit;" r="10"/></g><use x="50" y="30" xlink:href="#Port" class="classA"/>

裡面使用 xlink:href 加上指定 group 的 id，然後通過 x，y 屬性指定副本放置的位置。不過，有一個限制，use 標籤的 style 屬性，並不能覆蓋點原始的 group style 樣式。而且，有時候，我們只是想使用一些模板，即，圖形並未被解析，只有代碼存在。這時候，就需要使用 defs 來包裹了。

defs

用來保存一些代碼，使其不會被瀏覽器解析。並且裡面的分組可以被 use 屬性的 style 樣式所覆蓋。

<defs> <g id="Port"> <circle stylex="fill: inherit;" r="10"/> </g> </defs> <use x="50" y="50" xlink:href="#Port" stylex="fill: blue;"/>

symbol

該標籤和 g 標籤類似，也是用來進行分組。不過，它有個特點，即，不會被瀏覽器所渲染。那它不和 defs 差不多嗎？

恩，確實。不過，defs 是官方推薦，用來包裹一些模板 svg 代碼而創造出來，用來增加可讀性的標籤。而 symbol 是存粹的作為一個模板。它可以獨立於 svg 的 viewbox 來自定義子 viewbox 和 preserveAspectRatio。

<symbol id="sym01" viewBox="0 0 150 110"> <circle cx="50" cy="50" r="40" stroke-width_="8" stroke="red" fill="red"/> <circle cx="90" cy="60" r="40" stroke-width_="8" stroke="green" fill="white"/></symbol><use href="#sym01" x="0" y="0" width_="100" height="50"/>

同樣使用該模板，也是使用 use 標籤來完成。

個人公眾號

更多內容，可以關注我的公眾號：前端小吉米。

分享吉米的前端路，後面也會定期推出當前熱門的前端技術~ 比如，直播，VR

http://weixin.qq.com/r/Ij9hebLEpO-brfYa92ow (二維碼自動識別)