編輯培力HTML到SVG

壹、XML 包含 HTML 和 SVG

XML { HTML文件
SVG向量繪圖

一、SVG在教學上應用的例子:

  1. 轉動的齒輪維基共享資源上的圖:可以動
  2. 山脈的走向維基共享資源上的圖:可以在別人的基礎上添附
  3. 現代智人走出非洲的可能路線:可以在別人的基礎上添附
  4. 日本史簡表:可以結合文字畫表
  5. 鄭氏大事紀:可以圖解概念
  6. 動物細胞:可以將外國資源改成中文
  7. 丁丁在維基共享資源上的各種教學用圖

二、兩種寫法:

<?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>
<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)

請參考:熊臉

(三)要領說明

四、更多練習:

看原始碼,然後自己寫出來:

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

貳、回到 HTML

CSS:串接樣式表(Cascading Style Sheets)

樣式使用的三個層次:

  1. 以 style 屬性,在「行內撰寫」
  2. 調到全篇 HTML 最前面,設定 style 定義段落,供全文引用
  3. 寫成一個檔案,讓多篇 HTML 檔引用。引用的語法:<link href='被引用的CSS檔' rel='stylesheet' type='text/css'/>

隨堂練習

建立一個CSS檔,給兩個HTML使用