SVG圖形編碼

svg:能夠不改變質量的狀況下縮放

1. svg必須有<svg></svg>包含
2. 能夠繪製不一樣的形狀矩形:rect,圓形:circle,橢圓:ellipse,線:line,折線:polyline,多邊形:polygon,路徑:path
3. 繪製不一樣的圖形則應該使用不一樣的標籤標記如圓形則使用<svg>circle</svg>
4. 能夠將svg保存爲svg格式
5. x,y表示起始座標
6. fill:填充的顏色,stroke:畫的顏色,stroke-width:畫的寬度（通俗來說就是邊框）
7. 其實和css3的canvas差很少

矩形:rect

    

<svg>
  <rect fill="red" height="100" id="rect" stroke="gray" stroke-width="10" width="100" x="20" y="20"></rect>
</svg>

圓角矩形：設置rx,ry（圓心的座標）的值便可

 

<svg>
  <circle id="circle"cx="100" cy="80" r="50" stroke="gray" stroke-width="10" fill="red">		
</svg>

圓形:circle

circle:沒有x,y的屬性由於已經設置好了圓心cx,cy

  

<svg class="grid-50">
  <rect fill="red" height="100" id="rect" stroke="gray" stroke-width="10" width="100" x="20" y="20"></rect>
</svg>

橢圓:ellipse

ellipse:橢圓其實就是矩形而後邊框是圓角

 

<svg >
  <ellipse  rx=100 ry=30 cx=150 cy=60 fill="yellow" stroke="gray" />	
</svg>

線段:line(兩點肯定一條直線)

    

<svg>
  <line x1="0" y1="0" x2="200" y2="20" fill="gray" stroke="gray" stroke-width="2" />
</svg>

折線:polyline(就是設置多個座標點)

   

注意不能使用（0,0）是無效的

<svg>
  <polyline points="0,0  0,20  20,20  20,40  40,40"  fill="white" stroke="gray" stroke-width="2" />
</svg>

多邊形:polygon

  

固然更復雜的圖形，只要知道各個點的座標便可

<svg >
  <polygon points="50,50 0,100 100,100 50,50" fill="blue" stroke="gray" stroke-width="1">	  
</svg>

路徑:path(上面全部的圖形 均可以經過path來繪製)

下面的命令可用於路徑數據：

• M = moveto  //座標移動到
• L = lineto  //畫到
• H = horizontal lineto 
• V = vertical lineto
• C = curveto
• S = smooth curveto
• Q = quadratic Belzier curve
• T = smooth quadratic Belzier curveto
• A = elliptical Arc  //橢圓
• Z = closepath  //結束路徑

註釋：以上全部命令均容許小寫字母。大寫表示絕對定位，小寫表示相對定位。

必須按照規則書寫

<svg>
  <path d="M50 50 L200 50 L200 0 L50 0 Z" fill="blue" stroke="gray" stroke-width="2" />	
</svg>

 

demo: http://2.liteng.sinaapp.com/svg/index.html

原文地址url: http://liteng.org/node/51