SVG基本使用一

1.什麼是SVG

SVG是XML語言的一種形式，有點相似XHTML，它能夠用來繪製矢量圖形。一個簡單的SVG文檔由<svg>根元素和基本的形狀元素構成。另外還有一個g元素，它用來把若干個基本形狀編成一個組。 在學習SVG以前要注意一下兩點：

• SVG的元素和屬性必須按標準格式書寫，由於XML是區分大小寫的（這一點和html不一樣）
• SVG裏的屬性值必須用引號引發來，就算是數值也必須這樣作。

2.基本屬性填充和邊框

1.填充

1. file ：設置對象內部的顏色；
2. fill-opacity ：控制填充色的不透明度；

2.邊框

1. stroke ：設置繪製對象的線條的顏色；

2. stroke-opacity ：控制描邊的不透明度；

3. stroke-width ：定義了描邊的寬度，描邊是以路徑爲中心線繪製的；

4. stroke-linecap ：控制邊框終點的形狀；

   stroke-linecap屬性的值有三種可能值：

   • butt 用直邊結束線段，它是常規作法，線段邊界90度垂直於描邊的方向、貫穿它的終點；

   • square 的效果差很少，可是會稍微超出實際路徑的範圍，超出的大小由stroke-width控制；

   • round表示邊框的終點是圓角，圓角的半徑也是由stroke-width控制的。

     <svg width="160" height="140" xmlns="http://www.w3.org/2000/svg" version="1.1">
           <line x1="40" x2="120" y1="20" y2="20" stroke="black" stroke-width="20" stroke-linecap="butt"/>
          <line x1="40" x2="120" y1="60" y2="60" stroke="black" stroke-width="20" stroke-linecap="square"/>
           <line x1="40" x2="120" y1="100" y2="100" stroke="black" stroke-width="20" stroke-linecap="round"/>
     </svg>

   注：實際上中間是沒有粉色的線的，在此是爲了更好的顯示不一樣的效果。

5. stroke-linejoin：制兩條描邊線段之間，用什麼方式鏈接，有三種可能值；

   • miter 默認值，表示用方形畫筆在鏈接處造成尖角；

   • round 表示用圓角鏈接，實現平滑效果；

   • bevel 鏈接處會造成一個斜接；

     <svg width="160" height="280" xmlns="http://www.w3.org/2000/svg" version="1.1">
       <polyline points="40 60 80 20 120 60" stroke="black" stroke-width="20"
       stroke-linecap="butt" fill="none" stroke-linejoin="miter"/>
     
       <polyline points="40 140 80 100 120 140" stroke="black" stroke-width="20"
       stroke-linecap="round" fill="none" stroke-linejoin="round"/>
     
       <polyline points="40 220 80 180 120 220" stroke="black" stroke-width="20"
       stroke-linecap="square" fill="none" stroke-linejoin="bevel"/>
     </svg>

6. stroke-dasharra：將虛線類型應用在描邊上；

   stroke-dasharray屬性的參數，是一組用逗號分割的數字組成的數列。和path不同，這裏的數字必須用逗號分割（空格會被忽略）。每一組數字，第一個用來表示填色區域的長度，第二個用來表示非填色區域的長度。

   <svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1" style="border:1px solid #ddd">
          <path d="M 10 75 Q 50 10 100 75 T 190 75" stroke="black" stroke-linecap="round" stroke-dasharray="5,10,2" fill="none" />
          <path d="M 10 75 L 190 75" stroke="red" stroke-linecap="round" stroke-width="1" stroke-dasharray="5,5" fill="none" />
   </svg>

7. fill-rule ：定義如何給圖形重疊的區域上色，有兩種填充規則，更詳細的說明能夠看這裏搞懂SVG/Canvas中nonzero和evenodd填充規則；

   • nonzero 非零填充

   • evenodd 奇偶填充

     <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1" style="border:1px solid #ddd">
     <polygon fill-rule="nonzero" stroke="red" points="50,0 21,90 98,35 2,35 79,90" />
     </svg>
     <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1" style="border:1px solid #ddd">
      <polygon fill-rule="evenodd" stroke="red" points="50,0 21,90 98,35 2,35 79,90" />
     </svg>

8. stroke-miterlimit ：定義什麼狀況下繪製或不繪製邊框鏈接的miter效果；

9. stroke-dashoffset ：定義虛線開始的位置。

3.SVG的基本形狀

1. 矩形（rect）

<rect x="10" y="10" width="30" height="30"/>
<rect x="60" y="10" rx="10" ry="10" width="30" height="30"/>

• x：矩形左上角的x位置
• y：矩形左上角的y位置
• width：矩形寬度
• height：矩形高度
• rx：圓角的x方位的半徑
• ry：圓角的y方位的半徑

2. 圓形（circle）

<circle cx="25" cy="75" r="20"/>

• r：圓的半徑
• cx cy ：圓心的座標（x,y）

3. 橢圓（ellipse）

<ellipse cx="75" cy="75" rx="20" ry="5"/>

• cx：橢圓的x半徑
• cy：橢圓的y半徑
• cx cy ：圓心的座標（x,y）

4. 線條（line）

<line x1="10" x2="50" y1="110" y2="150"/>

• x1 y1 ：直線起始點座標（x,y）
• x2 y2 ：直線終點座標（x,y）

5. 折線（polyline）

<polyline points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145"/>

• points ：點集數列。每一個數字用空白、逗號、終止命令符或者換行符分隔開。每一個點必須包含2個數字，一個是x座標，一個是y座標。因此點列表 (0,0), (1,1) 和(2,2)能夠寫成這樣：「0 0, 1 1, 2 2」。

6. 多邊形（polygon）

<polygon points="50 160, 55 180, 70 180, 60 190, 65 205, 50 195, 35 205, 40 190, 30 180, 45 180"/>

• points ：點集數列。每一個數字用空白符、逗號、終止命令或者換行符分隔開。每一個點必須包含2個數字，一個是x座標，一個是y座標。因此點列表 (0,0), (1,1) 和(2,2)能夠寫成這樣：「0 0, 1 1, 2 2」。路徑繪製完後閉合圖形，因此最終的直線將從位置(2,2)鏈接到位置(0,0)。

7. 路徑（path）

（1）直線命令

• M命令 （move to）

  須要兩個參數分別是須要移動到點的x軸和y軸,使用M命令移動畫筆後，只會移動畫筆不畫線，因此畫線還須要另外三個命令L、H、V

  M x y (or d dx dy)

• L命令 （line to)

  須要兩個參數，分別是一個點的x軸和y軸座標，L命令將會在當前位置和新位置（L前面畫筆所在的點）之間畫一條線段

  L x y (or l dx dy)

  <path d="M10 10 L 90 20 " fill="#f00" stroke="black"/>

• H命令（水平繪線）

  標明x軸移動到的位置，只在一個軸的方向上移動

  H x (or h dx)

  <path d="M10 10 H60 L 90 90 " fill="#f00" stroke="black"/>

• V命令（垂直繪線）

  標明y軸移動到的位置，只在一個軸的方向上移動

  V y (or v dy)

  <path d="M10 10 V90 L 11 90 " fill="#f00" stroke="black"/>

• Z命令 （閉合路徑）

  從當前點畫一條直線到路徑的起點，一般被放在路徑的最後

  Z (or z)

  <path d="M 10 10 h 70 v 80 h -35 Z" fill="#f00" stroke="black"/>

  上述路徑是：畫筆移動到(10,10)點，由此開始，向右移動70像素構成一條水平線，而後向下移動80像素，而後向左移動35像素，而後再回到起點。

（2）曲線命令

• 三次貝塞爾曲線C命令

  三次貝塞爾曲線須要定義一個點和兩個控制點，須要設置三組座標參數

  C x1 y1, x2 y2, x y (or c dx1 dy1, dx2 dy2, dx dy)

  這裏的最後一個座標(x,y)表示的是曲線的終點，另外兩個座標是控制點，(x1,y1)是起點的控制點，(x2,y2)是終點的控制點。控制點描述的是曲線起始點的斜率，曲線上各個點的斜率，是從起點斜率到終點斜率的漸變過程，斜率公式爲 tanα = (y2-y1)/(x2-x1) 當tanα>0時，直線與x軸夾角越大，斜率越大；當k<0時，直線與x軸夾角越大，斜率越小。

  <path d="M 10 10 C 10 50,90 50 , 90 10" fill="#f00" stroke="black"/>

  如上圖所示，第一個控制點沒有斜率，第二個控制點斜率 k = (10-20)/(90-80) = -1,角度爲135°

• S命令

  S命令能夠用來建立與以前那些曲線同樣的貝塞爾曲線，可是，若是S命令跟在一個C命令或者另外一個S命令的後面，它的第一個控制點，就會被假設成前一個控制點的對稱點。若是S命令單獨使用，前面沒有C命令或者另外一個S命令，那麼它的兩個控制點就會被假設爲同一個點

  S x2 y2, x y (or s dx2 dy2, dx dy)

  <path d="M10 50 C 30 30 , 30 30, 50 50 S 80 80, 90 50 " fill="#f00" stroke="black"/>

  注： S的第一個控制點是C命令的第二個控制點的對稱點；

  注：兩個控制點相同

• 二次貝塞爾曲線Q

  只須要一個控制點，用來肯定起點和終點的曲線斜率,須要兩組參數，控制點和終點座標

  Q x1 y1, x y (or q dx1 dy1, dx dy)

  <path d="M10 50 Q 30 10 , 90 50 " fill="#f00" stroke="black"/>

• T命令

  T命令，能夠經過更簡短的參數，延長二次貝塞爾曲線。和以前同樣，快捷命令T會經過前一個控制點，推斷出一個新的控制點。這意味着，在你的第一個控制點後面，能夠只定義終點，就建立出一個至關複雜的曲線。須要注意的是，T命令前面必須是一個Q命令，或者是另外一個T命令，才能達到這種效果。若是T單獨使用，那麼控制點就會被認爲和終點是同一個點，因此畫出來的將是一條直線。

  T x y (or t dx dy)

  <path d="M10 50 Q 30 10 , 50 50 T 90 50" fill="#f00" stroke="black"/>

注：雖然三次貝塞爾曲線擁有更大的自由度，可是兩種曲線能達到的效果老是差很少的。具體使用哪一種曲線，一般取決於需求，以及對曲線對稱性的依賴程度

（3）弧形

• 弧形命令A

  基本上，弧形能夠視爲圓形或橢圓形的一部分。假設，已知橢圓形的長軸半徑和短軸半徑，而且已知兩個點（在橢圓上），根據半徑和兩點，能夠畫出兩個橢圓，在每一個橢圓上根據兩點均可以畫出兩種弧形。因此，僅僅根據半徑和兩點，能夠畫出四種弧形。爲了保證建立的弧形惟一，A命令須要用到比較多的參數。

  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 ：半徑x
  • ry ：半徑y
  • x-axis-rotation ：橢圓傾斜的角度，值爲傾斜的角度值
  • large-arc-flag ：決定弧線是大於仍是小於180度，0表示小角度弧，1表示大角度弧
  • sweep-flag ：弧線的方向，0表示從起點到終點沿逆時針畫弧，1表示從起點到終點沿順時針畫弧

  <path d="M10 50 A 20 30 45 0 1 60 70" fill="#f00" stroke="black"/>

  注：起始點爲（20 30），rx = 20, ry = 30 , x-axis-rotation = 45 , large-arc-flag = 0 （這裏0或1沒什麼區別）， sweep-flag = 1，終點爲（60 70）；

  <path d="M10 50 A 20 30 0 0 0 60 70" fill="#f00" stroke="black"/>

若是你是從Canvas過渡到SVG，那麼弧形會比較難以掌握，但它也是很是強大的。用路徑來繪製完整的圓或者橢圓是比較困難的，由於圓上的任意點均可以是起點同時也是終點，無數種方案能夠選擇，真正的路徑沒法定義。經過繪製連續的路徑段落，也能夠達到近似的效果，但使用真正的circle或者ellipse元素會更容易一些。