資訊基礎應用

概述

一、課程目標

培養會使用 wiki,html,GIS,SVG 做事的人
協助全民科學平台的「動手做科學」活動上架

二、選修說明

修課同學：蕭卉均、李彥廷、張又懿(妹)、張鈞祺(兄)、黃柏實(子)、陳洹霈(母)、盧星瑜、紀詠恩、谌卫军(遠距學習)、吳文瀚(未到課)、吳亞蓁(未到課)
地點：新埔國中信義樓 517
時間：週二早上 9:15~12:00
費用：無
選課優先順位：有參與全民科學平台數位編輯意願者優先
教師：丁志仁
助教：柯智懷
上課規範：學員須自行攜帶筆電上課。上課注意聽，作業按時交。
成績以作業為主，通過者得 3 學分

三、課程內容組成

雲端空間使用
維基共享資源利用
wiki,html 語法
點陣圖處理
向量圖處理(SVG)
GIS

四、重要參考資料

英文	指令	中文
hyper	html	超
text	html	文字，文件
markup	html	標記
language	html	語言
head	head	頭
title	title	標題
body	body	身體
anchor	a	錨，超連結
image	img	圖
paragraph	p	段
break	br	斷
space	space	空間，空格
horizontal	hr	水平
rule	hr	線
table	table	表
row	tr	列
diamond	td	格
order	ol	有次序的
unorder	ul	沒有次序的
list	ol;ul;li	列表
item	li	項目
style	style	樣式(修飾一個超文件)
span	span	文字小片段
division	div	區塊
preserve	pre	保留原有斷行及排列之式
form	form	表單
source	src	來源
reference	href	參考
target	target	目標
blank	_blank	空白
width	width	寬度
height	height	高度
border	border	邊界，邊框。
font	font	字體
family	family	字族，系
size	size	大小
weight	weight	輕重
align	align	對齊
color	color	顏色
collapse	collapse	崩塌
html	html	超文件
content	content	內容
meta	meta	對自身的描述
http	http-equiv	超文件傳輸協定
equiv	http-equiv	約當
Character	charset	字元
set	charset	集合
alternative	alt	替代的
identy	id	惟一的身份表示法
background	background	背景
back	background	背
ground	background	地面、引申為基礎的
none	none	沒有
margin	margin	邊
padding	padding	填充，框到框內圖文的距離
pad	pad	墊、便箋本
clear	clear	清乾淨
position	position	位置
absolute	absolute	絕對
relative	relative	相對的
index	index	指標
left	left	左
center	center	中
right	right	右
top	top	上
middle	middle	中
bottom	bottom	下(底)
button	button	按鈕、按鍵
class	class	類別
URL	URL	網路資源的位置
script	script	腳本

各次上課內容

2017.9.5

工具與環境，看見伺服器與VDSL
1. 區網 wifi ：jendod與jendoa，密碼現場說明
2. 伺服器 DS216，網址 6years.jendo.org
3. 調整 C:\Windows\System32\drivers\etc\hosts，新增一行「192.168.4.2 6years.jendo.org」，下課前註解掉
4. 瀏覽器：firefox 優先於 chrome ，避免使用 IE
5. filezilla
  - 打開 filezilla ，並新增一個站台叫「DS216+(共用)」
  - 上述站台的設為：
    1. 主機:6years.jendo.org；
    2. 協定:SFTP
    3. 使用者:共用
    4. 密碼:
    5. 字碼集:UTF-8
  - 連線，然後到「/home/www」
  - 關閉 filezilla 。
  - 建自己帳號的連線
6. 可用的文字編輯器，如 emeditor
7. 連結 filezilla 和慣用的文字編輯器：「編輯/設定/檔案編輯」，選用「使用自訂編輯器」與「總是使用預設的編輯器」，並指定編輯器的路徑。

2017.9.12

建造每一個人的筆記頁：「資訊基礎應用/○○○」，要登入才有辦法編寫
1. 其中須有一段，列出已記得的單字，老師沒列到的單字要跟丁丁講
第一份作業：本班通訊錄
第二份作業：HTML 與 wiki 語法對照表
第三份作業：個人履歷，參考 http://6years.jendo.org/~共用/丁禾履歷表.doc
表格邊框美化的範例一

<table style='border:1px solid black;border-collapse:collapse;'>
<tr><th style='border:1px solid black;border-collapse:collapse;'>一</th><td style='border:1px solid black;border-collapse:collapse;'>三</td></tr>
<tr><th style='border:1px solid black;border-collapse:collapse;'>二</th><td style='border:1px solid black;border-collapse:collapse;'>四</td></tr>
</table>

表格邊框美化的範例二

<style>
.nicetable {border:1px solid black;border-collapse:collapse;}
</style>
<table class='nicetable'>
<tr><th class='nicetable'>一</th><td class='nicetable'>三</td></tr>
<tr><th class='nicetable'>二</th><td class='nicetable'>四</td></tr>
</table>

2017.9.19

交代樣式(外觀)的三種方式：
1. 行內：
2. 通篇：
3. 跨多篇：
```
<link rel='stylesheet' type='text/css' href='./pa.css'  />
```
樣式作用的三種對象：
1. 標籤：
2. 類別(class)：
3. 指定專一的標籤(id)：
多條件交代樣式的作用對象：

2017.9.26

筆記中建立 wiki 與 HTML 對照表
1. 等號
2. 星號
3. 井號
4. 中括號(連結)
5. 雙層中括號(圖照)
6. 文字的拉斜與加粗
7. 冒號及分號
8. 水平線
角括號的寫法：
1. <：<
2. >：>
3. 表格的示例
Mediawiki_簡介
1. 柏納李發明 html 及 http 。
2. 由HTML速記到共筆再到維基百科。
3. 分享式合作與共享經濟
CC授權
Wiki_基本語法與條目發展
取用圖照：
1. 找到 google 翻譯，找出食人魚的英文。
2. 由 google 找到「維資基共享源」的網址「commons.wikimedia.org」
3. 到「維資基共享源」在蒐尋框蒐「File:Piranha」
4. 開一張食人魚的圖，了解頁中各種尺寸的連結，並選擇想要的尺寸。
5. 用雙層中括號將圖照帶入 wiki 頁
6. 用 img 標籤帶入 wiki 頁
7. 比照兩的速度有何不同
8. 找到食人魚的分類「Category:Pygocentrus nattereri」
9. 由 google 的照片蒐尋，使用「工具/使用權限」來找到可以用的圖。
10. 蒐「File:Piranha svg」，並看 svg 檔無段放大不毛邊的效果。
11. 看 svg 圖檔的原始碼，知道它是由指示組成。
圖檔格式(點陣與向量)，SVG特性，著作權保護期的長短。
1. 由蒐「file:animal cell svg」說明 svg 檔可輕易改作。但仍要尊重原作者的貢獻。

2017.10.03

下載 http://6years.jendo.org/~共用/丁禾履歷表.doc
以 word 打開
1. 找到「尺規」開關並打開
2. 取消「檔案/選項/進階/顯示字元寬度單位」核取方塊
3. 找出長寬
4. 每 inch 2.54公分，72pt
開「履歷表.html」
頁
1. 在樣式定義中以「@page 某值{…}」設定 css
2. 在顯示區中以「<div style='page:某值;'>」
3. 可用的定義：
  
  size:寬長;
  
  margin:天右地左
  
  mso-page-orientation:landscape 橫放
  
  mso-header-margin:頁首大小
  
  mso-footer-margin:頁尾大小
跳頁的用法：「<br style='page-break-before:always' />」
表格寬度用「style='width:xxx'」表達寬度，xxx可以用百分比、公分、pt、無單位數字，無單位數字由「控制台/顯示器/設定/一般/字型大小」控制，如96dpi(100%)則96個寬度單位為1英吋；120dpi(125%)則120個寬度單位為1英吋。
表格高度在 tr 中設，
1. <tr style='height:數字'/>時無單位數字、cm、pt三種單位均有效，百分比無效。
2. <tr height=數字/>只對無單位數字有效。
圖的寬度：
1. style='width:數字;height:數字;' 對無單位、百分比、pt、cm 皆無效
2. width=數字 height=數字對百分比、pt、cm 皆無效，對無單位有效，但不可使用auto。無單位長度定義同上段。

2017.10.17

去看 http://6years.jendo.org/~共用/履歷表.html
用 filezilla 下載回來
以 word 打開，看完之後，關閉此檔
用 emeditor 打開下載檔案
解說 xml (Extensible Markup Language)
解說 xmlns (xml namespace)
看HTML/適應word
仿做自己的履歷表

2017.10.24

Scalable Vector Graphics(可縮放向量圖形)
特性
1. XML語法。
2. 二維向量圖形格式。
3. 由W3C制定，是開放標準。
看原始碼
1. SVG空架子：http://jendo.org/~admin/base.svg
2. 多邊形：http://jendo.org/~admin/polygon.svg
3. 線性漸層：http://jendo.org/~admin/linearGradient.svg
4. 放射漸層：
5. 文字：http://jendo.org/~admin/text.svg
6. 複製：http://jendo.org/~洪凌煙/flower3.svg
在教學上應用的例子：
圖檔寫法：

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

畫一個小圓圈：

<?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)，如：施馨檸畫的熊臉
共同約定：
1. 開始與結束合一。
2. 長度如省略單位，預設單位為 px。
3. px可以使用小數點。
4. 以左上為座標原點。
5. 座標描述先 x 後 y 。
6. 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，代表實線。若為數字其值為一陣列，陣列值為線段中實線段長度與虛線段長度的交錯數字，通常是兩個數字一組，如果是奇數，則最後面自動加補第一個數字)
7. stlye屬性中關於面之樣式：
  - fill (填充顏色)，
  - fill-opacity (填充不透明，合法的範圍是：0 - 1，0最透明，預設1)。
  - fill-rule (polygon等標籤有時會將內部分割成不同的區域，填色方式，預設nonzero全部同色、evenodd相鄰區域內部填色與外部填色交互填充、inherit繼承)
8. 選擇器 class,id 同 CSS 。
常見的簡易繪圖標籤：
1. line(直線)，屬性有x1(第一點x座標)y1(第一點y座標)x2(第二點x座標)y2(第二點y座標)。
2. polyline(多點成線)，諸屬性如下：
  - points：多點，點與點用空白間開，同一點 x y 座標以逗點間開。
3. polygon(多邊形)，也可以取五點畫出一個星形。諸屬性如下：
  - points：多點，點與點用空白間開，同一點 x y 座標以逗點間開。
4. circle(圓)，諸屬性如下：
  - cx(圓心x座標)，cy(圓心y座標)，r(半徑)
5. rect(矩形)，諸屬性如下：
  - width(寬)，height(高)，省略起點則以原點為起點，x(起點x座標)，y(起點y座標)，rx(圓角x半徑)，ry(圓角y半徑)
6. ellipse(楕圓)，諸屬性如下：
  - cx(中心x座標)，cy(中心x座標)，rx(x軸半長)，ry(y軸半長)。

2017.10.31

因老師父親骨折而停課

2017.11.7

(一)畫文字

範例一(text.svg)原始碼：

<?xml version='1.0' encoding='UTF-8' standalone='no'?>
<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='130' height='90'>
	<text x='40' y='50' style='font-family:kaiti;fill:#666666'>羅馬</text>
</svg>

在「text」標籤開始與結束之間夾字，可用中英文。而使用「屬性」來規定文字的表現，所有的屬性都可以改用樣式來表達。
可用中文字形：

1. Monospace：等寬字型(非調和字)
2. Sans：無襯線體(黑體，哥德體)
3. Serif：襯線體(筆畫末端的裝飾細節，白體，羅馬體)
4. KaiTi：楷體
5. MingLiU：明體
6. PMingLiU：明體
7. MingLiU_HKSCS：明體
8. FangSong：仿宋
9. NSimSun：新宋
10. SimHei：新黑
11. Microsoft YaHei：微軟雅黑體
12. Microsoft JhengHei：微軟正黑體
13. Arial Unicode MS：微軟 Arial 體
14. DFBiaoKaiShu-B5：華康楷書體
15. DFHKStdKai-B5：華康標楷體
16. DFHKStdSong-B5：華康標宋體
17. DFBiaoSong-B5：華康宋體
18. DFHeiUBlod-B5：華康特粗黑體
19. DFHeiBlod-B5：華康粗黑體
20. DFHeiMedium-B5：華康中黑體
21. DFHeiLight-B5：華康細黑體
22. DFBiaoKaiShu-B5：華康楷書體
23. …：華康眾字體，族繁不及備載
24. Segoe UI：微軟 Segoe UI 字形
25. Tahoma：微軟 Tahoma 字形
26. Meiruo：日文明瞭體
27. Meiruo UI：日文明瞭體
28. MS Gothic：微軟日文哥德體
29. MS Mincho：微軟日文明朝體
30. MS PGothic：微軟日文哥德體
31. MS PMincho：微軟日文明朝體
32. MS UI Gothic：微軟日文哥德體
33. MS Mincho：微軟日文明朝體

屬性 x 和 y 標示字的起點：值可為'10,20,30,40'，表示每個字的 x 或 y 座標。
屬性 dx 和 dy 基於前一個字的位置去做變化：值可為'10,20,30,40'，字的距離一個比一個更遠。
屬性 fill 控制填入字的顏色，預設黑色
屬性 stroke 控制字描框的顏色，預設 none
屬性 rotate='30' 順時鐘轉30°。rotate='30,60,90,120,150,180,210'指定每個字的轉動角度。
用 style 控制字體、字形、尺寸，但顏色是用 fill 不是用 color 。

其他進階屬性：

text-decoration 屬性，有以下諸值：
1. underline：底線
2. overline：頂線
3. line-through：刪除線
4. blink：閃爍
5. none：無，預設值
6. inherit：繼承
textLength 及 lengthAdjust ，前者設定字串的總長度，後者設定要怎麼湊到這個長度，有兩個值：
1. lengthAdjust='spacing' 靠調整字距來湊足字串的長度。
2. lengthAdjust='spacingAndGlyphs' 靠把字拉胖來湊足字串的長度。
子標籤 TSPAN：就是 span ，其屬性值幾乎和 text 一模一樣，也是 x、y、dx、dy、rotate、textLength。
子標籤 textPath：屬性 xlink:href='#path的id' ；屬性 startOffset='xx%' 從 path 的百分之多少開始跑字。path 在 def 中定義，含路徑、填充色、畫框色。
屬性 style 控制諸樣式：
1. font-size:
2. writing-mode:tb;直寫，預設橫寫

作圖練習一：

(二)位移、旋轉、縮放

範例二(transform.svg)原始碼：

<?xml version='1.0' encoding='UTF-8' standalone='no'?>
<svg height='100' width='112.5' xmlns='http://www.w3.org/2000/svg' version='1.1'>
	<line x1='0' y1='50' x2='113' y2='50' style='stroke:#0f0;stroke-dasharray:2 2;stroke-width:0.5pt;' />
	<polygon points='0,0 5,-5 -12.5,0 5,5' style='stroke:#000;fill:none;stroke-width:1pt;' transform='translate(25,50)'/>
	<polygon points='0,0 5,-5 -12.5,0 5,5' style='stroke:#00f;fill:none;stroke-width:1pt;' transform='rotate(90) translate(50,-50)'/>
	<polygon points='0,0 5,-5 -12.5,0 5,5' style='stroke:#00f;fill:none;stroke-width:1pt;' transform='translate(75,50) rotate(90)'/>
	<polygon points='0,0 5,-5 -12.5,0 5,5' style='stroke:#f00;fill:none;stroke-width:1pt;' transform='translate(100,50) rotate(180) scale(0.8)'/>
</svg>

注意：
1. 四個圖形都圍繞凹尖處旋轉，此點是原始圖形的(0,0)點。因為 rotate 都只交代角度，沒有交代繞著哪個中心旋轉，所以就繞預設值(0,0)旋轉。
2. 如果混合兩種以上操作，請先平移、再旋轉、再縮放。請看第二個箭頭(藍色)，先旋轉再平移，結果他的平移座標，是旋轉過後的 x 軸和 y 軸，不再是預設的 x 軸和 y 軸。
相關屬性說明：
1. 平移變換(translate)：transform="translate(x,y)"，即新坐標系的原點在原坐標系的(x,y)處。坐標軸的方向不變。
2. 旋轉變換(rotate)：transform="rotate(angle cx,cy)"。angle代表旋轉角度，預設單位是「度」，順時針為正，逆時針為負。(cx,cy)是旋轉中心所在的坐標。若省略旋轉中心坐標，則預設值是(0,0)。
3. 伸縮變換(scale)：transform="scale(sx,sy)"，sx,sy分別代表x軸方向和y方向拉伸或縮小的比例因子。拉伸：大於1；縮小：小於1。若省略sy，即sy=sx，作等比例縮放。
作圖練習二(3petal0.svg)(三花瓣)：

<?xml version='1.0' encoding='UTF-8' standalone='no'?>
<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='600' height='600'>
<g>
<polygon points='100,100 120,20 100,0 80,20' style='stroke:none;stroke-width:0;fill:yellow;'/>
<polygon points='100,100 120,20 100,0 80,20' style='stroke:none;stroke-width:0;fill:yellow;' transform='rotate(45 100 100)'/>
<polygon points='100,100 120,20 100,0 80,20' style='stroke:none;stroke-width:0;fill:yellow;' transform='rotate(90 100 100)'/>
</g>
</svg>

綁成群組(3petal1.svg)：

<?xml version='1.0' encoding='UTF-8' standalone='no'?>
<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='600' height='600'>
<g transform='translate(300,48) rotate(30) scale(1.7)'>
<polygon points='100,100 120,20 100,0 80,20' style='stroke:none;stroke-width:0;fill:yellow;'/>
<polygon points='100,100 120,20 100,0 80,20' style='stroke:none;stroke-width:0;fill:yellow;' transform='rotate(45 100 100)'/>
<polygon points='100,100 120,20 100,0 80,20' style='stroke:none;stroke-width:0;fill:yellow;' transform='rotate(90 100 100)'/>
</g>
</svg>

墊一張圖(3petal2.svg)：

<?xml version='1.0' encoding='UTF-8' standalone='no'?>
<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='600' height='600'>
<image xlink:href='http://jendo.org/~admin/Image15.png' x='0' y='0' width='600' height='600'/>
<g>
<polygon points='100,100 120,20 100,0 80,20' style='stroke:none;stroke-width:0;fill:yellow;'/>
<polygon points='100,100 120,20 100,0 80,20' style='stroke:none;stroke-width:0;fill:yellow;' transform='rotate(45 100 100)'/>
<polygon points='100,100 120,20 100,0 80,20' style='stroke:none;stroke-width:0;fill:yellow;' transform='rotate(90 100 100)'/>
</g>
</svg>

(三)定義一次，引用多次

範例三(uses.svg)原始碼：

<?xml version='1.0' encoding='UTF-8' standalone='no'?>
<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='201' height='201'>
<defs>
	<polygon id='petal' points='100,100 120,20 100,0 80,20' style='stroke:none;stroke-width:0;fill:yellow;'/>
</defs>
<g>
<use xlink:href='#petal'/>
<use xlink:href='#petal' transform='rotate(45 100 100)'/>
<use xlink:href='#petal' transform='rotate(90 100 100)'/>
<use xlink:href='#petal' transform='rotate(135 100 100)'/>
<use xlink:href='#petal' transform='rotate(180 100 100)'/>
<use xlink:href='#petal' transform='rotate(225 100 100)'/>
<use xlink:href='#petal' transform='rotate(270 100 100)'/>
<use xlink:href='#petal' transform='rotate(315 100 100)'/>
</g>
</svg>

步驟：
1. 先添加 svg 標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，其中才有 href 屬性的定義
2. 在 defs 段落中定義圖形，並賦予 id
3. 用 <use xlink:href='#某id'/> 來引用既有的定義
作圖練習三：
參考：

2017.11.14

漸層和濾鏡如果取中文名稱，瀏覽器還認得，但 Inkscape 和線上轉檔軟體就會不認得。

(四)線性漸層

範例四(linearGradient.svg)原始碼：

<?xml version='1.0' encoding='UTF-8' standalone='no'?>
<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='130' height='90'>
<defs>
	<linearGradient id='LG' x1='30%' y1='0%' x2='70%' y2='0%'>
		<stop offset='0%' style='stop-color:#ffff00;stop-opacity:1' />
		<stop offset='100%' style='stop-color:#ff0000;stop-opacity:1' />
	</linearGradient>
</defs>
<rect width='130' height='90' x='0' y='0' stroke='red' fill='url(#LG)' />
</svg>

步驟：
1. 不用添加 svg 標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，不會用到 href 屬性
2. 在 defs 段落中定義漸層，並賦予 id
3. 用 fill='url(#某id)' 屬性來引用既有的漸層定義
linearGradient 線性漸層定義語法說明:
1. 漸層標籤中的 100%，指的是整個圖形
2. 其中的 id 屬性定出漸層名稱
3. 由 x1,y1,x2,y2 四個屬性決定漸層範圍，以及水平，垂直或角形漸層，四個屬性都以百分比表示：
  - x1,y1,x2,y2 屬性決定漸層開始和結束位置，x1,x2以圖形的寬度為準，y1,y2以圖形的高度為準
  - 當 y1 和 y2 相等，而 x1 和 x2 不同時，可創建水平漸層
  - 當 x1 和 x2 相等，而 y1 和 y2 不同時，可創建垂直漸層
  - 當 x1 和 x2 不同，且 y1 和 y2 不同時，可創建角形漸層
作圖練習四-1：做h.svg、v.svg兩個檔案，在h.svg裡做長寬各100px，由左到右、黃到紅的漸層；在v.svg裡長寬各100px，由上到下、藍到綠的漸層。
作圖練習四-2：參考箭頭(arrow.svg)的原始碼，做一個arrowUp.svg檔，做出寬:90、高:130，由上到下，白到紫色漸層的⇧。 arrow.svg 的原始碼如下：

<?xml version='1.0' encoding='UTF-8' standalone='no'?>
<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='130' height='90'>
	<polygon points='0,30 100,30 100,0 130,45 100,90 100,60 0,60' stroke='black' fill='none' />
</svg>

(五)放射漸層

三個範例及其原始碼：

ball1.svg

<?xml version='1.0' encoding='UTF-8' standalone='no'?>
<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='150' height='150'>
<defs>
	<radialGradient id='r1' cx='30%' cy='30%' r='70%'>
		<stop offset='0%' stop-color='#fff'></stop>
		<stop offset='30%' stop-color='#9f9'></stop>
		<stop offset='70%' stop-color='#373'></stop>
		<stop offset='100%' stop-color='#000'></stop>
	</radialGradient>
</defs>
<circle cx='75' cy='75' r='75' fill='url(#r1)'/>
</svg>

ball2.svg

<?xml version='1.0' encoding='UTF-8' standalone='no'?>
<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='150' height='150'>
<defs>
	<radialGradient id='r2' cx='50%' cy='50%' r='50%'>
		<stop offset='0%' stop-color='#fff'></stop>
		<stop offset='30%' stop-color='#9f9'></stop>
		<stop offset='70%' stop-color='#373'></stop>
		<stop offset='100%' stop-color='#000'></stop>
	</radialGradient>
</defs>
<circle cx='75' cy='75' r='75' fill='url(#r2)'/>
</svg>

ball3.svg

<?xml version='1.0' encoding='UTF-8' standalone='no'?>
<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='150' height='150'>
<defs>
	<radialGradient id='r3' cx='50%' cy='50%' r='50%' fx='50%' fy='100%'>
		<stop offset='0%' stop-color='#fff' opacity='0'></stop>
		<stop offset='30%' stop-color='#9f9' opacity='0'></stop>
		<stop offset='70%' stop-color='#373' opacity='0'></stop>
		<stop offset='100%' stop-color='#000' opacity='0'></stop>
	</radialGradient>
</defs>
<circle cx='75' cy='75' r='75' fill='url(#r3)'/>
</svg>

radialGradient 放設漸層定義語法說明:
1. 漸層範圍：由 cx,cy,r 三個屬性決定，三個屬性都以百分比表示，漸層範圍是一個圓或橢圓
  - cx 表示範圍中心在圖寬百分之幾的位置
  - cy 表示範圍中心在圖高百分之幾的位置
  - r 如果圖形寬、高相等則範圍為圓，r代表範圍圓半俓除以圖形寬或高；如果圖形寬、高不相等則範圍為橢圓，r代表範圍橢圓的長短軸半長除以圖形寬或高；注意：r為50%，範圍圓直徑恰等於圖的寬或高。
2. 設色中心：由 fx,fy 兩個屬性決定的位置，就是設色為 0% 的地方，兩個屬性都以百分比表示
  - fx表示設色中心在圖寬百分之幾的位置
  - fy表示設色中心在圖高百分之幾的位置
  - 設色 100% 的地方在範圍圓或範圍橢圓的圓周上
3. 設色標籤 stop，漸層標籤包住數個 stop 標籤，每種顏色通過一個 stop 標籤來規定。
  - offset屬性用來定義漸層的開始和結束位置，其 100% 是指整個漸層範圍。
  - stop-color 屬性用來定義顏色，也可以做為 style 的樣式。
  - stop-opacity 屬性決定透明度，也可以做為 style 的樣式。
4. 以 ball3.svg 為例：漸層範圍為整個圓，因為 cx,cy,r 都是 50% ，而設色中心在中間下方，因為 fx='50%' fy='100%' ，此處是 stop 設為 0% 的顏色(白色)，而範圍圓週邊是 stop 設為 100% 的顏色(黑色)
作圖練習五：以 SVG 放射漸層作出此圖：，圓半徑 75px 。

(六)柔焦濾鏡

範例六(sun.svg)原始碼：

<?xml version='1.0' encoding='UTF-8' standalone='no'?>
<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='100%' height='100%'>
<defs>
	<radialGradient id='r4' cx='50%' cy='50%' r='50%' >
		<stop style='stop-color:#fff100' offset='0%' />
		<stop style='stop-color:#ff9900;stop-opacity:.98' offset='50%' />
		<stop style='stop-color:#ff1700;stop-opacity:.98' offset='100%' />
	</radialGradient>
	<filter id='f1' >
		<feGaussianBlur stdDeviation='3' />
	</filter>
</defs>
<circle cx='75' cy='75' r='75' style="fill:url(#r4);filter:url(#f1);" />
</svg>

濾鏡標籤 filter 語法說明:
1. 其中的 id 屬性定出濾鏡名稱
2. 也可以設 width,height,x,y 去定濾鏡範圍和起點，如沒設以整個圖形為範圍。
3. 高斯模糊濾鏡 feGaussianBlur ：濾鏡標籤包住數種不同效果的濾鏡，高斯模糊濾鏡是最簡單的濾鏡。
4. 高斯模糊濾鏡主要只有一個參數：stdDeviation(標準差)，用來控制模糊的程度，數字越大越模糊，數字為零則是圖片原本的狀態。
作圖練習六-1：請到jendo.org/~admin/waterfall1.svg複製原始碼到自己的www裡，將夕陽放到瀑布(waterfall1.svg)圖裡適當的位置
作圖練習六-2：以 SVG 漸層,柔焦作出夕陽圖如右圖：山要蓋住一部分柔焦的太陽，天用矩形做，天的顏色是下紫紅上藍，夕陽天色剛好在山的輪廓線之上。檔名叫做 waterfall2.svg 。
作圖練習六-3：以 SVG 漸層,柔焦作出夕陽圖如右圖：加入綠草地，是矩形，與天、山的左緣相接。檔名叫做 waterfall3.svg 。

資訊基礎應用

目錄

概述

一、課程目標

二、選修說明

三、課程內容組成

四、重要參考資料

各次上課內容

2017.9.5

2017.9.12

2017.9.19

2017.9.26

2017.10.03

2017.10.17

2017.10.24

2017.10.31

2017.11.7

(一)畫文字

(二)位移、旋轉、縮放

(三)定義一次，引用多次

2017.11.14

(四)線性漸層

(五)放射漸層

(六)柔焦濾鏡

導航

個人工具

名字空間

變換

檢視

動作

搜尋

導覽

工具箱