?

1 什么是SVG？

• MDN中的定義是：SVG即可縮放矢量圖形（Scalable Vector Graphics，SVG)，是一種用來描述二維矢量圖形的?XML?標(biāo)記語言。 簡(jiǎn)單地說，SVG 面向圖形，HTML 面向文本。
• SVG 與 Flash 類似，都是用于二維矢量圖形，二者的區(qū)別在于，SVG 是一個(gè)?W3C 標(biāo)準(zhǔn)，基于 XML，是開放的，而 Flash 是封閉的基于二進(jìn)制格式的。因?yàn)槎际?W3C 標(biāo)準(zhǔn)，SVG 與其他的?W3C?標(biāo)準(zhǔn)，比如?CSS、DOM?和?SMIL?等能夠協(xié)同工作。

2 SVG的坐標(biāo)系統(tǒng)

• 對(duì)于所有元素，SVG使用的坐標(biāo)系統(tǒng)或者說網(wǎng)格系統(tǒng)，和Canvas用的差不多（所有計(jì)算機(jī)繪圖都差不多）。這種坐標(biāo)系統(tǒng)是：以頁(yè)面的左上角為(0,0)坐標(biāo)點(diǎn)，坐標(biāo)以像素為單位，x軸正方向是向右，y軸正方向是向下。注意，這和你小時(shí)候所教的繪圖方式是相反的。但是在HTML文檔中，元素都是用這種方式定位的。
  
  

?

3 畫圖形

• 畫矩形（rect）　　 <rect x="60" y="10" rx="10" ry="10" width="30" height="30"/> /*x 矩形左上角的x位置 y 矩形左上角的y位置 width 矩形的寬度 height 矩形的高度 rx 圓角的x方位的半徑 ry 圓角的y方位的半徑 */

  ?

• 畫圓形（circle） <circle cx="25" cy="75" r="20"/> /*r 圓的半徑 cx 圓心的x位置 cy 圓心的y位置*/

  ?

• 畫橢圓（ellipse） <ellipse cx="75" cy="75" rx="20" ry="5"/> /*rx 橢圓的x半徑 ry 橢圓的y半徑 cx 橢圓中心的x位置 cy 橢圓中心的y位置*/

  ?

• 畫直線（line） <line x1="10" x2="50" y1="110" y2="150"/> /*x1 起點(diǎn)的x位置 y1 起點(diǎn)的y位置 x2 終點(diǎn)的x位置 y2 終點(diǎn)的y位置*/

  ?

• 畫折線（polyline） <polyline points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145"/> /*points 點(diǎn)集數(shù)列。每個(gè)數(shù)字用空白、逗號(hào)、終止命令符或者換行符分隔開。每個(gè)點(diǎn)必須包含2個(gè)數(shù)字，一個(gè)是x坐標(biāo)，一個(gè)是y坐標(biāo)。所以點(diǎn)列表 (0,0), (1,1) 和(2,2)可以寫成這樣：“0 0, 1 1, 2 2”。*/

  ?

• 畫多邊形（polygon） <polygon points="50 160, 55 180, 70 180, 60 190, 65 205, 50 195, 35 205, 40 190, 30 180, 45 180"/> /*points 點(diǎn)集數(shù)列。每個(gè)數(shù)字用空白符、逗號(hào)、終止命令或者換行符分隔開。每個(gè)點(diǎn)必須包含2個(gè)數(shù)字，一個(gè)是x坐標(biāo)，一個(gè)是y坐標(biāo)。所以點(diǎn)列表 (0,0), (1,1) 和(2,2)可以寫成這樣：“0 0, 1 1, 2 2”。路徑繪制完后閉合圖形，所以最終的直線將從位置(2,2)連接到位置(0,0)。*/

  ?

• 畫路徑（） <path d="M 20 230 Q 40 205, 50 230 T 90230"/> /**/

  ?指令及參數(shù)見下圖

  指令	參數(shù)	說明
  M	x y	將畫筆移動(dòng)到點(diǎn)(x,y)
  L	x y	畫筆從當(dāng)前的點(diǎn)繪制線段到點(diǎn)(x,y)
  H	x?	畫筆從當(dāng)前的點(diǎn)繪制水平線段到點(diǎn)(x,y0)
  V	y?	畫筆從當(dāng)前的點(diǎn)繪制豎直線段到點(diǎn)(x0,y)
  A	rx ry x-axis-rotation large-arc-flag sweep-flag x y	畫筆從當(dāng)前的點(diǎn)繪制一段圓弧到點(diǎn)(x,y)
  C	x1 y1, x2 y2, x y	畫筆從當(dāng)前的點(diǎn)繪制一段三次貝塞爾曲線到點(diǎn)(x,y)
  S	x2 y2, x y	特殊版本的三次貝塞爾曲線(省略第一個(gè)控制點(diǎn))
  Q	x1 y1, x y?	繪制二次貝塞爾曲線到點(diǎn)(x,y)
  T	x y	特殊版本的二次貝塞爾曲線(省略控制點(diǎn))
  Z	無參數(shù)	繪制閉合圖形，如果d屬性不指定Z命令，則繪制線段，而不是封閉圖形。

4 待補(bǔ)充

?

更多專業(yè)前端知識(shí)，請(qǐng)上 【猿2048】www.mk2048.com

總結(jié)

以上是生活随笔為你收集整理的从零开始学习SVG的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。