HTML到SVG
跳至導覽
跳至搜尋
目錄
XML 包含 HTML 和 SVG
| XML | { | HTML | 文件 |
|---|---|---|---|
| SVG | 向量繪圖 |
- XML，可延伸標記式語言(Extensible Markup Language)
- HTML，超文件標記語言(HyperText Markup Language)
- SVG，可縮放向量圖形(Scalable Vector Graphics)
- style 屬性同時支援，HTML 與 SVG，只是樣式項目有相同，也有不同的。
- SVG的特性
- XML語法，用書寫指示來畫圖。
- 二維向量圖形格式，不是點陣圖，無段縮放不會毛邊。
- 由W3C制定，是開放標準。
- 完整的參考資料
- 四次教學：
- 基本入門
- 進階一點點，加上使用繪圖軟體
一、SVG在教學上應用的例子：
- 轉動的齒輪或維基共享資源上的圖：可以動
- 山脈的走向或維基共享資源上的圖：可以在別人的基礎上添附
- 現代智人走出非洲的可能路線：可以在別人的基礎上添附
- 日本史簡表：可以結合文字畫表
- 鄭氏大事紀：可以圖解概念
- 動物細胞：可以將外國資源改成中文
- 丁丁在維基共享資源上的各種教學用圖
二、兩種寫法：
- 圖檔寫法：
<?xml version='1.0' encoding='UTF-8' standalone='no'?> <svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='130' height='90'> </svg>
- HTML寫法：
<svg> </svg>
三、本日練習：
(一)畫一個小圓圈：
<?xml version='1.0' encoding='UTF-8' standalone='no'?> <svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='12' height='12'> <circle cx='6' cy='6' r='4' style='fill:#fff;stroke:blue;stroke-width:2;fill-opacity:0'/> </svg>
(二)畫熊臉(bearFace.svg)
請參考：熊臉
(三)要領說明
- 共同約定：
- 開始與結束合一。
- 長度如省略單位，預設單位為 px。
- px可以使用小數點。
- 以左上為座標原點。
- 座標描述先 x 後 y 。
- stlye屬性中關於線條之樣式，也可以作為繪圖：
- stroke (線條顏色)，
- stroke-width (線條寬度)，
- stroke-opacity (線條顏色的透明度，合法的範圍是：0 - 1，0最透明，預設1)，
- stroke-linecap (線條端點形狀，預設butt端點切齊、round以端點為圓心線寬為直徑畫圓、square以端點為中心線寬為邊長畫方形)，
- stroke-linejoin (線條轉彎處樣式，預設miter尖角、round圓角、bevel斜角)，
- stroke-miterlimit (尖角內外距/線寬的最大值，不設限則尖角可以拉長至無限長，預設為 4 倍)，
- stroke-dasharray (預設none，代表實線。若為數字其值為一陣列，陣列值為線段中實線段長度與虛線段長度的交錯數字，通常是兩個數字一組，如果是奇數，則最後面自動加補第一個數字)
- stlye屬性中關於面之樣式：
- fill (填充顏色)，
- fill-opacity (填充不透明，合法的範圍是：0 - 1，0最透明，預設1)。
- fill-rule (polygon等標籤有時會將內部分割成不同的區域，填色方式，預設nonzero全部同色、evenodd相鄰區域內部填色與外部填色交互填充、inherit繼承)
- 選擇器 class,id 同 CSS 。
- 常見的簡易繪圖標籤：
- line(直線)，屬性有x1(第一點x座標)y1(第一點y座標)x2(第二點x座標)y2(第二點y座標)。
- polyline(多點成線)，諸屬性如下：
- points：多點，點與點用空白間開，同一點 x y 座標以逗點間開。
- polygon(多邊形)，也可以取五點畫出一個星形。諸屬性如下：
- points：多點，點與點用空白間開，同一點 x y 座標以逗點間開。
- circle(圓)，諸屬性如下：
- cx(圓心x座標)，cy(圓心y座標)，r(半徑)
- rect(矩形)，諸屬性如下：
- width(寬)，height(高)，省略起點則以原點為起點，x(起點x座標)，y(起點y座標)，rx(圓角x半徑)，ry(圓角y半徑)
- ellipse(楕圓)，諸屬性如下：
- cx(中心x座標)，cy(中心x座標)，rx(x軸半長)，ry(y軸半長)。
四、更多練習：
看原始碼，然後自己寫出來：
http://jendo.org/~thisNasAdmin/polygon.svg http://jendo.org/~thisNasAdmin/text.svg http://jendo.org/~thisNasAdmin/3petal0.svg http://jendo.org/~thisNasAdmin/3petal1.svg http://jendo.org/~thisNasAdmin/3petal2.svg
.svg){kind=link}
