摘要：表示應用漸變的元素創建的邊界坐標系統?？刂泣c確定起點終點的斜率終點坐標二次貝塞爾曲線和之前一樣，快捷命令會通過前一個控制點，推斷出一個新的控制點。如果多帶帶使用，那么控制點就會被認為和終點是同一個點，所以畫出來的將是一條直線。

SVG 指可伸縮矢量圖形 (Scalable Vector Graphics)

viewport svg 實際大小

viewBox="x, y, width, height"  // x:左上角橫坐標，y:左上角縱坐標，width:寬度，height:高度

視區盒子：以視區盒子大小選中元素然后縮放至viewport的大小


preserveAspectRatio()
第1個值表示，viewBox如何與SVG viewport對齊；第2個值表示，如何維持高寬比（如果有)

  meet    保持縱橫比同時比例大的方向縮放適應viewport
  slice    保持縱橫比同時比例小的方向縮放適應viewport
  none    扭曲縱橫比以充分適應viewport 

參考文章 張鑫旭

線性漸變

先定義再引用

gradientUnit屬性

  userSpaceOnUse:(默認值) x1、y1、x2、y2表示當前用戶坐標系統的坐標。也就是說漸變中的值都是絕對值。
  objectBoundingBox: x1, y1, x2, y2表示應用漸變的元素創建的邊界坐標系統。也就是說漸變隨著應用的元素進行了縮放。

spreadMethod屬性

  pad: （默認值）使用漸變的顏色結點來填充剩余的空間。例如，如果第一個結點是20%，那么0%到20%這部分就是相同的顏色。
  reflect: 映射漸變圖案，從"start-to-end"，再從"end-to-start"，然后"start-to-end"，直到空間都填滿了。
  repeat: 重復漸變圖案，從起點->終點，直到空間填滿。

徑向漸變

先定義再引用

stop的屬性

  offset: 在徑向漸變中，它表示從點(fx,fy)到外邊緣的圓的百分比值距離。它定義了漸變結點的位置。值從0到1之間，或者0%到100%。
  stop-color: 定義offset結點位置的顏色
  stop-opacity: 定義顏色結點的透明度，值從0到1，或0%到100%。

gradientUnit屬性和spreadMethod屬性類似于線性漸變

焦點：

矩形 rect:   x:矩形左上角的x坐標  
            y:矩形左上角的y坐標  
            width:矩形的寬度 
            height:矩形的高度  
            rx:對于圓角矩形,圓角對應的橢圓在x方向上的半徑  
            ry:對于圓角矩形,圓角對應的橢圓在y方向上的半徑  
圓 circle cx:圓心的x坐標  
            cy:圓心的y坐標  
            r:圓的半徑  
橢圓 ellipse cx:橢圓心的x坐標  
              cy:橢圓心的y坐標  
              rx:橢圓的x軸半徑   
              ry:橢圓的Y軸半徑  
線段 line  x1:起點的x坐標  
            y1:起點的y坐標  
            x2:終點的x坐標  
            y2:重點的y坐標  
多邊形 polygon points各個點的坐標

   fill //填充(線條包裹的區間)顏色 
   stroke //定義一條線，文本或元素輪廓顏色 
   stroke-width //定義一條線，文本或元素輪廓厚度
   stroke-linecap //butt | round | square | inherit

stroke-dasharray:繪制虛線:一個參數時： 表示一段虛線長度和每段虛線之間的間距 
                          兩個參數或者多個參數時：一個表示長度，一個表示間距 
stroke-dashoffset: 表示虛線的起始偏移                     

直線命令：

   M:將畫筆移動 M10,10(兩個參數)
   H:畫水平線 H100(一個參數)
   V:畫豎直線 V100(一個參數)
   Z:閉合(無參數)

以上命令大寫表示絕對位置(明確的坐標)，小寫表示相對坐標(相對于前一個點的坐標)

曲線命令：

  C 三次貝塞爾曲線 x1 y1, x2 y2, x y (or c dx1 dy1, dx2 dy2, dx dy)
    x1 y1, x2 y2 兩個不同的控制點
    x y 終點

  S x2 y2, x y (or s dx2 dy2, dx dy)
    （S命令可以用來創建與之前那些曲線一樣的貝塞爾曲線，但是，如果S命令跟在一個C命令或者另一個S命令的后面，
    它的第一個控制點，就會被假設成前一個控制點的對稱點。如果S命令多帶帶使用，前面沒有C命令或者另一個S命令，
    那么它的兩個控制點就會被假設為同一個點。）

  Q x1 y1, x y (or q dx1 dy1, dx dy)
    x1 y1 控制點確定起點終點的斜率
    x y 終點坐標

  T 二次貝塞爾曲線 x y (or t dx dy)
    和之前一樣，快捷命令T會通過前一個控制點，推斷出一個新的控制點。這意味著，在你的第一個控制點后面，
    可以只定義終點，就創建出一個相當復雜的曲線。需要注意的是，T命令前面必須是一個Q命令，或者是另一個T命令，
    才能達到這種效果。如果T多帶帶使用，那么控制點就會被認為和終點是同一個點，所以畫出來的將是一條直線。 

  A:畫弧形 A rx ry x-axis-rotation large-arc-flag sweep-flag x y：
     rx,ry:表示弧形X,Y軸半徑,
     x-axis-rotation: 弧形的旋轉情況(順時針為正)(0不旋轉)
     large-arc-flag:角度大小(0表示小角度弧，1表示大角度弧)  
     sweep-flag:弧線方向(0表示從起點到終點沿逆時針畫弧，1表示從起點到終點沿順時針畫弧)
     x,y:弧的終點坐標      

三次貝塞爾曲線C:
三次貝塞爾曲線S:

二次貝塞爾曲線Q:
二次貝塞爾曲線T:

弧線命令A：

參考文檔MDN;

github-應用例子