SVG

Scalable Vector Graphics(可縮放向量圖形)

• 特性
  1. XML語法。
  2. 二維向量圖形格式。
  3. 由W3C制定，是開放標準。

語法

自主練習站

宣告圖檔

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

標籤

• svg(成對)：svg 開始及結束。屬性有：xmlns(如http://www.w3.org/2000/svg)，version(如1.1)，width，height

向量圖形標籤

• 共同約定：
  1. 開始與結束合一。
  2. 長度如省略單位，預設單位為 px。
  3. px可以使用小數點。
  4. 以左上為座標原點。
  5. 座標描述先 x 後 y 。
  6. 通用屬性 stroke (線條顏色)，stroke-width (線條寬度)，stroke-opacity（筆觸顏色的透明度，合法的範圍是：0 - 1），fill (填充顏色)，fill-opacity (填充不透明，合法的範圍是：0 - 1)，stroke-miterlimit(斜接限制)，stroke-dasharray(虛線)，也可以放 style 中成為樣式之一。
  7. 選擇器 class,id 同 CSS 。

1. line(直線)，屬性有x1(第一點x座標)y1(第一點y座標)x2(第二點x座標)y2(第一點y座標)。
2. polyline(多點成線)，諸屬性如下：
   • points：多點，點與點用空白間開，同一點 x y 座標以逗點間開。
3. polygon(多邊形)，也可以取五點畫出一個星形。諸屬性如下：
   • points：多點，點與點用空白間開，同一點 x y 座標以逗點間開。
4. circle(圓)，諸屬性如下：
   • cx(圓心x座標)，cy(圓心y座標)，r(半徑)
5. rect(矩形)，諸屬性如下：
   • width(寬)，height(高)，省略起點則以原點為起點，x(起點x座標)，y(起點y座標)，rx(圓角x半徑)，ry(圓角y半徑)
6. ellipse(楕圓)，諸屬性如下：
   • cx(中心x座標)，cy(中心x座標)，rx(x軸半長)，ry(y軸半長)。
7. path(綜合)，語法說明