SVG

出自六年制學程
在2014年10月1日 (三) 08:00由丁志仁對話 | 貢獻所做的修訂版本

跳轉到: 導覽搜尋

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 (線條寬度),fill (填充顏色),fill-opacity (填充不透明),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(綜合),語法說明