檢視 HTML到SVG 的原始碼

[[分類:資訊基礎應用]]
==XML 包含 HTML 和 SVG==
<table style='border:none;'>
<tr>
	<th rowspan=2 style='font-size:120%;font-weight:normal;border:none;'>XML</th>
	<th rowspan=2 style='font-size:120%;font-weight:normal;border:none;'>{</th>
	<td style='font-size:120%;border:none;'>HTML</td><td style='border:none;'>文件</td>
</tr>
<tr>
	<td style='font-size:120%;border:none;'>SVG</td><td style='border:none;'>向量繪圖</td>
</tr>
</table>
*XML，可延伸標記式語言(Extensible Markup Language)
*HTML，超文件標記語言(HyperText Markup Language)
*SVG，可縮放向量圖形(Scalable Vector Graphics) 

*style 屬性同時支援，HTML 與 SVG，只是樣式項目有相同，也有不同的。
*SVG的特性
*#XML語法，用書寫指示來畫圖。
*#二維向量圖形格式，不是點陣圖，無段縮放不會毛邊。
*#由W3C制定，是開放標準。
*[http://jendo.org/wiki1231/index.php?title=SVG 完整的參考資料]
*四次教學：
*#基本入門
*#進階一點點，加上使用繪圖軟體
===一、SVG在教學上應用的例子：===
#[http://jendo.org/wiki1231/index.php?title=能源與能量#.E8.83.BD.E6.BA.90.E8.88.87.E8.83.BD.E9.87.8F.E7.9A.84.E5.8D.80.E5.88.A5 轉動的齒輪]或[https://upload.wikimedia.org/wikipedia/commons/b/b3/GearRotate.svg 維基共享資源上的圖]：可以動
#[http://jendo.org/wiki1231/index.php?title=能源與能量#.E8.A8.8E.E8.AB.96.E4.BA.8C.EF.BC.9A.E7.BE.8E.E6.B4.B2.E4.BA.BA.E8.88.87.E6.AD.90.E4.BA.9E.E4.BA.BA 山脈的走向]或[https://upload.wikimedia.org/wikipedia/commons/c/c2/World-map(mountains).svg 維基共享資源上的圖]：可以在別人的基礎上添附
#[https://upload.wikimedia.org/wikipedia/commons/3/34/Africa_road5.svg 現代智人走出非洲的可能路線]：可以在別人的基礎上添附
#[https://upload.wikimedia.org/wikipedia/commons/1/17/日本史表解.svg 日本史簡表]：可以結合文字畫表
#[http://home.jendo.org/~丁禾/鄭氏治台/明鄭.svg 鄭氏大事紀]：可以圖解概念
#[https://upload.wikimedia.org/wikipedia/commons/c/c0/Animal_cell_structure_zhtw.svg 動物細胞]：可以將外國資源改成中文
#[https://commons.wikimedia.org/w/index.php?title=Special:ListFiles&user=丁志仁 丁丁在維基共享資源上的各種教學用圖]

===二、兩種寫法：===
*圖檔寫法：
<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>

===三、本日練習：===
====(一)畫一個小圓圈：====
<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='12' height='12'&gt;
  &lt;circle cx='6' cy='6' r='4' style='fill:#fff;stroke:blue;stroke-width:2;fill-opacity:0'/&gt;
&lt;/svg&gt;</pre>

====(二)畫熊臉(bearFace.svg)====
請參考：[http://jendo.org/~thisNasAdmin/Shinycircle.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/SVG/tracing.png 描圖畫畫]

<pre>&lt;?xml version='1.0' encoding='UTF-8' standalone='no'?&gt;
&lt;svg height='92' width='403' xmlns='http://www.w3.org/2000/svg' version='1.1'&gt;
&lt;style&gt;
text {font-family:Microsoft JhengHei Light,Microsoft JhengHei;font-size:34px;fill:white;}
&lt;/style&gt;
&lt;polygon style='fill:#0075B9;stroke:none;' points='◦◦◦,◦◦ ◦◦◦,◦◦ ◦◦◦,◦◦ ◦◦◦,◦◦ ◦◦◦,◦◦ ◦◦◦,◦◦ ◦◦◦,◦◦' /&gt;
&lt;rect x='0' y='0' rx='19' ry='19' width='◦◦◦' height='◦◦' style='stroke:none;fill:#0075B9;'/&gt;
&lt;text x='◦◦' y='◦◦'&gt;權本&lt;/text&gt;
&lt;rect x='◦◦◦' y='0' rx='19' ry='19' width='◦◦◦' height='◦◦' style='stroke:none;fill:#0075B9;'/&gt;
&lt;text x='◦◦◦' y='◦◦'&gt;人本&lt;/text&gt;
&lt;/svg&gt;</pre>

===四、更多練習：===
看原始碼，然後自己寫出來：
 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
 http://jendo.org/~thisNasAdmin/3petal3.svg
 http://jendo.org/~thisNasAdmin/3petal4.svg