"編輯培力/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>&lt;?xml version='1.0' encoding='UTF-8' standalone='no'?&gt;
 +
&lt;svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='130' height='90'&gt;
  
 +
&lt;/svg&gt;</pre>
 +
*HTML寫法:
 +
<pre>&lt;svg&gt;
 +
 +
&lt;/svg&gt;</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在教學上應用的例子:

  1. 轉動的齒輪
  2. 山脈的走向
  3. 現代智人走出非洲的可能路線
  4. 日本史
  5. 鄭氏大事紀
  6. 動物細胞

二、兩種寫法:

  • 圖檔寫法:
<?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使用