SVG

• 可伸縮矢量圖形(Scalable Vector Graphics)
• 使用 XML 格式定義圖像
• 是w3c的標準

初始化一個SVG

<!-- 畫一個 X 號 -->
<style>
  line{
    stroke:#333;
    stroke-width:8;
  }
</style>
<svg width="100" height="100" viewBox="0 0 100 100">
  <line  x1="0" y1="0" x2="100" y2="100"></line>
  <line  x1="0" y1="100" x2="100" y2="0"></line>
</svg>

SVG元素通用屬性（也可以在CSS中使用）

stroke

• stroke 路徑顏色，取值為none則沒有
• stroke-width 路徑寬度
• stroke-linecap 路徑末端的形狀
  • butt: 精準切斷，不會超過終點
  • round: 圓點
  • butt: 方點
• stroke-linejoin 路徑在拐點時怎樣呈現
  • miter: 尖點
  • round: 圓點
  • miter: 平點
• stroke-miterlimit 如果stroke-linejoin設置為miter，可以設置拐點延申的距離，取值為數字
• stroke-dasharray 繪制以虛線呈現的路徑
  • 取值如："10 5"，10表示虛線部分的寬度為10像素，5表示虛線之間的間隔為5像素
  • 取值如："10 5 5 5"，表示以10的虛線寬度開始，然后是5像素的間距，然后是5像素的虛線，然后是5像素的另一間距。然后重復該模式。
• stroke-dashoffset 平移虛線開始位置
  • 取值為數字，正數表示向左平移，負數表示向右平移
• stroke-opacity 設置路徑的不透明度
  • 取值 0~1，0為完全透明，1為完全不透明

fill

• fill 填充色，取值為none則沒有
• fill-opacity 設置填充顏色的不透明度
• fill-rule 指定一種算法判斷區域是否屬于該圖形“內部”(規定一個圖形的區域)
  • nonzero 字面意思是“非零”
    • 判斷規則：要判斷一個區域是否在圖形內，在該區域內選取一個點做任意方向的一條射線。從0開始算起，路徑從左向右穿過射線則計數加1，從右向左穿過射線則計數減1。得出計數結果后，如果結果是0，則認為點在圖形外部，否則認為在內部。
  • evenodd 字面意思是“奇偶”
    • 判斷規則：要判斷一個區域是否在圖形內，在該區域內選取一個點做任意方向的一條射線。然后檢測射線與圖形路徑的交點的數量。如果結果是奇數則認為點在內部，是偶數則認為點在外部。

transform

• 轉換，取值為轉換函數，常用函數有：
  • translate(x,[y]) 移動
    • x 必傳，x軸方向移動的距離
    • y 可選，y軸方向移動的距離，不傳視為0
  • rotate(a,[x,y]) 旋轉
    • a 必傳，形狀順時針旋轉的角度，負值為逆時針
    • x 旋轉點的x坐標，如果旋轉點未指定，默認以當前坐標系的原點
    • y 旋轉點的y坐標
  • scale(x,[y]) 縮放
    • x 必傳，x軸縮放的倍數
    • y y軸縮放的倍數，如果不傳按x軸縮放的倍數
    • scale會同時縮放原形狀坐標和筆觸，設置成負值還可以得到原形狀的鏡像
  • skewX(a) x軸傾斜
    • a 傾斜的角度
  • skewY(a) y軸傾斜
    • a 傾斜的角度
  • matrix(a,b,c,d,e,f) 矩陣
    • [a c e]
    • [b d f]
    • 計算規則：假設原形狀里的一個點原來的坐標為(oldX,oldY)，轉換后的坐標為(newX,newY)
    • newX = a * oldX + c * oldY + e
    • newY = b * oldX + d * oldY + f
  • 組合轉換
    • 多個變換函數以空格分開，注意轉換的順序
    • 如：transform="translate(50,0) rotate(30)"

SVG元素

• 坐標從元素最左上角開始算起，向右為x正方向，向下為y軸正方向

svg

• 定義svg的區域，屬性：
  • xmlns 安裝svg，在HTML5中使用可以不寫
    • 取值一般為: "http://www.w3.org/2000/svg"
  • xmlns:xlink 命名空間，在HTML5中使用可以不寫
    • 取值一般為: "http://www.w3.org/1999/xlink"
  • width svg元素的寬度(px,值為數字,不用寫單位)，默認為100%
  • height svg元素的高度
  • viewBox svg元素的區域，重新定義內部元素的單位的大小，取值：
    • "x0 y0 width height"
      • x0:開始點x的值(正數為向左平移，負數向右平移)
      • y0:開始點y的值(正數為向上平移，負數向下平移)
      • width:規定svg的寬度(坐標系的長度，不一定等于實際長度)
      • height:規定svg的高度
  • preserveAspectRatio 設置viewBox與svg實際大小的對齊和顯示方式，取值:
    • "align type"
      • align: viewBox與svg的對齊方式，由兩個部分字符串拼接組成，第一個部分是 x 軸的對齊方式，第二個部分是 y 軸對齊方式。實際生效的只會有一種，因為有一項必定會填滿整個svg
        • 如：xMidYMid 表示x軸居中對齊，y軸居中對齊。對齊的方式取值有三種，分別是：
          • Max 用于x軸，就是最大值與svg最右側對齊（居右）。用于y軸，就是最大值與svg最底部對齊（居下）
          • Mid 居中對齊
          • Min 用于x軸，就是最小值與svg最左側對齊（居左）。用于y軸，就是最小值與svg最上部對齊（居上）
      • type: 設置viewBox在svg里顯示的方式，取值：
        • meet 按照比例以viewBox里 寬 和 高 中更長的為基準填滿svg，會縮放viewBox
        • slice 按照比例以viewBox里 寬 和 高 中更短的為基準填滿svg，會切掉多出的部分
        • none 縮放viewBox以適合svg的大小，居中對齊。此時第一個參數(align)將失效

line

• 直線，屬性：
  • x1 線條起始點x軸坐標
  • y1 線條起始點y軸坐標
  • x2 線條終點x軸坐標
  • y2 線條終點y軸坐標

rect

• 矩形，屬性：
  • x 開始點x坐標
  • y 開始點y坐標
  • rx 設置圓角，x舍入的值
  • ry 設置圓角，y舍入的值，一般rx和ry設置的值一樣，如果只設置了rx，則ry默認和rx一樣
  • width 矩形的寬度
  • height 矩形的高度

circle

• 圓形，屬性：
  • cx 圓心的x坐標，默認0
  • cy 圓心的y坐標，默認0
  • r 園的半徑

ellipse

• 橢圓，屬性：
  • cx 橢圓中心的x坐標，默認0
  • cy 橢圓中心的y坐標，默認0
  • rx 水平半徑
  • ry 垂直半徑

polygon

• 多邊形，屬性：
  • points 定義多邊形的各個點
    • 取值："x1,y1 x2,y2 ... xn,yn"
      • x1:第一個點的x坐標
      • y1:第一個點的y坐標
      • yn:最后一個點的x坐標
      • yn:最后一個點的y坐標
• CSS屬性 fill-rule 在這里會用到

polyline

• 折線，屬性：
  • points 定義折線的各個點，取值同 polygon ,但是不會封閉圖形

path

<!-- 畫一個圓 -->
<path d="
  M 50 100
  A 50 50 0 1 1 50 0
  A 50 50 0 1 1 50 100
"></path>

• 路徑，屬性：
  • d 描述怎樣繪制路徑，后面的每一個字母表示繪制一個動作，后面跟著坐標

d 的常見取值：

• 以下字母同時支持小寫
• 大寫表示絕對定位，以最左上角為0點
• 小寫表示相對定位，以上一個點為0點

M(m)

• moveto 移動點(不會留下路徑)，常用于確定起始點
• M x y
  • x:x軸坐標
  • y:y軸坐標

L(l)

• lineto 畫一條直線到一個點
• L x y
  • x:x軸坐標
  • y:y軸坐標

H(h)

• horizontal lineto 水平畫一條直線到一個點
• H x
  • x:x軸坐標

V(v)

• vertical lineto 豎直畫一條直線到一個點
• V y
  • y:y軸坐標

A(a)

• elliptical arc 畫一段弧
• A rx ry rotate arc sweep x y
  • rx: x軸半徑
  • ry: y軸半徑
  • rotate: 相對于中心點順時針旋轉的角度
  • arc: 取值:0表示弧線小于180度,1表示弧線大于180度
  • sweep: 取值:0表示逆時針方向,1表示順時針方向
  • x: 終點x軸坐標
  • y: 終點y軸坐標

Q(q)

• quadratic Bézier curve 二次貝塞爾曲線
• Q cx cy x y
  • cx: 曲線控制點x軸坐標
  • cy: 曲線控制點y軸坐標
  • x: 曲線終點x軸坐標
  • y: 曲線終點y軸坐標

T(t)

• smooth quadratic Bézier curveto 延申二次貝塞爾曲線
• T x y
  • x: 曲線終點x軸坐標
  • y: 曲線終點y軸坐標
• 跟在 Q 命令后面使用，假設 Q 命令生成了一條二次貝塞爾曲線 q ，則 T 命令就是在 q 的終點再畫一條到 (x,y) 的二次貝塞爾曲線。曲線的控制點是 q 的控制點在 q 終點的中心對稱點

C(c)

• curveto 三次貝塞爾曲線
• C cx1 cy1 cx2 cy2 x y
  • cx1: 開始控制點x軸坐標
  • cy1: 開始控制點y軸坐標
  • cx2: 終點控制點x軸坐標
  • cy2: 終點控制點y軸坐標
  • x: 終點x軸坐標
  • y: 終點y軸坐標

S(s)

• smooth curveto 延申三次貝塞爾曲線
• S cx2 cy2 x y
  • cx2: 終點控制點x軸坐標
  • cy2: 終點控制點y軸坐標
  • x: 終點x軸坐標
  • y: 終點y軸坐標
• 跟在 C 命令后面使用，假設 C 命令生成了一條三次貝塞爾曲線 c ，則 S 命令就是在 c 的終點再畫一條三次貝塞爾曲線。曲線的終點控制點是 (cx2,cy2)，開始控制點是 c 的終點控制點在 c 終點的中心對稱點

Z(z)

• closepath 閉合路徑，大寫和小寫沒有區別

g

• 用于將svg形狀分組在一起，添加到g元素的屬性和樣式會被其所有的子元素繼承
• 此外，g 元素也可以放在 defs 中定義復雜的對象，之后可以通過<use>元素來引用它們

defs

• 存儲形狀，便于這些形狀的復用
• 在 defs 中定義的形狀不會顯示在svg圖像中，只有被引入才會顯示

marker

<!-- 畫一個箭頭 -->
<style>
  rect,polygon{
    stroke:none;
    fill:#333;
  }
  path{
    stroke:#333;
    stroke-width:2px;
    marker-start: url(#squ);
    marker-end: url(#arr);
  }
</style>
<svg viewBox="0 0 100 100">
  <defs>
    <marker id="squ" markerWidth="8" markerHeight="8" refX="4" refY="4" orient="auto">
      <rect x="1" y="1" width="6" height="6"></rect>
    </marker>
    <marker id="arr" markerWidth="8" markerHeight="8" refX="4" refY="4" orient="auto">
      <polygon points="4,1 1,7 7,7"></polygon>
    </marker>
  </defs>
  <path d="M 10 10 L 60 60"></path>
</svg>

• 標記
• 在路徑的開始、中間和結尾顯示標記，在特定的元素(path,line,polyline,polygon)上可以使用
  • id: 用于從其它元素引用此標記
  • markerWidth: 定義標記的寬
  • markerHeight: 定義標記的高
  • refX: 定義參考點的x軸坐標
  • refY: 定義參考點的y軸坐標
    • 參考點是使用標記時定位在路徑處的點，此處定義圓心為參考點。如果不設置，將以左上角作為參考點
  • orient: 旋轉角度。一般取值為 auto ，可以根據路徑的方向改變標記的方向，如箭頭的指向
• 在路徑上引用標記
  • marker-start: 將標記分配給路徑的起點，取值：url(#標記id)
  • marker-mid: 將標記分配給路徑的拐點，取值：url(#標記id)
  • marker-end: 將標記分配給路徑的終點，取值：url(#標記id)

symbol

• 定義可重復使用的符號
• 在 symbol 中的形狀只有被引用才會顯示
• 與在 defs 元素內使用 g 元素相比，symbol 元素還具有 viewBox 和 prepareAspectRatio 屬性

<!-- 畫一個圓 -->
<svg width="100" height="100">
  <symbol id="circle">
    <circle cx="50" cy="50" r="50" />
  </symbol>
  <use xlink:href="#circle" x="0" y="0" />
</svg>

use

• 可以引用SVG文檔中其他位置的形狀
• 被引用的形狀以(0,0)點為開始點
  • xlink 該屬性指定被引用元素的id，屬性值為"#"加上id
  • x 形狀開始點x坐標
  • y 形狀開始點y坐標

text

• 文本，屬性：
  • x 開始點x軸坐標
  • y 開始點y軸坐標

tspan

• 用于繪制多行文本，用在text標簽內，可以相對上一個tspan位置定位文本
• 多行tspan標簽如果不設置屬性，本身不會換行，沒有特殊樣式。屬性：
  • dx: 相對于上一個tspan水平平移，如：
    • dx="20" 向右平移20
    • dx="2 4 8" 第一個字符向右平移2，第二個字符向右平移4(相對于上一個tspan，而不是自身標簽上一個字符)，第三個平移8
  • dy: 相對于上一個tspan垂直平移，用法同dx
  • x: 開始點x軸坐標
  • y: 開始點y軸坐標

<!-- 寫三行文本 -->
<text y="20">
  <tspan x="10">hello world 0</tspan>
  <tspan x="10" dy="20">hello world 1</tspan>
  <tspan x="10" dy="20">hello world 2</tspan>
<text>

textPath

<defs>
  <path id="textPath" d="M 20 20 A 50 50 0 0 0 120 20">
</defs>
<text>
  <textPath xlink:href="#textPath">hello world hello world<textPath>
</text>

• 用于沿著一條路徑布置文本，屬性：
  • xlink:href 引用路徑的id

a

<a xlink:>
  <text x="20" y="20">百度</text>
</a>

• 在SVG圖像中創建一個超鏈接，屬性：
  • xlink:href 超鏈接地址
  • xlink:show 設置鏈接是在新窗口打開還是替換原來的頁面，取值：
    • new 在新的窗口
    • replace 替換原來的頁面
  • target 設置鏈接是在新窗口打開還是替換原來的頁面。以瀏覽器窗口，而不iframe。
    • _top 在原來的窗口
    • _blank 在新的窗口

image

• 嵌入圖像，支持jpg、png其他svg格式
  • xlink:href 定義圖像的鏈接
  • x 圖像開始的x軸坐標
  • y 圖像開始的y軸坐標
  • width 圖像的寬度
  • height 圖像的高度

switch

• switch元素會對其直接子元素上的 systemLanguage 屬性進行判斷，呈現第一個判斷為true的子元素，其他子元素將不顯示

<switch>
  <text systemLanguage="en-us">Howdy</text>
  <text systemLanguage="en">Hello</text>
  <text systemLanguage="zh">你好</text>
</switch>

pattern

• pattern元素可以用來定義一個圖形，對另一個圖形進行描邊或填充
  • id 定義該元素的唯一標識
  • patternUnits 設置該元素的 x y width height 屬性所代表的意義
    • "objectBoundingBox" 默認值，表示占填充的容器的比例，如：0.1 ,表示10%
    • "userSpaceOnUse" 表示按照當前SVG坐標系統的值
  • patternContentUnits 設置pattern元素內圖案的大小代表的意義
    • "objectBoundingBox" 同 patternUnits
    • "userSpaceOnUse" 默認值，同 patternUnits
  • x 元素內圖像開始的x軸的值
  • y 元素內圖像開始的y軸的值
  • width 元素的寬
  • height 元素的高

<!-- 填充一個矩形 -->
<svg width="100" height="100" viewBox="0 0 100 100">
  <pattern id="rect" width="0.2" height="0.2" patternContentUnits="objectBoundingBox">
    <rect width="0.1" height="0.1" />
  </pattern>
  <rect width="100" height="100" fill="url(#rect)" stroke-width="1" stroke="#ccc" />
</svg>

clipPath

• 根據特定路徑剪切SVG形狀
  • id 定義該元素的唯一標識
  • clipPathUnits 同 pattern 的 patternContentUnits 屬性，默認值是 "userSpaceOnUse"
• 在需要裁剪的形狀中使用 clip-path 屬性（也可以在樣式中使用）進行裁剪

<!-- 裁剪一個圓 -->
<svg width="100" height="100" viewBox="0 0 100 100">
  <clippath id="rect">
    <rect x="50" y="50" width="50" height="50" />
  </clippath>
  <circle cx="50" cy="50" r="50" style="fill:#f00;clip-path:url(#rect);"/>
</svg>

mask

• 蒙版，可以確定SVG形狀哪部分可見，以及透明度。蒙版可以視為剪切路徑的更高級版本
• 蒙版內形狀填充的顏色定義蒙版的不透明度。越接近 #ffffff 顏色越深，越不透明。越接近 #000000 顏色越淺，越透明
  • maskUnits 同 pattern 的 patternUnits 屬性，默認值為 "objectBoundingBox"
  • x 蒙版內圖像開始的x軸的值
  • y 蒙版內圖像開始的y軸的值
  • width 蒙版的寬
  • height 蒙版的高

<!-- 在蒙版中使用漸變和填充 -->
<svg width="100" height="100" viewBox="0 0 100 100">
  <defs>
    <!-- 定義漸變 -->
    <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%" spreadMethod="pad">
        <stop offset="0%" stop-color="#ffffff" stop-opacity="1" />
        <stop offset="100%" stop-color="#000000" stop-opacity="1" />
    </linearGradient>
    <!-- 定義填充 -->
    <pattern id="pattern" width="0.1" height="0.1">
      <circle cx="5" cy="5" r="5" style="fill:#ff0000;" />
    </pattern>
    <!-- 定義蒙版 -->
    <mask id="mask" x="0" y="0" width="100" height="100" >
      <rect x="0" y="0" width="100" height="100" style="fill:url(#gradient);" />
    </mask>
  </defs>
  <text x="0" y="50" style="stroke:none;fill:#000000;">
    Hello world!
  </text>
  <rect x="0" y="0" width="100" height="100" style="stroke:none;fill:url(#pattern);mask:url(#mask);" />
</svg>

filter

• 濾鏡需要輸入（源），并對其應用濾鏡效果。濾鏡的輸入可以是源圖形（表示RGB顏色）、圖形的alpha通道或者其它濾鏡的輸出。
• 內部元素通用屬性
  • in 定義濾鏡的輸入，取值通常為
    • "SourceGraphic" 源圖形
    • "SourceAlpha" 源圖形的alpha通道
    • 其他濾鏡的 result 屬性的值
  • result 定義濾鏡的輸出
• filter 濾鏡的容器，濾鏡的尺寸是相對于輸入的形狀計算。由于某些濾鏡的輸出通常要比輸入大（如模糊），因此x和y的值通常要使用負數
  • x 定義濾鏡開始點的x軸坐標
  • y 定義濾鏡開始點的y軸坐標
  • width 濾鏡的寬
  • height 濾鏡的高
  • id 定義濾鏡的唯一標識

feGaussianBlur

• 高斯模糊濾鏡
  • stdDevation 設置圖形模糊的多少。取值為數字，越大模糊度越高。濾鏡最好比源圖形邊緣多出該值的兩倍

<!-- 使用高斯模糊濾鏡 -->
<svg width="100" height="100" viewBox="0 0 100 100">
  <defs>
    <!-- 定義濾鏡 -->
    <filter id="filter" x="-10" y="-10" width="100" height="100">
      <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
    </filter>
  </defs>
  <rect x="10" y="10" width="80" height="80" style="stroke:none;fill:#ff0000;filter:url(#filter);" />
</svg>

feOffset

• 偏移濾鏡
• dx 向x軸平移的量
• dy 向y軸平移的量

<!-- 使用偏移濾鏡 -->
<svg width="100" height="100" viewBox="0 0 100 100">
  <defs>
    <!-- 定義濾鏡 -->
    <filter id="filter" x="0" y="0" width="50" height="50">
      <feOffset in="SourceGraphic" dx="30" dy="10" />
    </filter>
  </defs>
  <rect x="10" y="10" width="50" height="50" style="stroke:#666;fill:none;filter:url(#filter);" />
  <rect x="10" y="10" width="50" height="50" style="stroke:#666;fill:none;" />
</svg>

feColorMatrix

• 顏色矩陣濾鏡

  • type 指定矩陣運算的類型。一般取值"matrix"，表示提供完整的5x4的矩陣
  • values 設置矩陣的值，每個像素原來的顏色值[R,G,B,A]將與矩陣相乘轉換成新的顏色[R',G',B',A']

  r1 r2 r3 r4 r5
  
  g1 g2 g3 g4 g5
  
  b1 b2 b3 b4 b5
  
  a1 a2 a3 a4 a5

  R、G、B、A表示原來的顏色值，R'、G'、B'、A'表示轉換后的顏色值
  
  R' = r1*R + r2*G + r3*B + r4*A + r5
  
  G' = g1*R + g2*G + g3*B + g4*A + g5
  
  B' = b1*R + b2*G + b3*B + b4*A + b5
  
  A' = a1*R + a2*G + a3*B + a4*A + a5

<!-- 使用顏色矩陣濾鏡 -->
<svg width="100" height="100" viewBox="0 0 100 100">
  <defs>
    <!-- 定義濾鏡 -->
    <filter id="filter" x="0" y="0" width="50" height="50">
      <feColorMatrix in="SourceGraphic" type="matrix" values="
        0.4 0 0 0 0
        0.2 1 0 0 0
        0.8 0 1 0 0
        0 0 0 1 0
      " />
    </filter>
  </defs>
  <rect x="10" y="10" width="50" height="50" style="stroke:none;fill:#ff0000;" />
  <rect x="40" y="40" width="50" height="50" style="stroke:none;fill:#ff0000;filter:url(#filter);" />
</svg>

feMerge

• 組合濾鏡，將不同的效果組合在一起同時作用于圖形

<!-- 使用組合濾鏡實現陰影效果 -->
<svg width="100" height="100" viewBox="0 0 100 100">
  <defs>
    <filter id="filter" x="-10" y="-10" width="70" height="70">
      <!-- 偏移濾鏡（feOffset）作用于形狀的Alpha通道 -->
      <feOffset in="SourceAlpha" dx="4" dy="4" result="offset" />
      <!-- 高斯模糊（feGaussianBlur）作用于偏移濾鏡效果的輸出 -->
      <feGaussianBlur in="offset" stdDeviation="3"  result="blur" />
      <!-- 這里是將原始圖形和模糊濾鏡的輸出組合在一起 -->
      <feMerge>
        <!-- 模糊濾鏡的輸出 -->
        <feMergeNode in="blur" />
        <!-- 原圖形，后面的輸入顯示在前面的頂部，形狀看起來像帶有陰影 -->
        <feMergeNode in="SourceGraphic" />
      </feMerge>
    </filter>
  </defs>
  <rect x="20" y="20" width="50" height="50" style="stroke:none;fill:#ff0000;filter:url(#filter);" />
</svg>

feBlend

• 混合濾鏡，可以將多個濾鏡混合為一個
  • in 濾鏡的第一個輸入源
  • in2 濾鏡的第二個輸入源

<!-- 使用組合濾鏡實現陰影效果 -->
<svg width="100" height="100" viewBox="0 0 100 100">
  <defs>
    <filter id="filter" x="-10" y="-10" width="70" height="70">
      <!-- 偏移濾鏡（feOffset）作用于形狀的Alpha通道 -->
      <feOffset in="SourceAlpha" dx="4" dy="4" result="offset" />
      <!-- 高斯模糊（feGaussianBlur）作用于偏移濾鏡效果的輸出 -->
      <feGaussianBlur in="offset" stdDeviation="3"  result="blur" />
      <!-- 這里是將原始圖形和模糊濾鏡的輸出混合在一起 -->
      <feBlend  in="SourceGraphic" in2="blur" />
    </filter>
  </defs>
  <rect x="20" y="20" width="50" height="50" style="stroke:none;fill:#ff0000;filter:url(#filter);" />
</svg>

linearGradient

• 線性漸變，可以定義從一種顏色到另一種顏色的平滑過渡。有兩種類型的漸變：線性漸變和徑向漸變
  • x1 x2 定義漸變梯度向量的起點坐標，默認使用百分比
  • x2 y2 定義漸變梯度向量的終點坐標
  • spreadMethod 定義漸變如何在形狀中擴展，取值有三種：
    • "pad" 填充，默認，在漸變的第一個顏色和最后一個顏色之外進行純色填充
    • "reflect" 反射，在漸變顏色之外鏡像延申漸變
    • "repeat" 重復，在漸變顏色之外重復漸變
  • gradientTransform 給漸變添加變換，取值為轉換函數<transform-list>，同transform
  • gradientUnits 定義x1,y1,x2,y2的取值的類型
    • "objectBoundingBox" 默認，百分比
    • "userSpaceOnUse" 按坐標系的值計算

stop

• linearGradient元素的子元素，定義在漸變節點上的一種顏色
  • offset 該顏色點在漸變中的位置（百分比）
  • stop-color 該點的顏色
  • stop-opacity 該點的透明度

<!-- 實現漸變效果 -->
<svg width="400" height="100" viewBox="0 0 400 100">
  <defs>
    <linearGradient x1="0.3" y1="0.5" x2="0.7" y2="0.5" spreadMethod="reflect" id="gradient" gradientTransform="rotate(15)">
      <stop offset="0%" stop-color="gold" />
      <stop offset="100%" stop-color="red" />
    </linearGradient>
  </defs>
  <rect x="20" y="20" width="360" height="60" fill="url(#gradient)"/>
</svg>

動畫元素

時間單位

• 時間單位通常用在begin、dur和end等動畫的屬性上
• 可以指定數字加時間單位，如 5s 表示5秒

• 也可以是包含小時、分鐘和秒的指定時間格式(hh:mm:ss)
  • 如："1:30:45" 表示1小時30分45秒

動畫屬性

• attributeName 要改變的屬性名
• additive 將相同屬性的動畫的改變值疊加起來，上一個動畫的終點值作為下一個動畫的起始點
  • "replace" 默認，重新開始
  • "sum" 疊加
• accumulate 相同屬性的動畫，下一個動畫執行時保留上一動畫的終點值
  • "none" 默認，不疊加
  • "sum" 疊加
• calcMode 控制動畫運行的速度
  • "discrete" 離散，from值直接跳到to值
  • "linear" 線性，默認值（animateMotion元素除外）
    • 如果沒指定values或keyTimes等屬性時，動畫從頭到尾的速率都是一致的
  • "paced" 步調，動畫從頭到尾的速率都是一致的（animateMotion該屬性的默認值）
    • 忽略keyTimes、keySplines和values(不均勻階段)屬性，dur為indefinite也會被忽略
  • "spline" 使用貝塞爾曲線，spline的時間點由keyTimes屬性定義，控制點由keySplines定義
• values 設置動畫各個階段的屬性值
  • 取值為分號隔開一組值，如："a;b;c;d"。如果設置了該屬性，將忽略元素上from、to和by屬性
• keyTimes 定義動畫的時間點，取值同values類似
  • 值的數目要和values對應
  • 第一個數字是0，最后一個是1，每個連續的值必須比它前面的值大或者相等
• keySplines 與keyTimes相關聯的一組貝塞爾控制點，只有calcMode="spline"時這個參數才有效
  • 總比keyTimes少一個控制點，控制點之間由分號隔開。
  • 每個控制點由4個浮點值組成，值范圍0~1，由空格隔開
  • 如果值不合法或者個數不對，則沒有動畫效果
  • 如："0.5 0 0.5 1"，一個控制點，先加速再減速
• from 動畫開始時屬性的值
• to 動畫結束時屬性的值
• by 動畫過程屬性值變化的量
• begin 動畫執行等待的時間，取值有多種形式
  • 時間值 如："6s"
  • 一對時間值，分號隔開 如："3s,6s"，表示3s時執行一次，6s時再執行一次
  • syncbase-value 用法：元素的id.begin/end +/- 時間值
  • event-value 用法：元素的id.事件類型 +/- 時間值
  • repeat-value 用法：元素的id.repeat(整數) +/- 時間值
• end 動畫在多長時間后結束，取值為時間值
• dur 動畫持續的時間，取值常規為時間值。或者"indefinite"，表示時間無限，動畫不執行
• min 動畫最少執行多長時間，如果end值<min值，以min的值為準
• max 動畫最多執行的時長，如果end值>max值，以max的值為準
• restart 控制動畫重新執行（很多動畫觸發可能和事件相關）
  • "always" 默認，總是可以重復
  • "whenNotActive" 動畫正在進行的時候，不能重啟動畫
  • "never" 只能執行一次
• repeatCount 動畫執行的次數
  • 取值可以是合法數值或者"indefinite"（無限循環）
• repeatDur 動畫重復的總時長
  • 取值可以是普通時間值或者"indefinite"（無限循環）
• fill 定義動畫執行結束的狀態
  • "remove" 默認值，動畫結束后回到開始的位置
  • "freeze" 凍結，動畫結束后凍結在結束時的位置

<!-- 對additive和accumulate的理解 -->
<svg width="500" height="100" viewBox="0 0 500 100">
  <!-- 使用additive="sum" -->
  <rect width="100" height="100" fill="#f00">
    <animate attributeName="x" additive="sum" values="0;100" dur="3s"/>
    <animate attributeName="x" additive="sum" values="0;200" dur="3s"/>
  </rect>
  <!-- 實際效果是圖像在3s內，形狀移動了300 -->
</svg>
<svg width="500" height="100" viewBox="0 0 500 100">
  <!-- 使用accumulate="sum" -->
  <rect width="100" height="100" fill="#f00">
    <animate attributeName="x" accumulate="sum" values="0;100" dur="3s"/>
    <animate attributeName="x" accumulate="sum" to="200" dur="3s"/>
  </rect>
  <!-- 實際效果是圖像在3s內，形狀移動了200 -->
</svg>

<!-- begin特殊取值舉例 -->
<svg width="500" height="100" viewBox="0 0 500 100">
  <!-- 上一個動畫執行結束，下一個動畫開始執行 -->
  <rect width="100" height="100" fill="#f00">
    <animate id="syncbase" attributeName="x" values="0;300" dur="3s" fill="freeze"/>
    <animate attributeName="fill" values="#f5222d;#1890ff" begin="syncbase.end" dur="1s" fill="freeze"/>
  </rect>
</svg>
<svg width="500" height="100" viewBox="0 0 500 100">
  <!-- 點擊圓后，延時500ms執行動畫 -->
  <circle id="circle" cx="50" cy="50" r="50" fill="#f5222d"></circle>
  <rect x="100" width="100" height="100" fill="#f5222d">
    <animate attributeName="x" values="100;400" begin="circle.click+500ms" dur="3s" fill="freeze"/>
  </rect>
</svg>
<svg width="500" height="100" viewBox="0 0 500 100">
  <!-- 第一個動畫執行了2遍之后，執行第二個動畫 -->
  <rect width="100" height="100" fill="#f00">
    <animate id="repeat" attributeName="x" values="0;300" dur="3s" repeatCount="indefinite"/>
    <animate attributeName="fill" values="#f5222d;#1890ff" begin="repeat.repeat(2)" dur="1s" fill="freeze"/>
  </rect>
</svg>

set

• 經過一段時間后改變屬性

<svg width="400" height="100" viewBox="0 0 400 100">
  <circle cx="50" cy="50" r="25" stroke="none" fill="cyan">
    <set attributeName="r" to="50" begin="2s"/>
  </circle>
</svg>

animate

• 為形狀設置動畫

<svg width="500" height="100" viewBox="0 0 500 100">
  <rect width="100" height="100" fill="#f00">
    <animate attributeName="x" from="0" to="400" begin="0" dur="3s"/>
  </rect>
</svg>

animateTransform

• 給transform變換添加動畫效果
  • type transform的類型

<svg width="500" height="100" viewBox="0 0 500 100">
  <rect width="50" height="50" fill="#f00">
    <animateTransform attributeName="transform" type="scale" values="1;2" dur="3s" fill="freeze"/>
  </rect>
</svg>

animateMotion

• 讓SVG圖形沿著特定的path路徑運動
  • path 定義移動的路徑，同path元素的d屬性
  • rotate 指定圖形在路徑上移動時如何旋轉，取值：
    • 數值，指定一個恒定的旋轉度數，默認值為0
    • "auto" 指向運動的方向
    • "auto-reverse" 指向運動的反方向
  • keyPoints 定義在每個時間段移動的進度
    • 取值為一組數值，最小為0，最大為1。每一個值都要比上一個值大。與keyTimes對應

<svg viewBox="0 0 200 100">
  <path fill="none" stroke="#95de64" d="
    M 20 50
    C 20 -50 180 150 180 50 
    C 180 -50 20 150 20 50
    Z
  "/>
  <rect x="-5" y="-2" width="10" height="4" fill="#f5222d">
    <animateMotion rotate="auto" keyPoints="0;0.5;1" keyTimes="0;0.3;1" dur="6s" calcMode="linear" repeatCount="indefinite" path="
      M 20 50
      C 20 -50 180 150 180 50
      C 180 -50 20 150 20 50
      Z
    "/>
  </rect>
</svg>

• 喜歡的話就點贊關注吧