摘要：表示應(yīng)用漸變的元素創(chuàng)建的邊界坐標(biāo)系統(tǒng)?？刂泣c(diǎn)確定起點(diǎn)終點(diǎn)的斜率終點(diǎn)坐標(biāo)二次貝塞爾曲線(xiàn)和之前一樣，快捷命令會(huì)通過(guò)前一個(gè)控制點(diǎn)，推斷出一個(gè)新的控制點(diǎn)。如果多帶帶使用，那么控制點(diǎn)就會(huì)被認(rèn)為和終點(diǎn)是同一個(gè)點(diǎn)，所以畫(huà)出來(lái)的將是一條直線(xiàn)。

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

viewport svg 實(shí)際大小

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

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


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

  meet    保持縱橫比同時(shí)比例大的方向縮放適應(yīng)viewport
  slice    保持縱橫比同時(shí)比例小的方向縮放適應(yīng)viewport
  none    扭曲縱橫比以充分適應(yīng)viewport 

參考文章 張?chǎng)涡?/p> 漸變

線(xiàn)性漸變

先定義再引用

gradientUnit屬性

  userSpaceOnUse:(默認(rèn)值) x1、y1、x2、y2表示當(dāng)前用戶(hù)坐標(biāo)系統(tǒng)的坐標(biāo)。也就是說(shuō)漸變中的值都是絕對(duì)值。
  objectBoundingBox: x1, y1, x2, y2表示應(yīng)用漸變的元素創(chuàng)建的邊界坐標(biāo)系統(tǒng)。也就是說(shuō)漸變隨著應(yīng)用的元素進(jìn)行了縮放。

spreadMethod屬性

  pad: （默認(rèn)值）使用漸變的顏色結(jié)點(diǎn)來(lái)填充剩余的空間。例如，如果第一個(gè)結(jié)點(diǎn)是20%，那么0%到20%這部分就是相同的顏色。
  reflect: 映射漸變圖案，從"start-to-end"，再?gòu)?end-to-start"，然后"start-to-end"，直到空間都填滿(mǎn)了。
  repeat: 重復(fù)漸變圖案，從起點(diǎn)->終點(diǎn)，直到空間填滿(mǎn)。

徑向漸變

先定義再引用

stop的屬性

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

gradientUnit屬性和spreadMethod屬性類(lèi)似于線(xiàn)性漸變

焦點(diǎn)：

矩形 rect:   x:矩形左上角的x坐標(biāo)  
            y:矩形左上角的y坐標(biāo)  
            width:矩形的寬度 
            height:矩形的高度  
            rx:對(duì)于圓角矩形,圓角對(duì)應(yīng)的橢圓在x方向上的半徑  
            ry:對(duì)于圓角矩形,圓角對(duì)應(yīng)的橢圓在y方向上的半徑  
圓 circle cx:圓心的x坐標(biāo)  
            cy:圓心的y坐標(biāo)  
            r:圓的半徑  
橢圓 ellipse cx:橢圓心的x坐標(biāo)  
              cy:橢圓心的y坐標(biāo)  
              rx:橢圓的x軸半徑   
              ry:橢圓的Y軸半徑  
線(xiàn)段 line  x1:起點(diǎn)的x坐標(biāo)  
            y1:起點(diǎn)的y坐標(biāo)  
            x2:終點(diǎn)的x坐標(biāo)  
            y2:重點(diǎn)的y坐標(biāo)  
多邊形 polygon points各個(gè)點(diǎn)的坐標(biāo)

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

stroke-dasharray:繪制虛線(xiàn):一個(gè)參數(shù)時(shí)： 表示一段虛線(xiàn)長(zhǎng)度和每段虛線(xiàn)之間的間距 
                          兩個(gè)參數(shù)或者多個(gè)參數(shù)時(shí)：一個(gè)表示長(zhǎng)度，一個(gè)表示間距 
stroke-dashoffset: 表示虛線(xiàn)的起始偏移                     

直線(xiàn)命令：

   M:將畫(huà)筆移動(dòng) M10,10(兩個(gè)參數(shù))
   H:畫(huà)水平線(xiàn) H100(一個(gè)參數(shù))
   V:畫(huà)豎直線(xiàn) V100(一個(gè)參數(shù))
   Z:閉合(無(wú)參數(shù))

以上命令大寫(xiě)表示絕對(duì)位置(明確的坐標(biāo))，小寫(xiě)表示相對(duì)坐標(biāo)(相對(duì)于前一個(gè)點(diǎn)的坐標(biāo))

曲線(xiàn)命令：

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

  S x2 y2, x y (or s dx2 dy2, dx dy)
    （S命令可以用來(lái)創(chuàng)建與之前那些曲線(xiàn)一樣的貝塞爾曲線(xiàn)，但是，如果S命令跟在一個(gè)C命令或者另一個(gè)S命令的后面，
    它的第一個(gè)控制點(diǎn)，就會(huì)被假設(shè)成前一個(gè)控制點(diǎn)的對(duì)稱(chēng)點(diǎn)。如果S命令多帶帶使用，前面沒(méi)有C命令或者另一個(gè)S命令，
    那么它的兩個(gè)控制點(diǎn)就會(huì)被假設(shè)為同一個(gè)點(diǎn)。）

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

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

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

三次貝塞爾曲線(xiàn)C:
三次貝塞爾曲線(xiàn)S:

二次貝塞爾曲線(xiàn)Q:
二次貝塞爾曲線(xiàn)T:

弧線(xiàn)命令A(yù)：

參考文檔MDN;

github-應(yīng)用例子