"編輯培力/HTML到SVG" 修訂間的差異
(→XML 包含 HTML 和 SVG) |
(→一、SVG在教學上應用的例子:) |
||
行 24: | 行 24: | ||
#[http://home.jendo.org/~丁禾/鄭氏治台/明鄭.svg 鄭氏大事紀] | #[http://home.jendo.org/~丁禾/鄭氏治台/明鄭.svg 鄭氏大事紀] | ||
#[https://upload.wikimedia.org/wikipedia/commons/c/c0/Animal_cell_structure_zhtw.svg 動物細胞] | #[https://upload.wikimedia.org/wikipedia/commons/c/c0/Animal_cell_structure_zhtw.svg 動物細胞] | ||
+ | ===二、兩種寫法:=== | ||
+ | *圖檔寫法: | ||
+ | <pre><?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></pre> | ||
+ | *HTML寫法: | ||
+ | <pre><svg> | ||
+ | |||
+ | </svg></pre> | ||
青高的課前練習: | 青高的課前練習: |
於 2019年11月12日 (二) 14:52 的修訂
XML 包含 HTML 和 SVG
XML | { | HTML | 文件 |
---|---|---|---|
SVG | 向量繪圖 |
- XML,可延伸標記式語言(Extensible Markup Language)
- HTML,超文件標記語言(HyperText Markup Language)
- SVG,可縮放向量圖形(Scalable Vector Graphics)
style 屬性同時支援,HTML 與 SVG,只是樣式項目有相同,也有不同的。
一、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>
青高的課前練習:
參考頁 看原始碼,然後自己寫出來: http://jendo.org/~thisNasAdmin/base.svg http://jendo.org/~thisNasAdmin/polygon.svg http://jendo.org/~thisNasAdmin/text.svg http://jendo.org/~thisNasAdmin/Shinycircle.svg http://jendo.org/~thisNasAdmin/3petal1.svg http://jendo.org/~thisNasAdmin/3petal2.svg
編輯培力/HTML到SVG
<link href="css/from.css" rel="stylesheet" type="text/css">
隨堂練習
建立一個CSS檔,給另外三個HTML使用