Svg初學總結

原來使用js插件來畫圖highchart.js,發現仍是用svg實現的，打算學習瞭解一下，如下都是可直接在html插入。支持瀏覽器：Internet Explorer9，火狐，谷歌Chrome，Opera和Safari

什麼是SVG？

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

• SVG 用來定義用於網絡的基於矢量的圖形

• SVG 使用 XML 格式定義圖形

• SVG 圖像在放大或改變尺寸的狀況下其圖形質量不會有所損失

• SVG 是萬維網聯盟的標準

• SVG 與諸如 DOM 和 XSL 之類的 W3C 標準是一個總體

實例操做：

矩形源碼

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
  style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;
  stroke-opacity:0.9;opacity:0.5"/>
</svg>

代碼解析:

rect 元素的 width 和 height 屬性可定義矩形的高度和寬度
style 屬性用來定義 CSS 屬性
CSS 的 fill 屬性定義矩形的填充顏色（rgb 值、顏色名或者十六進制值）
CSS 的 stroke-width 屬性定義矩形邊框的寬度
CSS 的 stroke 屬性定義矩形邊框的顏色
x 屬性定義矩形的左側位置（例如，x="0" 定義矩形到瀏覽器窗口左側的距離是 0px）
y 屬性定義矩形的頂端位置（例如，y="0" 定義矩形到瀏覽器窗口頂端的距離是 0px）
CSS 的 fill-opacity 屬性定義填充顏色透明度（合法的範圍是：0 - 1）
CSS 的 stroke-opacity 屬性定義筆觸顏色的透明度（合法的範圍是：0 - 1）
CSS opacity 屬性用於定義了元素的透明值 (範圍: 0 到 1)。
rx 和 ry 屬性可以使矩形產生圓角。

效果圖：

圓源碼

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle cx="100" cy="50" r="40" stroke="black"
  stroke-width="2" fill="red"/>
</svg>

代碼解析：
cx和cy屬性定義圓點的x和y座標。若是省略cx和cy，圓的中心會被設置爲(0, 0)
r屬性定義圓的半徑

效果圖：

橢圓源碼

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <ellipse cx="240" cy="100" rx="220" ry="30" style="fill:purple"/>
  <ellipse cx="220" cy="70" rx="190" ry="20" style="fill:lime"/>
  <ellipse cx="210" cy="45" rx="170" ry="15" style="fill:yellow"/>
</svg>

代碼解析：
CX屬性定義的橢圓中心的x座標
CY屬性定義的橢圓中心的y座標
RX屬性定義的水平半徑
RY屬性定義的垂直半徑

效果圖

直線源碼

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <line x1="0" y1="0" x2="200" y2="200"
  style="stroke:rgb(255,0,0);stroke-width:2"/>
</svg>

代碼解析：
x1 屬性在 x 軸定義線條的開始
y1 屬性在 y 軸定義線條的開始
x2 屬性在 x 軸定義線條的結束
y2 屬性在 y 軸定義線條的結束

效果圖

多邊形源碼

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polygon points="200,10 250,190 160,210"
  style="fill:lime;stroke:purple;stroke-width:1"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;" />
</svg>

代碼解析：
points 屬性定義多邊形每一個角的 x 和 y 座標
fill-rule：nonzero/evenodd

效果圖

總結

這些只是簡單的了實現了基本圖形的構建，SVG是使用XML文檔描述來繪圖。從這點來看：SVG更適合用來作動態交互，並且SVG繪圖很容易編輯，只須要增長或移除相應的元素就能夠了。同時SVG是基於矢量的，因此它可以很好的處理圖形大小的改變