丁志仁：/* 四、更多練習： */

2021-08-03T07:35:50Z

四、更多練習：

丁志仁：/* (四)畫圓角矩形和箭頭： */

2021-03-29T03:05:05Z

(四)畫圓角矩形和箭頭：

李昀蓁：/* XML 包含 HTML 和 SVG */

2021-03-29T01:20:55Z

XML 包含 HTML 和 SVG

丁志仁於 2021年3月28日 (日) 23:21

2021-03-28T23:21:29Z

丁志仁：建立內容為「{{nlWiki::HTML到SVG}}」的新頁面

2021-03-28T23:20:12Z

建立內容為「{{nlWiki::HTML到SVG}}」的新頁面

新頁面

←上個修訂		於 2021年8月3日 (二) 07:35 的修訂
行 109：		行 109：
	http://jendo.org/~thisNasAdmin/3petal1.svg		http://jendo.org/~thisNasAdmin/3petal1.svg
	http://jendo.org/~thisNasAdmin/3petal2.svg		http://jendo.org/~thisNasAdmin/3petal2.svg
		+	http://jendo.org/~thisNasAdmin/3petal3.svg
		+	http://jendo.org/~thisNasAdmin/3petal4.svg

@@ 行 88： / 行 88： @@
 ====(四)畫圓角矩形和箭頭：====
-[http://jendo.org/SVG/tracing.php 描圖畫畫]
+[http://jendo.org/SVG/tracing.png 描圖畫畫]
 <pre>&lt;?xml version='1.0' encoding='UTF-8' standalone='no'?&gt;

@@ 行 4： / 行 4： @@
 <tr>
 	<th rowspan=2 style='font-size:120%;font-weight:normal;border:none;'>XML</th>
-	<th rowspan=2 style='font-size:220%;font-weight:normal;border:none;'>{</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>

←上個修訂		於 2021年3月28日 (日) 23:21 的修訂
行 1：		行 1：
−	{{~~nlWiki~~::~~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:220%;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><?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>
		+
		+	===三、本日練習：===
		+	====(一)畫一個小圓圈：====
		+	<pre><?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></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.php 描圖畫畫]
		+
		+	<pre><?xml version='1.0' encoding='UTF-8' standalone='no'?>
		+	<svg height='92' width='403' xmlns='http://www.w3.org/2000/svg' version='1.1'>
		+	<style>
		+	text {font-family:Microsoft JhengHei Light,Microsoft JhengHei;font-size:34px;fill:white;}
		+	</style>
		+	<polygon style='fill:#0075B9;stroke:none;' points='◦◦◦,◦◦ ◦◦◦,◦◦ ◦◦◦,◦◦ ◦◦◦,◦◦ ◦◦◦,◦◦ ◦◦◦,◦◦ ◦◦◦,◦◦' />
		+	<rect x='0' y='0' rx='19' ry='19' width='◦◦◦' height='◦◦' style='stroke:none;fill:#0075B9;'/>
		+	<text x='◦◦' y='◦◦'>權本</text>
		+	<rect x='◦◦◦' y='0' rx='19' ry='19' width='◦◦◦' height='◦◦' style='stroke:none;fill:#0075B9;'/>
		+	<text x='◦◦◦' y='◦◦'>人本</text>
		+	</svg></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

HTML到SVG - 修訂歷史

丁志仁：/* 四、更多練習： */

丁志仁：/* (四)畫圓角矩形和箭頭： */

李昀蓁：/* XML 包含 HTML 和 SVG */

丁志仁 於 2021年3月28日 (日) 23:21

丁志仁：建立內容為「{{nlWiki::HTML到SVG}}」的新頁面

丁志仁於 2021年3月28日 (日) 23:21