WEB ◆ TS Library ◆ 熱衷分享 ◆ 享受教學相長 ◆ 無形的網絡擁有熱情溫度的傳遞

5-2. 認識 SVG

看看影像地圖的設計

  1. 傳統設計方法: 範例TS範例w3schools介紹map介紹area、 無法配合RWD。
  2. HTML5 SVG的方法: 範例:認識原住民範例:英文文法介紹HTML5 SVG,
    除了直接寫程式的方法之外, 可以運用Illustrator繪製向量圖形, 再選擇「檔案 > 轉存為 > SVG」,
    也可以使用 Inkscape 免費向量編輯軟體,
    也可以直接運用SVG線上編輯器
  3. HTML5 SVG檔案的使用:
    (1) 使用 <img .....> 將SVG檔案以插入影像的方式來呈現。
    (2) 將SVG檔案的原始碼拷貝到網頁上, 再使用 JS 程式來控制。
  4. 運用線上外掛資源的方法: 範例:RD15課綱介紹, 線上外掛資源:Pictogon

 

 

go TOP