http://well-being-ng.net/wiki1231/api.php?action=feedcontributions&feedformat=atom&user=%E8%95%AD%E5%8D%89%E5%9D%87
六年制學程 - 使用者貢獻 [zh-tw]
2026-04-09T17:16:54Z
使用者貢獻
MediaWiki 1.35.14
http://well-being-ng.net/wiki1231/index.php?title=%E8%A8%8E%E8%AB%96:%E8%B3%87%E8%A8%8A%E5%9F%BA%E7%A4%8E%E6%87%89%E7%94%A8/%E8%95%AD%E5%8D%89%E5%9D%87&diff=37932
討論:資訊基礎應用/蕭卉均
2018-01-16T12:09:24Z
<p>蕭卉均：/* ♡圖形計算機♡ */</p>
<hr />
<div>=ღ完整筆記ღ=<br />
==♡環境&工具♡==<br />
===1.♪環境♪===<br />
*伺服器與域名,伺服器DS216,網址6years.jendo.org<br />
*wifi,區網wifi：jendod&jendoa,密碼:jendo19690929<br />
*網站空間,瀏覽器：firefox,優先於chrome,盡量不用IE<br />
*wiki上的個人頁,filezilla→開啟filezilla,並新增一個站台叫♕DS216+(共用)♕→主機設定:6years.jendo.org→協定:SFTP→使用者:共用→字碼集:UTF-8→連線,然後到♕home/www♕→建自己帳號的連線→可用的文字編輯器,如emeditor→連結filezilla&慣用的文字編輯器：♕編輯/設定/檔案編輯♕，選用♕使用自訂編輯器♕&♕總是使用預設的編輯器♕，並指定編輯器的路徑<br />
*課後重點筆記:<br />
*#table是開始,/table是結束<br />
*#IP:IP4,最多表達到255字,IPV4一般網頁使用,IP6,物聯網用<br />
*#物聯網:簡單說一切事物,得失相兼<br />
*#域名:域名伺服器(HOSTS)<br />
*#AI(人工智慧)<br />
*#big5,早期,只有繁體中文<br />
*#UTF-8,萬國碼<br />
<br />
===2.♪工具與設定♪===<br />
*firefox:Mozilla Firefox（簡稱Firefox）,中文俗稱火狐（中國大陸官方有使用但未註冊為商標）,是一個自由及開放原始碼的網頁瀏覽器,由Mozilla基金會及其子公司Mozilla公司開發<br />
*filezilla:ileZilla是一種快速&可信賴的FTP用戶端以及伺服器端開放原始碼程式,具有多種特色&直覺的介面,FileZilla在2003年11月獲選為SourceForge.net當月最佳推薦專案<br />
*EmEditor:EmEditor是江村軟體公司（Emurasoft,坐落於美國華盛頓州）所開發的一款在Windows平台上運行的文字編輯程式,EmEditor以運作輕巧&敏捷而又功能強大&豐富著稱而得到許多用戶的好評<br />
<br />
==♡HTML&HTTP♡==<br />
*發有者及發明年代:於西元1993年,W3C&WHATWG開發<br />
*HTML:超文件標示語言（英語：HyperText Markup Language,簡稱：HTML）是一種用於建立網頁的標準標示語言,HTML是一種基礎技術常與CSS&JavaScript一起被眾多網站用於設計令人賞心悅目的網頁&網頁應用程式以及行動應用程式的使用者介面<br />
*HTTP:超文本傳輸協定（英文：HyperText Transfer Protocol,縮寫：HTTP）是一種用於分佈式&協作式和超媒體資訊系統的應用層協議,HTTP是全球資訊網的資料通訊的基礎<br />
*xml:可延伸標記式語言（英語：Extensible Markup Language,簡稱：XML）是一種標記式語言,標記指電腦所能理解的資訊符號,通過此種標記,電腦之間可以處理包含各種資訊的文章等<br />
*課後筆記:<br />
*#筆記網頁建設:登入後搜尋{資訊基礎應用/蕭卉均}→點一下，開始編輯→編輯完點儲存頁面<br />
*#色碼表:https://www.toodoo.com/db/color.html<br />
*通訊錄:<br />
*<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
<table class='nicetable'><br />
<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
</table><br />
<br />
==♡ wiki ♡==<br />
*何謂wiki:Wiki是一種在全球資訊網上開放且可供多人協同創作的超文字系統,由沃德·坎寧安於1995年首先開發,沃德·坎寧安將wiki定義為「一種允許一群用戶用簡單的描述來建立和連線一組網頁的社會計算系統」<br />
*CC授權:創用CC授權條款（英語：Creative Commons license,簡稱CC授權）是一種公共版權授權條款,其允許分發受版權保護的作品,一個創用CC授權用於一個作者想給他人分享&使用&甚至創作衍生作品的權利<br />
*wiki語法:http://jendo.synology.me/wiki1231/index.php?title=Wiki_%E5%85%A5%E9%96%80%E8%AA%9E%E6%B3%95<br />
*wiki的word適應:履歷表<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E5%B1%A5%E6%AD%B7%E8%A1%A8.html<br />
==♡CSS♡==<br />
*何謂CSS:層疊樣式表（英語：Cascading Style Sheets,簡寫CSS）又稱串樣式列表&級聯樣式表&串接樣式表&層疊樣式表&階層式樣式表,一種用來為結構化文件（如HTML文件或XML應用）添加樣式（字型、間距和顏色等）的電腦語言,由W3C定義和維護,目前最新版本是CSS2.1，為W3C的推薦標準,CSS3現在已被大部分現代瀏覽器支援,而下一版的CSS4仍在開發中<br />
*用法:限制者才有標章,不限制者沒有標章<br />
*重要語法:<br />
*#Attribution(BY):姓名標示,您（使用者）可以複製&發行&展覽&表演&放映&廣播或通過資訊網路傳播本作品；您必須按照作者或者授權人指定的方式對作品進行姓名標示<br />
*#NonCommercial(NC):非商業性使用,您可以自由複製&散布&展示及演出本作品；您不得為商業目的而使用本作品<br />
*#NoDerivs(ND):禁止改作,您可以自由複製&散布&展示及演出本作品；您不得改變&轉變或更改本作品<br />
*#ShareAlike(SA):相同方式分享,您可以自由複製&散布&展示及演出本作品；若您改變&轉變或更改本作品,僅在遵守與本作品相同的授權條款下,您才能散布由本作品產生的衍生作品<br />
<br />
==♡SVG♡==<br />
===1.♪概述♪===<br />
*何謂SVG:可縮放向量圖形（英語：Scalable Vector Graphics,SVG）是一種基於可延伸標記式語言（XML）,用於描述二維向量圖形的圖形格式,SVG由W3C制定,是一個開放標準<br />
*點陣圖與向量圖的比較(含附檔名):<br />
*#SVG:又為向量圖,特色,放大不毛邊,https://upload.wikimedia.org/wikipedia/commons/5/53/Skull_and_crossbones.svg<br />
*#JPG:又名JEPG,失真,壓縮,http://wportfolio.wzu.edu.tw/blog/attach/995/27995/89/bf_51402_8868906_99219_2yzUdJnLy0AsZ9VdwaKNCA.jpg<br />
*#PNG:不失真,公開格式,https://s-media-cache-ak0.pinimg.com/originals/96/94/ef/9694ef6ecfd562c83e7a445ee9ee19ba.png<br />
*#GIF:可動畫,256色,https://2.bp.blogspot.com/-Ra6UuzwDGQg/WDfdq3X1GjI/AAAAAAAD0gc/MfVErIwBENYRH_DvvFsnThfYp-zVxugEgCLcB/s1600/AS000946_02.gif<br />
*SVG格式具有以下優點:<br />
*#圖檔可讀,易於修改和編輯（理論上如此,但實際上卻是因為各種不同的SVG檔編輯器而可能儲存成不易解讀的SVG檔案）<br />
*#與現有技術可以互動融合,例如,SVG技術本身的動態部分（包括時序控制和動畫）就是基於SMIL標準,另外,SVG檔案還可嵌入JavaScript（嚴格地說，應該是ECMAScript）指令碼來控制SVG物件<br />
*#SVG圖形格式可以方便的建立文字索引,從而實現基於內容的圖像搜尋<br />
*#SVG圖形格式支援多種濾鏡和特殊效果,在不改變圖像內容的前提下可以實現點陣圖格式中類似文字陰影的效果<br />
*#SVG圖形格式可以用來動態生成圖形,例如,可用SVG動態生成具有互動功能的地圖,嵌入網頁中,並顯示給終端用戶<br />
*SVG格式具有以下缺點：<br />
*#如何和已經占有重要市場份額的向量圖形格式Adobe Animate競爭的問題,事實上,Adobe Animate在Flash CC 2014版及以後的版本就都支援直接匯出SVG檔案了<br />
*#SVG的本地執行環境下的廠家支援程度<br />
*#由於原始的SVG檔是遵從XML語法,導致資料採用未壓縮的方式存放,因此相較於其他的向量圖形格式,同樣的檔案內容會比其他的檔案格式稍大,Adobe因此使用gzip壓縮開發出壓縮的SVG檔格式,附檔名為 .svgz, 但此種檔案格式除了Adobe旗下的軟體以外,未被廣泛支援使用<br />
*#舊版的SVG Viewer無法正確顯示出使用新版SVG格式的向量圖形<br />
<br />
===2.♪基本架構♪===<br />
*基本架構:SVG允許3種圖形物件類型：向量圖形,柵格圖像以及文字,圖形物件——包括PNG&JPEG這些柵格圖像——能夠被編組&設計&轉換及整合進先前的彩現物件中,文字可以在任何適用於應用程式的XML命名空間之內,從而提高SVG圖形的搜尋能力和無障礙性,SVG提供的功能集涵蓋了巢狀轉換&裁剪路徑&Alpha通道&濾鏡效果&模板物件以及可延伸性,SVG嚴格遵從XML語法,並用文字格式的描述性語言來描述圖像內容,因此是一種和圖像解析度無關的向量圖形格式,SVG可以實現動態和互動功能,在DOM模型的基礎上,SVG開發設計人員可以利用ECMAScript或者SMIL來進行時序控制或物件的操縱,SVG雖然是文字格式,但是SVG支援利用gzip壓縮演算法減少檔案尺寸,壓縮後的檔案通常用被稱為「SVGZ檔案」<br />
*SVG主要支援以下幾種顯示物件：<br />
*#向量顯示物件,基本向量顯示物件包括矩形&圓&橢圓&多邊形&直線&任意曲線等<br />
*#嵌入式外部圖像,包括PNG&JPEG&SVG等<br />
*#文字物件<br />
*基本樣式:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/arrow.svg<br />
*基本圖形:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/bearFace.svg<br />
<br />
===3.♪文字♪===<br />
*TEXT<br />
*#在「text」標籤開始與結束之間夾字,可用中英文,而使用「屬性」來規定文字的表現,所有的屬性都可以改用樣式來表達<br />
*#可用中文字形：<br />
*##屬性dx和dy基於前一個字的位置去做變化：值可為'10,20,30,40'，字的距離一個比一個更遠<br />
*##屬性x和y標示字的起點：值可為'10,20,30,40'，表示每個字的x或y座標<br />
*##屬性fill控制填入字的顏色,預設黑色<br />
*##屬性stroke控制字描框的顏色,預設 none<br />
*##屬性rotate='30'順時鐘轉30°。rotate='30,60,90,120,150,180,210'指定每個字的轉動角度<br />
*##用style控制字體&字形&尺寸,但顏色是用fill不是用color <br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/text.svg<br />
<br />
===4.♪位移&旋轉&縮放&歪斜♪===<br />
*相關屬性說明：<br />
*#平移變換(translate)：transform="translate(x,y)",即新坐標系的原點在原坐標系的(x,y)處,坐標軸的方向不變<br />
*#旋轉變換(rotate)：transform="rotate(angle cx,cy)",angle代表旋轉角度,預設單位是「度」,順時針為正,逆時針為負,(cx,cy)是旋轉中心所在的坐標,若省略旋轉中心坐標,則預設值是(0,0)<br />
*#伸縮變換(scale)：transform="scale(sx,sy)",sx,sy分別代表x軸方向和y方向拉伸或縮小的比例因子,拉伸：大於1；縮小：小於1,若省略sy，即sy=sx，作等比例縮放<br />
*#歪斜變換(skew)：transform='skewX(x-angle)'或transform='skewY(y-angle)',x-angle,y-angle分別代表沿x軸和y軸歪斜的角度<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/transform.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/bearFace.svg<br />
<br />
===5.♪群組♪===<br />
*步驟:<br />
*#先添加svg標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，其中才有href屬性的定義<br />
*#在defs段落中定義圖形，並賦予id<br />
*#用<use xlink:href='#某id'/>來引用既有的定義<br />
<br />
===6.♪定義一次,引用多次♪===<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/uses.svg<br />
<br />
===7.♪漸層♪===<br />
*漸層和濾鏡如果取中文名稱,瀏覽器還認得,但Inkscape和線上轉檔軟體就會不認得<br />
*「漸層」工具可以在多種顏色之間建立漸層混合,您可以從預設漸層填色中選擇,或是建立自己的漸層填色<br />
*線性漸層沿著直線從起點到終點建立陰影<br />
*放射性漸層沿著圓形圖樣從起點到終點建立陰影<br />
*尖角漸層繞著起點以逆時針掃射的方式建立陰影<br />
*反射性漸層在起點的一側建立相同的鏡像線性漸層<br />
*菱形漸層從菱形圖樣的中央往外建立陰影<br />
====(1)☆線性漸層☆====<br />
*步驟：<br />
*#不用添加svg標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，不會用到href屬性<br />
*#在defs段落中定義漸層,並賦予id<br />
*#用fill='url(#某id)'屬性來引用既有的漸層定義<br />
*linearGradient 線性漸層定義語法說明:<br />
*#漸層標籤中的 100%，指的是整個圖形<br />
*#其中的 id 屬性定出漸層名稱<br />
*#由x1,y1,x2,y2四個屬性決定漸層範圍,以及水平,垂直或角形漸層,四個屬性都以百分比表示：<br />
*##x1,y1,x2,y2屬性決定漸層開始和結束位置,x1,x2以圖形的寬度為準,y1,y2以圖形的高度為準<br />
*##當y1和y2相等,而x1和x2不同時,可創建水平漸層<br />
*##當x1和x2相等,而y1和y2不同時,可創建垂直漸層<br />
*##當x1和x2不同,且y1和y2不同時,可創建角形漸層<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/h.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/v.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/arrow.svg<br />
<br />
====(2)☆放射漸層☆====<br />
*radialGradient 放設漸層定義語法說明:<br />
*#漸層範圍：由cx,cy,r三個屬性決定,三個屬性都以百分比表示,漸層範圍是一個圓或橢圓<br />
*##cx表示範圍中心在圖寬百分之幾的位置<br />
*##cy表示範圍中心在圖高百分之幾的位置<br />
*##r如果圖形寬&高相等則範圍為圓,r代表範圍圓半俓除以圖形寬或高；如果圖形寬&高不相等則範圍為橢圓,r代表範圍橢圓的長短軸半長除以圖形寬或高；注意：r為50%,範圍圓直徑恰等於圖的寬或高<br />
*#設色中心：由fx,fy兩個屬性決定的位置,就是設色為0%的地方,兩個屬性都以百分比表示<br />
*##fx表示設色中心在圖寬百分之幾的位置<br />
*##fy表示設色中心在圖高百分之幾的位置<br />
*##設色100%的地方在範圍圓或範圍橢圓的圓周上<br />
*#設色標籤stop,漸層標籤包住數個stop標籤,每種顏色通過一個stop標籤來規定<br />
*##offset屬性用來定義漸層的開始和結束位置,其100%是指整個漸層範圍<br />
*##stop-color屬性用來定義顏色,也可以做為style的樣式<br />
*##stop-opacity屬性決定透明度,也可以做為style的樣式<br />
*#以ball3.svg為例：漸層範圍為整個圓,因為cx,cy,r都是50% ,而設色中心在中間下方,因為fx='50%' fy='100%' ,此處是stop設為0%的顏色(白色),而範圍圓週邊是stop設為100%的顏色(黑色)<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball1.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball2.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball3.svg<br />
<br />
===8.♪柔焦濾鏡♪===<br />
*濾鏡標籤filter語法說明:<br />
*#其中的id屬性定出濾鏡名稱<br />
*#也可以設width,height,x,y去定濾鏡範圍和起點,如沒設以整個圖形為範圍<br />
*#高斯模糊濾鏡feGaussianBlur：濾鏡標籤包住數種不同效果的濾鏡,高斯模糊濾鏡是最簡單的濾鏡<br />
*#高斯模糊濾鏡主要只有一個參數：stdDeviation(標準差),用來控制模糊的程度,數字越大越模糊,數字為零則是圖片原本的狀態<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/sun.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/waterfall1.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/waterfall2.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/waterfall3.svg<br />
<br />
===9.♪path♪===<br />
*path<br />
*#參數大寫代表絕對座標,小寫代表與前一個座標的相對座標<br />
*#點與點之間&同點的x,y座標之間,用空白間開或用,間開兩者是等價的<br />
*http://www.oxxostudio.tw/articles/201406/svg-04-path-1.html<br />
*http://www.oxxostudio.tw/articles/201406/svg-05-path-2.html<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/path01.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/path02.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/path03.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/path04.svg<br />
<br />
===10.♪動畫♪===<br />
*四標籤：<br />
*#set(開關)<br />
*#animate(屬性連續改變)<br />
*#animateTransform(平移,旋轉,縮放)<br />
*#animateMotion(循跡運動)<br />
*共通語法：將母圖形分拆成開始和結束兩標籤,中間插入動畫標籤<br />
*共通屬性：<br />
*#attributeName：<br />
*##set,animate為某一個母圖形的屬性,from和to就是這個屬性的值將由多少變到多少<br />
*##animateTransform為'transform'另搭配type屬性<br />
*##animateMotion免設此屬性<br />
*#type屬性之值(animateTransform專用)：<br />
*##rotate旋轉,影響屬性from='起始角度,旋轉軸心x座標,旋轉軸心y座標'、to='結束角度,旋轉軸心x座標,旋轉軸心y座標'<br />
*##scale縮放,影響屬性from='x起始倍率,y起始倍率'、to='x結束倍率,y結束倍率'，倍率是自左上原點開始算,如果同組x,y倍率相同,可以只寫一個值<br />
*##translate平移,影響屬性from='起始原點x座標,起始原點y座標'、to='結束原點x座標,結束原點y座標'<br />
*##skewX X軸不動,X軸下方向右歪斜,影響屬性from='起始歪斜角度'、to='結束歪斜角度'<br />
*##skewY Y軸不動,Y軸右方向下歪斜,影響屬性from='起始歪斜角度'、to='結束歪斜角度'<br />
*#begin='幾s'：幾秒開始跑,通常設為0s<br />
*#dur='幾s'：跑一輪要幾秒,可以設為indefinite<br />
*#repeatCount='幾'：要跑幾輪,indefinite代表無限多輪,預設值為1<br />
*#from開始狀態(animate,animateTransform有)<br />
*#to結束狀態(set,animate,animateTransform有)<br />
*#path(animateMotion專用)屬性為移動路徑：由m開始<br />
*#rotate='auto'(animateMotion專用)圖形隨路徑曲度而轉折<br />
*http://jendo.org/~admin/path5.svg<br />
*http://jendo.org/~admin/path6.svg<br />
*https://msdn.microsoft.com/zh-tw/library/gg193979(v=vs.85).aspx<br />
<br />
==♡Inkscape♡==<br />
*inkscape下載,64位元：安裝版(62.7MB)|免安裝版(可攜式)(59.9MB)→下載對應的免安裝版→解壓縮<br />
*素材：<br />
*#org=公共利益用,源軟體（英語：open source software,英文縮寫：OSS，中文也稱：開放原始碼軟體）是一種原始碼可以任意取用的電腦軟體,這種軟體的版權持有人在軟體協定的規定之下保留一部分權利並允許用戶學習&修改&增進提高這款軟體的品質,開源協定通常符合開放原始碼的定義的要求,一些開源軟體被釋出到公有領域,開源軟體常被公開和合作地開發<br />
*#com=商業軟體（英語：Commercial software）是在電腦軟體中被作為商品進行交易的軟體,未必是商用軟體,至2000年代,大多數的軟體都屬於商業軟體,相對於商業軟體,有非商業的專有軟體（Proprietary Software）（但專有軟體中大部份都屬於商業軟體）,可供分享使用的自由軟體（Free Software）&共享軟體（Shareware）&免費軟體（Freeware）等<br />
*Vector/animals<br />
*#選一個圖→下載解壓縮(ai)→解散群組→取出圖檔→調整紙張→匯出點陣圖<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E7%8C%B4%E5%AD%90.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E4%B8%89%E8%A7%92%E9%BE%8D.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E5%9C%96%E6%9B%B8%E9%A4%A8.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E6%91%A9%E5%A4%A9%E8%BC%AA.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E6%97%A5%E6%9C%88%E6%BD%AD.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E6%98%9F%E6%98%9F.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E7%AD%86%E8%A8%98%E6%9C%AC.svg<br />
<br />
==♡GIS♡==<br />
*何謂GIS:地理資訊系統（英語：Geographic Information System,縮寫：GIS）是指在地圖上加上數據或訊息,結合地理學與地圖學,已經廣泛的應用在不同的領域,是用於輸入&儲存&查詢&分析和顯示地理資料的電腦系統,GIS屬於資訊系統的一類,不同在於它能運作和處理地理參照資料,地理參照資料描述地球表面（包括大氣層和較淺的地表下空間）空間要素的位置和屬性,在GIS中的兩種地理資料成分：空間資料,與空間要素幾何特性有關；屬性資料,提供空間要素的資訊<br />
*兩種主要的GIS:<br />
*#google map：google釋出的地圖庫,公布了API使得用戶能夠建立自訂的應用,公開格式,但非公共版權內容<br />
*#OpenStreetMap：(開放街圖，簡稱OSM),於2004年由英國的Steve Coast發起,採用類似Wiki的協作編輯以及開放的授權與格式<br />
*基本框架:比較出名的GIS底層數據框架GDAL<br />
*#地圖的需求:<br />
*##點擊地物,顯示地物的屬性信息和關聯的數據<br />
*##單值&分段專題圖<br />
*##連接業務數據庫獲取最新數據<br />
*##疊加不同地圖<br />
*marks:標點<br />
*overlays:標區域<br />
*課後重點:<br />
*#經緯度,1度=60分,1分=60秒<br />
*#先南北,後東西<br />
*#括號&引號必須成對:<br />
*##所有字和符號都用「英數」&「半形」符號,不可以用全形符號<br />
*##所有的小括號&中括號&大括號&單引號&雙引號都要成對<br />
*##每一對大括號代表一個東西(物件),東西裡面可以包進去更小的東西,東西不一定要取名字,例如：<br />
*###一張地圖<br />
*###一個覆蓋物<br />
*###一個經緯度座標點<br />
*###一個地點標示<br />
*###一個html指示<br />
*##每一對中括號裡面包一群相同的東西,例如：<br />
*###一群marker包成一組,名字叫markers；<br />
*###一群overlay包成一組,名字叫overlays；<br />
*###一群coord(經緯度座標)包成一組,名字叫coords<br />
*##每一對小括號中代表「函式」要作用的對象,現在先不必記它<br />
*#整張圖的性質:<br />
*##調整比例尺的性質：zoom:1~20,1比例尺最大,20比例尺最小<br />
*##標定整張地圖中心點位置的性質：<br />
*###latitude:緯度,十進位<br />
*###longitude:經度,十進位<br />
*###address:地址,如：土耳其<br />
*##地圖種類：maptype:值加引號有四種選擇：<br />
*###ROADMAP：道路地圖<br />
*###SATELLITE：衛星空照圖<br />
*###HYBRID：道路與空照圖相疊加<br />
*###TERRAIN：地形圖<br />
*##markers：各個地點標示<br />
*##overlays：各個覆蓋物<br />
*#標點:<br />
*##性質的名稱和性質的「值」用「:」連接<br />
*##同一級或同一組的東西並列時,用「,」分開,但是最後一個性質或東西後面不可以加「,」,因為後面沒有東西了<br />
*##HTML中的樣式語法有點像GIS中性質語法,但前者是用「;」間隔開兩組樣式,後者是用「,」間隔開兩組性質或東西<br />
*#markers內參數:<br />
*##整個markers:後面用一個中括號把所有的點包起來,中括號裡面,每一組大括號是一個點<br />
*##第一個marker為整張圖的中心點,優先於整張圖的中心點<br />
*##每一個點內,諸參數如下：<br />
*###address:值為字串,故加引號,可用國名如「台灣」或地址如「台灣新北市三重區捷運路」<br />
*###html:放物件,內含：<br />
*####content:HTML碼<br />
*####popup:false不主動彈出；true主動彈出<br />
*###title:游標停住會顯示<br />
*###draggable:true代表可拖動<br />
*###icon:字串,代表圖檔<br />
*#overlays內參數:<br />
*##每一個覆蓋物用大括號包起來,所有的覆蓋物用中括號包起來<br />
*##每一個覆蓋物共有的性質有：type&color&fillColor<br />
*##四種覆蓋物各自的參數：<br />
*###circle圓：latitude&longitude&radius<br />
*###polyline線：coords<br />
*###polygon多邊形：coords<br />
*###rectangle方形(矩形)：ne&sw<br />
*#地圖:<br />
*##hl=zh-TW：主機語言<br />
*##ie=UTF8：指定輸入的字符編碼<br />
*##oe=UTF8：指定輸出的字符編碼<br />
*##t=h：地圖類型,m為常規地圖,k為衛星地圖,h為混合地圖,p為地域地圖<br />
*##ll=24.945655,121.454673：地圖中心點經緯度<br />
*##z=16：放大縮小,值範圍1~20,1比例尺最大,20比例尺最小<br />
*##source=embed：原始碼嵌入<br />
*##dg=feature：自動產生,不必下命令<br />
*##GIS←kml←google 我的地圖<br />
*google我的地圖:<br />
*#http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/gis1.html<br />
*#http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/GIS2.HTML<br />
*#http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/google.html<br />
*結合我的地圖與GIS:<br />
*#http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E4%BB%A5%E8%89%B2%E5%88%97.HTML<br />
*#http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E6%97%A5%E6%9C%88%E6%BD%AD.html<br />
*https://www.google.com/maps/d/<br />
<br />
==♡圖形計算機♡==<br />
*課後重點:<br />
*#基本圖紙：<br />
*##圖寬：$draw->W,預設601<br />
*##圖高：$draw->H,預設401<br />
*##原點距左上角：$draw->x0,$draw->y0,預設(200,200)<br />
*##x每單位幾點：$draw->xu,預設15<br />
*##y每單位幾點：$draw->yu,預設15<br />
*##x每幾單位畫一個刻度：$draw->xGraduate,預設1<br />
*##y每幾單位畫一個刻度：$draw->yGraduate,預設1<br />
*##x每幾刻度標示一數字：$draw->xScale,預設1<br />
*##y每幾刻度標示一數字：$draw->yScale預設1<br />
*##秀出直角座標系：$draw->coordinate,預設1<br />
*##函式描點密度：$draw->pointDensity,預設20<br />
*##函式取樣點：$draw->xs,預設'-1;0;1';<br />
*#基本圖：$draw->圖形[]=array(array(…),其他屬性);<br />
*##多邊形：$draw->polygons[]=array('points'=>array(array(×,×),array(×,×),array(×,×)),'width'=>'線寬');<br />
*##線段：$draw->lineSegments[]=array(array(×,×),array(×,×),'color'=>'顏色','dash'=>'5 5');<br />
*##字：$draw->alnums[]=array(array(×,×),'word'=>'字');<br />
*##圓：$draw->circles[]=array(array(×,×),'radius'=>半徑,'fill'=>'顏色','fill-opacity'=>'1');,預設半徑3<br />
*##楕圓：$draw->ellipses[]=array(array(×,×),'rx'=>x半軸,'ry'=>y半軸,'color'=>'顏色');<br />
*##弧：$draw->arcs[]=array(array(×,×),array(×,×),'rx'=>x半軸,'ry'=>y半軸,'color'=>'顏色','arrowEnd'=>1);<br />
*#多項式：<br />
*##基本：$draw->functions[]=array('functionName'=>'polynomialEquation','argument'=>array(×,×,×,…),'color'=>'red');<br />
*##$draw->xs='×;×;×;…';：各點x值<br />
*##標y值：在functions[]中加'xToy'=>$draw->xs,<br />
*##標點：在functions[]中加'x2y'=>$draw->xs,<br />
*##斜率：在functions[]中加'tangentPoint'=>$draw->xs,<br />
*##面積：在functions[]中加'area'=>$draw->xs,<br />
*取得svgdraw.php:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/demo0.php<br />
*基本框架:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/demo00.php<br />
*繪製基本圖形:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/demo03.php<br />
*函式繪圖:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/demo3.php</div>
蕭卉均
http://well-being-ng.net/wiki1231/index.php?title=%E8%A8%8E%E8%AB%96:%E8%B3%87%E8%A8%8A%E5%9F%BA%E7%A4%8E%E6%87%89%E7%94%A8/%E8%95%AD%E5%8D%89%E5%9D%87&diff=37931
討論:資訊基礎應用/蕭卉均
2018-01-16T11:58:34Z
<p>蕭卉均：/* ♡GIS♡ */</p>
<hr />
<div>=ღ完整筆記ღ=<br />
==♡環境&工具♡==<br />
===1.♪環境♪===<br />
*伺服器與域名,伺服器DS216,網址6years.jendo.org<br />
*wifi,區網wifi：jendod&jendoa,密碼:jendo19690929<br />
*網站空間,瀏覽器：firefox,優先於chrome,盡量不用IE<br />
*wiki上的個人頁,filezilla→開啟filezilla,並新增一個站台叫♕DS216+(共用)♕→主機設定:6years.jendo.org→協定:SFTP→使用者:共用→字碼集:UTF-8→連線,然後到♕home/www♕→建自己帳號的連線→可用的文字編輯器,如emeditor→連結filezilla&慣用的文字編輯器：♕編輯/設定/檔案編輯♕，選用♕使用自訂編輯器♕&♕總是使用預設的編輯器♕，並指定編輯器的路徑<br />
*課後重點筆記:<br />
*#table是開始,/table是結束<br />
*#IP:IP4,最多表達到255字,IPV4一般網頁使用,IP6,物聯網用<br />
*#物聯網:簡單說一切事物,得失相兼<br />
*#域名:域名伺服器(HOSTS)<br />
*#AI(人工智慧)<br />
*#big5,早期,只有繁體中文<br />
*#UTF-8,萬國碼<br />
<br />
===2.♪工具與設定♪===<br />
*firefox:Mozilla Firefox（簡稱Firefox）,中文俗稱火狐（中國大陸官方有使用但未註冊為商標）,是一個自由及開放原始碼的網頁瀏覽器,由Mozilla基金會及其子公司Mozilla公司開發<br />
*filezilla:ileZilla是一種快速&可信賴的FTP用戶端以及伺服器端開放原始碼程式,具有多種特色&直覺的介面,FileZilla在2003年11月獲選為SourceForge.net當月最佳推薦專案<br />
*EmEditor:EmEditor是江村軟體公司（Emurasoft,坐落於美國華盛頓州）所開發的一款在Windows平台上運行的文字編輯程式,EmEditor以運作輕巧&敏捷而又功能強大&豐富著稱而得到許多用戶的好評<br />
<br />
==♡HTML&HTTP♡==<br />
*發有者及發明年代:於西元1993年,W3C&WHATWG開發<br />
*HTML:超文件標示語言（英語：HyperText Markup Language,簡稱：HTML）是一種用於建立網頁的標準標示語言,HTML是一種基礎技術常與CSS&JavaScript一起被眾多網站用於設計令人賞心悅目的網頁&網頁應用程式以及行動應用程式的使用者介面<br />
*HTTP:超文本傳輸協定（英文：HyperText Transfer Protocol,縮寫：HTTP）是一種用於分佈式&協作式和超媒體資訊系統的應用層協議,HTTP是全球資訊網的資料通訊的基礎<br />
*xml:可延伸標記式語言（英語：Extensible Markup Language,簡稱：XML）是一種標記式語言,標記指電腦所能理解的資訊符號,通過此種標記,電腦之間可以處理包含各種資訊的文章等<br />
*課後筆記:<br />
*#筆記網頁建設:登入後搜尋{資訊基礎應用/蕭卉均}→點一下，開始編輯→編輯完點儲存頁面<br />
*#色碼表:https://www.toodoo.com/db/color.html<br />
*通訊錄:<br />
*<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
<table class='nicetable'><br />
<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
</table><br />
<br />
==♡ wiki ♡==<br />
*何謂wiki:Wiki是一種在全球資訊網上開放且可供多人協同創作的超文字系統,由沃德·坎寧安於1995年首先開發,沃德·坎寧安將wiki定義為「一種允許一群用戶用簡單的描述來建立和連線一組網頁的社會計算系統」<br />
*CC授權:創用CC授權條款（英語：Creative Commons license,簡稱CC授權）是一種公共版權授權條款,其允許分發受版權保護的作品,一個創用CC授權用於一個作者想給他人分享&使用&甚至創作衍生作品的權利<br />
*wiki語法:http://jendo.synology.me/wiki1231/index.php?title=Wiki_%E5%85%A5%E9%96%80%E8%AA%9E%E6%B3%95<br />
*wiki的word適應:履歷表<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E5%B1%A5%E6%AD%B7%E8%A1%A8.html<br />
==♡CSS♡==<br />
*何謂CSS:層疊樣式表（英語：Cascading Style Sheets,簡寫CSS）又稱串樣式列表&級聯樣式表&串接樣式表&層疊樣式表&階層式樣式表,一種用來為結構化文件（如HTML文件或XML應用）添加樣式（字型、間距和顏色等）的電腦語言,由W3C定義和維護,目前最新版本是CSS2.1，為W3C的推薦標準,CSS3現在已被大部分現代瀏覽器支援,而下一版的CSS4仍在開發中<br />
*用法:限制者才有標章,不限制者沒有標章<br />
*重要語法:<br />
*#Attribution(BY):姓名標示,您（使用者）可以複製&發行&展覽&表演&放映&廣播或通過資訊網路傳播本作品；您必須按照作者或者授權人指定的方式對作品進行姓名標示<br />
*#NonCommercial(NC):非商業性使用,您可以自由複製&散布&展示及演出本作品；您不得為商業目的而使用本作品<br />
*#NoDerivs(ND):禁止改作,您可以自由複製&散布&展示及演出本作品；您不得改變&轉變或更改本作品<br />
*#ShareAlike(SA):相同方式分享,您可以自由複製&散布&展示及演出本作品；若您改變&轉變或更改本作品,僅在遵守與本作品相同的授權條款下,您才能散布由本作品產生的衍生作品<br />
<br />
==♡SVG♡==<br />
===1.♪概述♪===<br />
*何謂SVG:可縮放向量圖形（英語：Scalable Vector Graphics,SVG）是一種基於可延伸標記式語言（XML）,用於描述二維向量圖形的圖形格式,SVG由W3C制定,是一個開放標準<br />
*點陣圖與向量圖的比較(含附檔名):<br />
*#SVG:又為向量圖,特色,放大不毛邊,https://upload.wikimedia.org/wikipedia/commons/5/53/Skull_and_crossbones.svg<br />
*#JPG:又名JEPG,失真,壓縮,http://wportfolio.wzu.edu.tw/blog/attach/995/27995/89/bf_51402_8868906_99219_2yzUdJnLy0AsZ9VdwaKNCA.jpg<br />
*#PNG:不失真,公開格式,https://s-media-cache-ak0.pinimg.com/originals/96/94/ef/9694ef6ecfd562c83e7a445ee9ee19ba.png<br />
*#GIF:可動畫,256色,https://2.bp.blogspot.com/-Ra6UuzwDGQg/WDfdq3X1GjI/AAAAAAAD0gc/MfVErIwBENYRH_DvvFsnThfYp-zVxugEgCLcB/s1600/AS000946_02.gif<br />
*SVG格式具有以下優點:<br />
*#圖檔可讀,易於修改和編輯（理論上如此,但實際上卻是因為各種不同的SVG檔編輯器而可能儲存成不易解讀的SVG檔案）<br />
*#與現有技術可以互動融合,例如,SVG技術本身的動態部分（包括時序控制和動畫）就是基於SMIL標準,另外,SVG檔案還可嵌入JavaScript（嚴格地說，應該是ECMAScript）指令碼來控制SVG物件<br />
*#SVG圖形格式可以方便的建立文字索引,從而實現基於內容的圖像搜尋<br />
*#SVG圖形格式支援多種濾鏡和特殊效果,在不改變圖像內容的前提下可以實現點陣圖格式中類似文字陰影的效果<br />
*#SVG圖形格式可以用來動態生成圖形,例如,可用SVG動態生成具有互動功能的地圖,嵌入網頁中,並顯示給終端用戶<br />
*SVG格式具有以下缺點：<br />
*#如何和已經占有重要市場份額的向量圖形格式Adobe Animate競爭的問題,事實上,Adobe Animate在Flash CC 2014版及以後的版本就都支援直接匯出SVG檔案了<br />
*#SVG的本地執行環境下的廠家支援程度<br />
*#由於原始的SVG檔是遵從XML語法,導致資料採用未壓縮的方式存放,因此相較於其他的向量圖形格式,同樣的檔案內容會比其他的檔案格式稍大,Adobe因此使用gzip壓縮開發出壓縮的SVG檔格式,附檔名為 .svgz, 但此種檔案格式除了Adobe旗下的軟體以外,未被廣泛支援使用<br />
*#舊版的SVG Viewer無法正確顯示出使用新版SVG格式的向量圖形<br />
<br />
===2.♪基本架構♪===<br />
*基本架構:SVG允許3種圖形物件類型：向量圖形,柵格圖像以及文字,圖形物件——包括PNG&JPEG這些柵格圖像——能夠被編組&設計&轉換及整合進先前的彩現物件中,文字可以在任何適用於應用程式的XML命名空間之內,從而提高SVG圖形的搜尋能力和無障礙性,SVG提供的功能集涵蓋了巢狀轉換&裁剪路徑&Alpha通道&濾鏡效果&模板物件以及可延伸性,SVG嚴格遵從XML語法,並用文字格式的描述性語言來描述圖像內容,因此是一種和圖像解析度無關的向量圖形格式,SVG可以實現動態和互動功能,在DOM模型的基礎上,SVG開發設計人員可以利用ECMAScript或者SMIL來進行時序控制或物件的操縱,SVG雖然是文字格式,但是SVG支援利用gzip壓縮演算法減少檔案尺寸,壓縮後的檔案通常用被稱為「SVGZ檔案」<br />
*SVG主要支援以下幾種顯示物件：<br />
*#向量顯示物件,基本向量顯示物件包括矩形&圓&橢圓&多邊形&直線&任意曲線等<br />
*#嵌入式外部圖像,包括PNG&JPEG&SVG等<br />
*#文字物件<br />
*基本樣式:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/arrow.svg<br />
*基本圖形:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/bearFace.svg<br />
<br />
===3.♪文字♪===<br />
*TEXT<br />
*#在「text」標籤開始與結束之間夾字,可用中英文,而使用「屬性」來規定文字的表現,所有的屬性都可以改用樣式來表達<br />
*#可用中文字形：<br />
*##屬性dx和dy基於前一個字的位置去做變化：值可為'10,20,30,40'，字的距離一個比一個更遠<br />
*##屬性x和y標示字的起點：值可為'10,20,30,40'，表示每個字的x或y座標<br />
*##屬性fill控制填入字的顏色,預設黑色<br />
*##屬性stroke控制字描框的顏色,預設 none<br />
*##屬性rotate='30'順時鐘轉30°。rotate='30,60,90,120,150,180,210'指定每個字的轉動角度<br />
*##用style控制字體&字形&尺寸,但顏色是用fill不是用color <br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/text.svg<br />
<br />
===4.♪位移&旋轉&縮放&歪斜♪===<br />
*相關屬性說明：<br />
*#平移變換(translate)：transform="translate(x,y)",即新坐標系的原點在原坐標系的(x,y)處,坐標軸的方向不變<br />
*#旋轉變換(rotate)：transform="rotate(angle cx,cy)",angle代表旋轉角度,預設單位是「度」,順時針為正,逆時針為負,(cx,cy)是旋轉中心所在的坐標,若省略旋轉中心坐標,則預設值是(0,0)<br />
*#伸縮變換(scale)：transform="scale(sx,sy)",sx,sy分別代表x軸方向和y方向拉伸或縮小的比例因子,拉伸：大於1；縮小：小於1,若省略sy，即sy=sx，作等比例縮放<br />
*#歪斜變換(skew)：transform='skewX(x-angle)'或transform='skewY(y-angle)',x-angle,y-angle分別代表沿x軸和y軸歪斜的角度<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/transform.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/bearFace.svg<br />
<br />
===5.♪群組♪===<br />
*步驟:<br />
*#先添加svg標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，其中才有href屬性的定義<br />
*#在defs段落中定義圖形，並賦予id<br />
*#用<use xlink:href='#某id'/>來引用既有的定義<br />
<br />
===6.♪定義一次,引用多次♪===<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/uses.svg<br />
<br />
===7.♪漸層♪===<br />
*漸層和濾鏡如果取中文名稱,瀏覽器還認得,但Inkscape和線上轉檔軟體就會不認得<br />
*「漸層」工具可以在多種顏色之間建立漸層混合,您可以從預設漸層填色中選擇,或是建立自己的漸層填色<br />
*線性漸層沿著直線從起點到終點建立陰影<br />
*放射性漸層沿著圓形圖樣從起點到終點建立陰影<br />
*尖角漸層繞著起點以逆時針掃射的方式建立陰影<br />
*反射性漸層在起點的一側建立相同的鏡像線性漸層<br />
*菱形漸層從菱形圖樣的中央往外建立陰影<br />
====(1)☆線性漸層☆====<br />
*步驟：<br />
*#不用添加svg標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，不會用到href屬性<br />
*#在defs段落中定義漸層,並賦予id<br />
*#用fill='url(#某id)'屬性來引用既有的漸層定義<br />
*linearGradient 線性漸層定義語法說明:<br />
*#漸層標籤中的 100%，指的是整個圖形<br />
*#其中的 id 屬性定出漸層名稱<br />
*#由x1,y1,x2,y2四個屬性決定漸層範圍,以及水平,垂直或角形漸層,四個屬性都以百分比表示：<br />
*##x1,y1,x2,y2屬性決定漸層開始和結束位置,x1,x2以圖形的寬度為準,y1,y2以圖形的高度為準<br />
*##當y1和y2相等,而x1和x2不同時,可創建水平漸層<br />
*##當x1和x2相等,而y1和y2不同時,可創建垂直漸層<br />
*##當x1和x2不同,且y1和y2不同時,可創建角形漸層<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/h.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/v.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/arrow.svg<br />
<br />
====(2)☆放射漸層☆====<br />
*radialGradient 放設漸層定義語法說明:<br />
*#漸層範圍：由cx,cy,r三個屬性決定,三個屬性都以百分比表示,漸層範圍是一個圓或橢圓<br />
*##cx表示範圍中心在圖寬百分之幾的位置<br />
*##cy表示範圍中心在圖高百分之幾的位置<br />
*##r如果圖形寬&高相等則範圍為圓,r代表範圍圓半俓除以圖形寬或高；如果圖形寬&高不相等則範圍為橢圓,r代表範圍橢圓的長短軸半長除以圖形寬或高；注意：r為50%,範圍圓直徑恰等於圖的寬或高<br />
*#設色中心：由fx,fy兩個屬性決定的位置,就是設色為0%的地方,兩個屬性都以百分比表示<br />
*##fx表示設色中心在圖寬百分之幾的位置<br />
*##fy表示設色中心在圖高百分之幾的位置<br />
*##設色100%的地方在範圍圓或範圍橢圓的圓周上<br />
*#設色標籤stop,漸層標籤包住數個stop標籤,每種顏色通過一個stop標籤來規定<br />
*##offset屬性用來定義漸層的開始和結束位置,其100%是指整個漸層範圍<br />
*##stop-color屬性用來定義顏色,也可以做為style的樣式<br />
*##stop-opacity屬性決定透明度,也可以做為style的樣式<br />
*#以ball3.svg為例：漸層範圍為整個圓,因為cx,cy,r都是50% ,而設色中心在中間下方,因為fx='50%' fy='100%' ,此處是stop設為0%的顏色(白色),而範圍圓週邊是stop設為100%的顏色(黑色)<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball1.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball2.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball3.svg<br />
<br />
===8.♪柔焦濾鏡♪===<br />
*濾鏡標籤filter語法說明:<br />
*#其中的id屬性定出濾鏡名稱<br />
*#也可以設width,height,x,y去定濾鏡範圍和起點,如沒設以整個圖形為範圍<br />
*#高斯模糊濾鏡feGaussianBlur：濾鏡標籤包住數種不同效果的濾鏡,高斯模糊濾鏡是最簡單的濾鏡<br />
*#高斯模糊濾鏡主要只有一個參數：stdDeviation(標準差),用來控制模糊的程度,數字越大越模糊,數字為零則是圖片原本的狀態<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/sun.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/waterfall1.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/waterfall2.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/waterfall3.svg<br />
<br />
===9.♪path♪===<br />
*path<br />
*#參數大寫代表絕對座標,小寫代表與前一個座標的相對座標<br />
*#點與點之間&同點的x,y座標之間,用空白間開或用,間開兩者是等價的<br />
*http://www.oxxostudio.tw/articles/201406/svg-04-path-1.html<br />
*http://www.oxxostudio.tw/articles/201406/svg-05-path-2.html<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/path01.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/path02.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/path03.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/path04.svg<br />
<br />
===10.♪動畫♪===<br />
*四標籤：<br />
*#set(開關)<br />
*#animate(屬性連續改變)<br />
*#animateTransform(平移,旋轉,縮放)<br />
*#animateMotion(循跡運動)<br />
*共通語法：將母圖形分拆成開始和結束兩標籤,中間插入動畫標籤<br />
*共通屬性：<br />
*#attributeName：<br />
*##set,animate為某一個母圖形的屬性,from和to就是這個屬性的值將由多少變到多少<br />
*##animateTransform為'transform'另搭配type屬性<br />
*##animateMotion免設此屬性<br />
*#type屬性之值(animateTransform專用)：<br />
*##rotate旋轉,影響屬性from='起始角度,旋轉軸心x座標,旋轉軸心y座標'、to='結束角度,旋轉軸心x座標,旋轉軸心y座標'<br />
*##scale縮放,影響屬性from='x起始倍率,y起始倍率'、to='x結束倍率,y結束倍率'，倍率是自左上原點開始算,如果同組x,y倍率相同,可以只寫一個值<br />
*##translate平移,影響屬性from='起始原點x座標,起始原點y座標'、to='結束原點x座標,結束原點y座標'<br />
*##skewX X軸不動,X軸下方向右歪斜,影響屬性from='起始歪斜角度'、to='結束歪斜角度'<br />
*##skewY Y軸不動,Y軸右方向下歪斜,影響屬性from='起始歪斜角度'、to='結束歪斜角度'<br />
*#begin='幾s'：幾秒開始跑,通常設為0s<br />
*#dur='幾s'：跑一輪要幾秒,可以設為indefinite<br />
*#repeatCount='幾'：要跑幾輪,indefinite代表無限多輪,預設值為1<br />
*#from開始狀態(animate,animateTransform有)<br />
*#to結束狀態(set,animate,animateTransform有)<br />
*#path(animateMotion專用)屬性為移動路徑：由m開始<br />
*#rotate='auto'(animateMotion專用)圖形隨路徑曲度而轉折<br />
*http://jendo.org/~admin/path5.svg<br />
*http://jendo.org/~admin/path6.svg<br />
*https://msdn.microsoft.com/zh-tw/library/gg193979(v=vs.85).aspx<br />
<br />
==♡Inkscape♡==<br />
*inkscape下載,64位元：安裝版(62.7MB)|免安裝版(可攜式)(59.9MB)→下載對應的免安裝版→解壓縮<br />
*素材：<br />
*#org=公共利益用,源軟體（英語：open source software,英文縮寫：OSS，中文也稱：開放原始碼軟體）是一種原始碼可以任意取用的電腦軟體,這種軟體的版權持有人在軟體協定的規定之下保留一部分權利並允許用戶學習&修改&增進提高這款軟體的品質,開源協定通常符合開放原始碼的定義的要求,一些開源軟體被釋出到公有領域,開源軟體常被公開和合作地開發<br />
*#com=商業軟體（英語：Commercial software）是在電腦軟體中被作為商品進行交易的軟體,未必是商用軟體,至2000年代,大多數的軟體都屬於商業軟體,相對於商業軟體,有非商業的專有軟體（Proprietary Software）（但專有軟體中大部份都屬於商業軟體）,可供分享使用的自由軟體（Free Software）&共享軟體（Shareware）&免費軟體（Freeware）等<br />
*Vector/animals<br />
*#選一個圖→下載解壓縮(ai)→解散群組→取出圖檔→調整紙張→匯出點陣圖<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E7%8C%B4%E5%AD%90.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E4%B8%89%E8%A7%92%E9%BE%8D.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E5%9C%96%E6%9B%B8%E9%A4%A8.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E6%91%A9%E5%A4%A9%E8%BC%AA.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E6%97%A5%E6%9C%88%E6%BD%AD.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E6%98%9F%E6%98%9F.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E7%AD%86%E8%A8%98%E6%9C%AC.svg<br />
<br />
==♡GIS♡==<br />
*何謂GIS:地理資訊系統（英語：Geographic Information System,縮寫：GIS）是指在地圖上加上數據或訊息,結合地理學與地圖學,已經廣泛的應用在不同的領域,是用於輸入&儲存&查詢&分析和顯示地理資料的電腦系統,GIS屬於資訊系統的一類,不同在於它能運作和處理地理參照資料,地理參照資料描述地球表面（包括大氣層和較淺的地表下空間）空間要素的位置和屬性,在GIS中的兩種地理資料成分：空間資料,與空間要素幾何特性有關；屬性資料,提供空間要素的資訊<br />
*兩種主要的GIS:<br />
*#google map：google釋出的地圖庫,公布了API使得用戶能夠建立自訂的應用,公開格式,但非公共版權內容<br />
*#OpenStreetMap：(開放街圖，簡稱OSM),於2004年由英國的Steve Coast發起,採用類似Wiki的協作編輯以及開放的授權與格式<br />
*基本框架:比較出名的GIS底層數據框架GDAL<br />
*#地圖的需求:<br />
*##點擊地物,顯示地物的屬性信息和關聯的數據<br />
*##單值&分段專題圖<br />
*##連接業務數據庫獲取最新數據<br />
*##疊加不同地圖<br />
*marks:標點<br />
*overlays:標區域<br />
*課後重點:<br />
*#經緯度,1度=60分,1分=60秒<br />
*#先南北,後東西<br />
*#括號&引號必須成對:<br />
*##所有字和符號都用「英數」&「半形」符號,不可以用全形符號<br />
*##所有的小括號&中括號&大括號&單引號&雙引號都要成對<br />
*##每一對大括號代表一個東西(物件),東西裡面可以包進去更小的東西,東西不一定要取名字,例如：<br />
*###一張地圖<br />
*###一個覆蓋物<br />
*###一個經緯度座標點<br />
*###一個地點標示<br />
*###一個html指示<br />
*##每一對中括號裡面包一群相同的東西,例如：<br />
*###一群marker包成一組,名字叫markers；<br />
*###一群overlay包成一組,名字叫overlays；<br />
*###一群coord(經緯度座標)包成一組,名字叫coords<br />
*##每一對小括號中代表「函式」要作用的對象,現在先不必記它<br />
*#整張圖的性質:<br />
*##調整比例尺的性質：zoom:1~20,1比例尺最大,20比例尺最小<br />
*##標定整張地圖中心點位置的性質：<br />
*###latitude:緯度,十進位<br />
*###longitude:經度,十進位<br />
*###address:地址,如：土耳其<br />
*##地圖種類：maptype:值加引號有四種選擇：<br />
*###ROADMAP：道路地圖<br />
*###SATELLITE：衛星空照圖<br />
*###HYBRID：道路與空照圖相疊加<br />
*###TERRAIN：地形圖<br />
*##markers：各個地點標示<br />
*##overlays：各個覆蓋物<br />
*#標點:<br />
*##性質的名稱和性質的「值」用「:」連接<br />
*##同一級或同一組的東西並列時,用「,」分開,但是最後一個性質或東西後面不可以加「,」,因為後面沒有東西了<br />
*##HTML中的樣式語法有點像GIS中性質語法,但前者是用「;」間隔開兩組樣式,後者是用「,」間隔開兩組性質或東西<br />
*#markers內參數:<br />
*##整個markers:後面用一個中括號把所有的點包起來,中括號裡面,每一組大括號是一個點<br />
*##第一個marker為整張圖的中心點,優先於整張圖的中心點<br />
*##每一個點內,諸參數如下：<br />
*###address:值為字串,故加引號,可用國名如「台灣」或地址如「台灣新北市三重區捷運路」<br />
*###html:放物件,內含：<br />
*####content:HTML碼<br />
*####popup:false不主動彈出；true主動彈出<br />
*###title:游標停住會顯示<br />
*###draggable:true代表可拖動<br />
*###icon:字串,代表圖檔<br />
*#overlays內參數:<br />
*##每一個覆蓋物用大括號包起來,所有的覆蓋物用中括號包起來<br />
*##每一個覆蓋物共有的性質有：type&color&fillColor<br />
*##四種覆蓋物各自的參數：<br />
*###circle圓：latitude&longitude&radius<br />
*###polyline線：coords<br />
*###polygon多邊形：coords<br />
*###rectangle方形(矩形)：ne&sw<br />
*#地圖:<br />
*##hl=zh-TW：主機語言<br />
*##ie=UTF8：指定輸入的字符編碼<br />
*##oe=UTF8：指定輸出的字符編碼<br />
*##t=h：地圖類型,m為常規地圖,k為衛星地圖,h為混合地圖,p為地域地圖<br />
*##ll=24.945655,121.454673：地圖中心點經緯度<br />
*##z=16：放大縮小,值範圍1~20,1比例尺最大,20比例尺最小<br />
*##source=embed：原始碼嵌入<br />
*##dg=feature：自動產生,不必下命令<br />
*##GIS←kml←google 我的地圖<br />
*google我的地圖:<br />
*#http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/gis1.html<br />
*#http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/GIS2.HTML<br />
*#http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/google.html<br />
*結合我的地圖與GIS:<br />
*#http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E4%BB%A5%E8%89%B2%E5%88%97.HTML<br />
*#http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E6%97%A5%E6%9C%88%E6%BD%AD.html<br />
*https://www.google.com/maps/d/<br />
<br />
==♡圖形計算機♡==<br />
*取得 svgdraw.php<br />
*基本框架<br />
*繪製基本圖形<br />
*函式繪圖<br />
*google 圖形計算機</div>
蕭卉均
http://well-being-ng.net/wiki1231/index.php?title=%E8%A8%8E%E8%AB%96:%E8%B3%87%E8%A8%8A%E5%9F%BA%E7%A4%8E%E6%87%89%E7%94%A8/%E8%95%AD%E5%8D%89%E5%9D%87&diff=37930
討論:資訊基礎應用/蕭卉均
2018-01-16T11:51:19Z
<p>蕭卉均：/* ♡GIS♡ */</p>
<hr />
<div>=ღ完整筆記ღ=<br />
==♡環境&工具♡==<br />
===1.♪環境♪===<br />
*伺服器與域名,伺服器DS216,網址6years.jendo.org<br />
*wifi,區網wifi：jendod&jendoa,密碼:jendo19690929<br />
*網站空間,瀏覽器：firefox,優先於chrome,盡量不用IE<br />
*wiki上的個人頁,filezilla→開啟filezilla,並新增一個站台叫♕DS216+(共用)♕→主機設定:6years.jendo.org→協定:SFTP→使用者:共用→字碼集:UTF-8→連線,然後到♕home/www♕→建自己帳號的連線→可用的文字編輯器,如emeditor→連結filezilla&慣用的文字編輯器：♕編輯/設定/檔案編輯♕，選用♕使用自訂編輯器♕&♕總是使用預設的編輯器♕，並指定編輯器的路徑<br />
*課後重點筆記:<br />
*#table是開始,/table是結束<br />
*#IP:IP4,最多表達到255字,IPV4一般網頁使用,IP6,物聯網用<br />
*#物聯網:簡單說一切事物,得失相兼<br />
*#域名:域名伺服器(HOSTS)<br />
*#AI(人工智慧)<br />
*#big5,早期,只有繁體中文<br />
*#UTF-8,萬國碼<br />
<br />
===2.♪工具與設定♪===<br />
*firefox:Mozilla Firefox（簡稱Firefox）,中文俗稱火狐（中國大陸官方有使用但未註冊為商標）,是一個自由及開放原始碼的網頁瀏覽器,由Mozilla基金會及其子公司Mozilla公司開發<br />
*filezilla:ileZilla是一種快速&可信賴的FTP用戶端以及伺服器端開放原始碼程式,具有多種特色&直覺的介面,FileZilla在2003年11月獲選為SourceForge.net當月最佳推薦專案<br />
*EmEditor:EmEditor是江村軟體公司（Emurasoft,坐落於美國華盛頓州）所開發的一款在Windows平台上運行的文字編輯程式,EmEditor以運作輕巧&敏捷而又功能強大&豐富著稱而得到許多用戶的好評<br />
<br />
==♡HTML&HTTP♡==<br />
*發有者及發明年代:於西元1993年,W3C&WHATWG開發<br />
*HTML:超文件標示語言（英語：HyperText Markup Language,簡稱：HTML）是一種用於建立網頁的標準標示語言,HTML是一種基礎技術常與CSS&JavaScript一起被眾多網站用於設計令人賞心悅目的網頁&網頁應用程式以及行動應用程式的使用者介面<br />
*HTTP:超文本傳輸協定（英文：HyperText Transfer Protocol,縮寫：HTTP）是一種用於分佈式&協作式和超媒體資訊系統的應用層協議,HTTP是全球資訊網的資料通訊的基礎<br />
*xml:可延伸標記式語言（英語：Extensible Markup Language,簡稱：XML）是一種標記式語言,標記指電腦所能理解的資訊符號,通過此種標記,電腦之間可以處理包含各種資訊的文章等<br />
*課後筆記:<br />
*#筆記網頁建設:登入後搜尋{資訊基礎應用/蕭卉均}→點一下，開始編輯→編輯完點儲存頁面<br />
*#色碼表:https://www.toodoo.com/db/color.html<br />
*通訊錄:<br />
*<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
<table class='nicetable'><br />
<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
</table><br />
<br />
==♡ wiki ♡==<br />
*何謂wiki:Wiki是一種在全球資訊網上開放且可供多人協同創作的超文字系統,由沃德·坎寧安於1995年首先開發,沃德·坎寧安將wiki定義為「一種允許一群用戶用簡單的描述來建立和連線一組網頁的社會計算系統」<br />
*CC授權:創用CC授權條款（英語：Creative Commons license,簡稱CC授權）是一種公共版權授權條款,其允許分發受版權保護的作品,一個創用CC授權用於一個作者想給他人分享&使用&甚至創作衍生作品的權利<br />
*wiki語法:http://jendo.synology.me/wiki1231/index.php?title=Wiki_%E5%85%A5%E9%96%80%E8%AA%9E%E6%B3%95<br />
*wiki的word適應:履歷表<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E5%B1%A5%E6%AD%B7%E8%A1%A8.html<br />
==♡CSS♡==<br />
*何謂CSS:層疊樣式表（英語：Cascading Style Sheets,簡寫CSS）又稱串樣式列表&級聯樣式表&串接樣式表&層疊樣式表&階層式樣式表,一種用來為結構化文件（如HTML文件或XML應用）添加樣式（字型、間距和顏色等）的電腦語言,由W3C定義和維護,目前最新版本是CSS2.1，為W3C的推薦標準,CSS3現在已被大部分現代瀏覽器支援,而下一版的CSS4仍在開發中<br />
*用法:限制者才有標章,不限制者沒有標章<br />
*重要語法:<br />
*#Attribution(BY):姓名標示,您（使用者）可以複製&發行&展覽&表演&放映&廣播或通過資訊網路傳播本作品；您必須按照作者或者授權人指定的方式對作品進行姓名標示<br />
*#NonCommercial(NC):非商業性使用,您可以自由複製&散布&展示及演出本作品；您不得為商業目的而使用本作品<br />
*#NoDerivs(ND):禁止改作,您可以自由複製&散布&展示及演出本作品；您不得改變&轉變或更改本作品<br />
*#ShareAlike(SA):相同方式分享,您可以自由複製&散布&展示及演出本作品；若您改變&轉變或更改本作品,僅在遵守與本作品相同的授權條款下,您才能散布由本作品產生的衍生作品<br />
<br />
==♡SVG♡==<br />
===1.♪概述♪===<br />
*何謂SVG:可縮放向量圖形（英語：Scalable Vector Graphics,SVG）是一種基於可延伸標記式語言（XML）,用於描述二維向量圖形的圖形格式,SVG由W3C制定,是一個開放標準<br />
*點陣圖與向量圖的比較(含附檔名):<br />
*#SVG:又為向量圖,特色,放大不毛邊,https://upload.wikimedia.org/wikipedia/commons/5/53/Skull_and_crossbones.svg<br />
*#JPG:又名JEPG,失真,壓縮,http://wportfolio.wzu.edu.tw/blog/attach/995/27995/89/bf_51402_8868906_99219_2yzUdJnLy0AsZ9VdwaKNCA.jpg<br />
*#PNG:不失真,公開格式,https://s-media-cache-ak0.pinimg.com/originals/96/94/ef/9694ef6ecfd562c83e7a445ee9ee19ba.png<br />
*#GIF:可動畫,256色,https://2.bp.blogspot.com/-Ra6UuzwDGQg/WDfdq3X1GjI/AAAAAAAD0gc/MfVErIwBENYRH_DvvFsnThfYp-zVxugEgCLcB/s1600/AS000946_02.gif<br />
*SVG格式具有以下優點:<br />
*#圖檔可讀,易於修改和編輯（理論上如此,但實際上卻是因為各種不同的SVG檔編輯器而可能儲存成不易解讀的SVG檔案）<br />
*#與現有技術可以互動融合,例如,SVG技術本身的動態部分（包括時序控制和動畫）就是基於SMIL標準,另外,SVG檔案還可嵌入JavaScript（嚴格地說，應該是ECMAScript）指令碼來控制SVG物件<br />
*#SVG圖形格式可以方便的建立文字索引,從而實現基於內容的圖像搜尋<br />
*#SVG圖形格式支援多種濾鏡和特殊效果,在不改變圖像內容的前提下可以實現點陣圖格式中類似文字陰影的效果<br />
*#SVG圖形格式可以用來動態生成圖形,例如,可用SVG動態生成具有互動功能的地圖,嵌入網頁中,並顯示給終端用戶<br />
*SVG格式具有以下缺點：<br />
*#如何和已經占有重要市場份額的向量圖形格式Adobe Animate競爭的問題,事實上,Adobe Animate在Flash CC 2014版及以後的版本就都支援直接匯出SVG檔案了<br />
*#SVG的本地執行環境下的廠家支援程度<br />
*#由於原始的SVG檔是遵從XML語法,導致資料採用未壓縮的方式存放,因此相較於其他的向量圖形格式,同樣的檔案內容會比其他的檔案格式稍大,Adobe因此使用gzip壓縮開發出壓縮的SVG檔格式,附檔名為 .svgz, 但此種檔案格式除了Adobe旗下的軟體以外,未被廣泛支援使用<br />
*#舊版的SVG Viewer無法正確顯示出使用新版SVG格式的向量圖形<br />
<br />
===2.♪基本架構♪===<br />
*基本架構:SVG允許3種圖形物件類型：向量圖形,柵格圖像以及文字,圖形物件——包括PNG&JPEG這些柵格圖像——能夠被編組&設計&轉換及整合進先前的彩現物件中,文字可以在任何適用於應用程式的XML命名空間之內,從而提高SVG圖形的搜尋能力和無障礙性,SVG提供的功能集涵蓋了巢狀轉換&裁剪路徑&Alpha通道&濾鏡效果&模板物件以及可延伸性,SVG嚴格遵從XML語法,並用文字格式的描述性語言來描述圖像內容,因此是一種和圖像解析度無關的向量圖形格式,SVG可以實現動態和互動功能,在DOM模型的基礎上,SVG開發設計人員可以利用ECMAScript或者SMIL來進行時序控制或物件的操縱,SVG雖然是文字格式,但是SVG支援利用gzip壓縮演算法減少檔案尺寸,壓縮後的檔案通常用被稱為「SVGZ檔案」<br />
*SVG主要支援以下幾種顯示物件：<br />
*#向量顯示物件,基本向量顯示物件包括矩形&圓&橢圓&多邊形&直線&任意曲線等<br />
*#嵌入式外部圖像,包括PNG&JPEG&SVG等<br />
*#文字物件<br />
*基本樣式:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/arrow.svg<br />
*基本圖形:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/bearFace.svg<br />
<br />
===3.♪文字♪===<br />
*TEXT<br />
*#在「text」標籤開始與結束之間夾字,可用中英文,而使用「屬性」來規定文字的表現,所有的屬性都可以改用樣式來表達<br />
*#可用中文字形：<br />
*##屬性dx和dy基於前一個字的位置去做變化：值可為'10,20,30,40'，字的距離一個比一個更遠<br />
*##屬性x和y標示字的起點：值可為'10,20,30,40'，表示每個字的x或y座標<br />
*##屬性fill控制填入字的顏色,預設黑色<br />
*##屬性stroke控制字描框的顏色,預設 none<br />
*##屬性rotate='30'順時鐘轉30°。rotate='30,60,90,120,150,180,210'指定每個字的轉動角度<br />
*##用style控制字體&字形&尺寸,但顏色是用fill不是用color <br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/text.svg<br />
<br />
===4.♪位移&旋轉&縮放&歪斜♪===<br />
*相關屬性說明：<br />
*#平移變換(translate)：transform="translate(x,y)",即新坐標系的原點在原坐標系的(x,y)處,坐標軸的方向不變<br />
*#旋轉變換(rotate)：transform="rotate(angle cx,cy)",angle代表旋轉角度,預設單位是「度」,順時針為正,逆時針為負,(cx,cy)是旋轉中心所在的坐標,若省略旋轉中心坐標,則預設值是(0,0)<br />
*#伸縮變換(scale)：transform="scale(sx,sy)",sx,sy分別代表x軸方向和y方向拉伸或縮小的比例因子,拉伸：大於1；縮小：小於1,若省略sy，即sy=sx，作等比例縮放<br />
*#歪斜變換(skew)：transform='skewX(x-angle)'或transform='skewY(y-angle)',x-angle,y-angle分別代表沿x軸和y軸歪斜的角度<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/transform.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/bearFace.svg<br />
<br />
===5.♪群組♪===<br />
*步驟:<br />
*#先添加svg標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，其中才有href屬性的定義<br />
*#在defs段落中定義圖形，並賦予id<br />
*#用<use xlink:href='#某id'/>來引用既有的定義<br />
<br />
===6.♪定義一次,引用多次♪===<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/uses.svg<br />
<br />
===7.♪漸層♪===<br />
*漸層和濾鏡如果取中文名稱,瀏覽器還認得,但Inkscape和線上轉檔軟體就會不認得<br />
*「漸層」工具可以在多種顏色之間建立漸層混合,您可以從預設漸層填色中選擇,或是建立自己的漸層填色<br />
*線性漸層沿著直線從起點到終點建立陰影<br />
*放射性漸層沿著圓形圖樣從起點到終點建立陰影<br />
*尖角漸層繞著起點以逆時針掃射的方式建立陰影<br />
*反射性漸層在起點的一側建立相同的鏡像線性漸層<br />
*菱形漸層從菱形圖樣的中央往外建立陰影<br />
====(1)☆線性漸層☆====<br />
*步驟：<br />
*#不用添加svg標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，不會用到href屬性<br />
*#在defs段落中定義漸層,並賦予id<br />
*#用fill='url(#某id)'屬性來引用既有的漸層定義<br />
*linearGradient 線性漸層定義語法說明:<br />
*#漸層標籤中的 100%，指的是整個圖形<br />
*#其中的 id 屬性定出漸層名稱<br />
*#由x1,y1,x2,y2四個屬性決定漸層範圍,以及水平,垂直或角形漸層,四個屬性都以百分比表示：<br />
*##x1,y1,x2,y2屬性決定漸層開始和結束位置,x1,x2以圖形的寬度為準,y1,y2以圖形的高度為準<br />
*##當y1和y2相等,而x1和x2不同時,可創建水平漸層<br />
*##當x1和x2相等,而y1和y2不同時,可創建垂直漸層<br />
*##當x1和x2不同,且y1和y2不同時,可創建角形漸層<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/h.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/v.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/arrow.svg<br />
<br />
====(2)☆放射漸層☆====<br />
*radialGradient 放設漸層定義語法說明:<br />
*#漸層範圍：由cx,cy,r三個屬性決定,三個屬性都以百分比表示,漸層範圍是一個圓或橢圓<br />
*##cx表示範圍中心在圖寬百分之幾的位置<br />
*##cy表示範圍中心在圖高百分之幾的位置<br />
*##r如果圖形寬&高相等則範圍為圓,r代表範圍圓半俓除以圖形寬或高；如果圖形寬&高不相等則範圍為橢圓,r代表範圍橢圓的長短軸半長除以圖形寬或高；注意：r為50%,範圍圓直徑恰等於圖的寬或高<br />
*#設色中心：由fx,fy兩個屬性決定的位置,就是設色為0%的地方,兩個屬性都以百分比表示<br />
*##fx表示設色中心在圖寬百分之幾的位置<br />
*##fy表示設色中心在圖高百分之幾的位置<br />
*##設色100%的地方在範圍圓或範圍橢圓的圓周上<br />
*#設色標籤stop,漸層標籤包住數個stop標籤,每種顏色通過一個stop標籤來規定<br />
*##offset屬性用來定義漸層的開始和結束位置,其100%是指整個漸層範圍<br />
*##stop-color屬性用來定義顏色,也可以做為style的樣式<br />
*##stop-opacity屬性決定透明度,也可以做為style的樣式<br />
*#以ball3.svg為例：漸層範圍為整個圓,因為cx,cy,r都是50% ,而設色中心在中間下方,因為fx='50%' fy='100%' ,此處是stop設為0%的顏色(白色),而範圍圓週邊是stop設為100%的顏色(黑色)<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball1.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball2.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball3.svg<br />
<br />
===8.♪柔焦濾鏡♪===<br />
*濾鏡標籤filter語法說明:<br />
*#其中的id屬性定出濾鏡名稱<br />
*#也可以設width,height,x,y去定濾鏡範圍和起點,如沒設以整個圖形為範圍<br />
*#高斯模糊濾鏡feGaussianBlur：濾鏡標籤包住數種不同效果的濾鏡,高斯模糊濾鏡是最簡單的濾鏡<br />
*#高斯模糊濾鏡主要只有一個參數：stdDeviation(標準差),用來控制模糊的程度,數字越大越模糊,數字為零則是圖片原本的狀態<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/sun.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/waterfall1.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/waterfall2.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/waterfall3.svg<br />
<br />
===9.♪path♪===<br />
*path<br />
*#參數大寫代表絕對座標,小寫代表與前一個座標的相對座標<br />
*#點與點之間&同點的x,y座標之間,用空白間開或用,間開兩者是等價的<br />
*http://www.oxxostudio.tw/articles/201406/svg-04-path-1.html<br />
*http://www.oxxostudio.tw/articles/201406/svg-05-path-2.html<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/path01.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/path02.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/path03.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/path04.svg<br />
<br />
===10.♪動畫♪===<br />
*四標籤：<br />
*#set(開關)<br />
*#animate(屬性連續改變)<br />
*#animateTransform(平移,旋轉,縮放)<br />
*#animateMotion(循跡運動)<br />
*共通語法：將母圖形分拆成開始和結束兩標籤,中間插入動畫標籤<br />
*共通屬性：<br />
*#attributeName：<br />
*##set,animate為某一個母圖形的屬性,from和to就是這個屬性的值將由多少變到多少<br />
*##animateTransform為'transform'另搭配type屬性<br />
*##animateMotion免設此屬性<br />
*#type屬性之值(animateTransform專用)：<br />
*##rotate旋轉,影響屬性from='起始角度,旋轉軸心x座標,旋轉軸心y座標'、to='結束角度,旋轉軸心x座標,旋轉軸心y座標'<br />
*##scale縮放,影響屬性from='x起始倍率,y起始倍率'、to='x結束倍率,y結束倍率'，倍率是自左上原點開始算,如果同組x,y倍率相同,可以只寫一個值<br />
*##translate平移,影響屬性from='起始原點x座標,起始原點y座標'、to='結束原點x座標,結束原點y座標'<br />
*##skewX X軸不動,X軸下方向右歪斜,影響屬性from='起始歪斜角度'、to='結束歪斜角度'<br />
*##skewY Y軸不動,Y軸右方向下歪斜,影響屬性from='起始歪斜角度'、to='結束歪斜角度'<br />
*#begin='幾s'：幾秒開始跑,通常設為0s<br />
*#dur='幾s'：跑一輪要幾秒,可以設為indefinite<br />
*#repeatCount='幾'：要跑幾輪,indefinite代表無限多輪,預設值為1<br />
*#from開始狀態(animate,animateTransform有)<br />
*#to結束狀態(set,animate,animateTransform有)<br />
*#path(animateMotion專用)屬性為移動路徑：由m開始<br />
*#rotate='auto'(animateMotion專用)圖形隨路徑曲度而轉折<br />
*http://jendo.org/~admin/path5.svg<br />
*http://jendo.org/~admin/path6.svg<br />
*https://msdn.microsoft.com/zh-tw/library/gg193979(v=vs.85).aspx<br />
<br />
==♡Inkscape♡==<br />
*inkscape下載,64位元：安裝版(62.7MB)|免安裝版(可攜式)(59.9MB)→下載對應的免安裝版→解壓縮<br />
*素材：<br />
*#org=公共利益用,源軟體（英語：open source software,英文縮寫：OSS，中文也稱：開放原始碼軟體）是一種原始碼可以任意取用的電腦軟體,這種軟體的版權持有人在軟體協定的規定之下保留一部分權利並允許用戶學習&修改&增進提高這款軟體的品質,開源協定通常符合開放原始碼的定義的要求,一些開源軟體被釋出到公有領域,開源軟體常被公開和合作地開發<br />
*#com=商業軟體（英語：Commercial software）是在電腦軟體中被作為商品進行交易的軟體,未必是商用軟體,至2000年代,大多數的軟體都屬於商業軟體,相對於商業軟體,有非商業的專有軟體（Proprietary Software）（但專有軟體中大部份都屬於商業軟體）,可供分享使用的自由軟體（Free Software）&共享軟體（Shareware）&免費軟體（Freeware）等<br />
*Vector/animals<br />
*#選一個圖→下載解壓縮(ai)→解散群組→取出圖檔→調整紙張→匯出點陣圖<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E7%8C%B4%E5%AD%90.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E4%B8%89%E8%A7%92%E9%BE%8D.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E5%9C%96%E6%9B%B8%E9%A4%A8.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E6%91%A9%E5%A4%A9%E8%BC%AA.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E6%97%A5%E6%9C%88%E6%BD%AD.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E6%98%9F%E6%98%9F.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E7%AD%86%E8%A8%98%E6%9C%AC.svg<br />
<br />
==♡GIS♡==<br />
*何謂GIS:地理資訊系統（英語：Geographic Information System,縮寫：GIS）是指在地圖上加上數據或訊息,結合地理學與地圖學,已經廣泛的應用在不同的領域,是用於輸入&儲存&查詢&分析和顯示地理資料的電腦系統,GIS屬於資訊系統的一類,不同在於它能運作和處理地理參照資料,地理參照資料描述地球表面（包括大氣層和較淺的地表下空間）空間要素的位置和屬性,在GIS中的兩種地理資料成分：空間資料,與空間要素幾何特性有關；屬性資料,提供空間要素的資訊<br />
*兩種主要的GIS:<br />
*#google map：google釋出的地圖庫,公布了API使得用戶能夠建立自訂的應用,公開格式,但非公共版權內容<br />
*#OpenStreetMap：(開放街圖，簡稱OSM),於2004年由英國的Steve Coast發起,採用類似Wiki的協作編輯以及開放的授權與格式<br />
*基本框架:比較出名的GIS底層數據框架GDAL<br />
*#地圖的需求:<br />
*##點擊地物,顯示地物的屬性信息和關聯的數據<br />
*##單值&分段專題圖<br />
*##連接業務數據庫獲取最新數據<br />
*##疊加不同地圖<br />
*marks:標點<br />
*overlays:標區域<br />
*課後重點:<br />
*#經緯度,1度=60分,1分=60秒<br />
*#先南北,後東西<br />
*#括號&引號必須成對:<br />
*##所有字和符號都用「英數」&「半形」符號,不可以用全形符號<br />
*##所有的小括號&中括號&大括號&單引號&雙引號都要成對<br />
*##每一對大括號代表一個東西(物件),東西裡面可以包進去更小的東西,東西不一定要取名字,例如：<br />
*###一張地圖<br />
*###一個覆蓋物<br />
*###一個經緯度座標點<br />
*###一個地點標示<br />
*###一個html指示<br />
*##每一對中括號裡面包一群相同的東西,例如：<br />
*###一群marker包成一組,名字叫markers；<br />
*###一群overlay包成一組,名字叫overlays；<br />
*###一群coord(經緯度座標)包成一組,名字叫coords<br />
*##每一對小括號中代表「函式」要作用的對象,現在先不必記它<br />
*#整張圖的性質:<br />
*##調整比例尺的性質：zoom:1~20,1比例尺最大,20比例尺最小<br />
*##標定整張地圖中心點位置的性質：<br />
*###latitude:緯度,十進位<br />
*###longitude:經度,十進位<br />
*###address:地址,如：土耳其<br />
*##地圖種類：maptype:值加引號有四種選擇：<br />
*###ROADMAP：道路地圖<br />
*###SATELLITE：衛星空照圖<br />
*###HYBRID：道路與空照圖相疊加<br />
*###TERRAIN：地形圖<br />
*##markers：各個地點標示<br />
*##overlays：各個覆蓋物<br />
*#標點:<br />
*##性質的名稱和性質的「值」用「:」連接<br />
*##同一級或同一組的東西並列時,用「,」分開,但是最後一個性質或東西後面不可以加「,」,因為後面沒有東西了<br />
*##HTML中的樣式語法有點像GIS中性質語法,但前者是用「;」間隔開兩組樣式,後者是用「,」間隔開兩組性質或東西<br />
*#markers內參數:<br />
*##整個markers:後面用一個中括號把所有的點包起來,中括號裡面,每一組大括號是一個點<br />
*##第一個marker為整張圖的中心點,優先於整張圖的中心點<br />
*##每一個點內,諸參數如下：<br />
*###address:值為字串,故加引號,可用國名如「台灣」或地址如「台灣新北市三重區捷運路」<br />
*###html:放物件,內含：<br />
*####content:HTML碼<br />
<br />
*google我的地圖:<br />
*#http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/gis1.html<br />
*#http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/GIS2.HTML<br />
*#http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/google.html<br />
*結合我的地圖與GIS:<br />
*#http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E4%BB%A5%E8%89%B2%E5%88%97.HTML<br />
*#http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E6%97%A5%E6%9C%88%E6%BD%AD.html<br />
<br />
==♡圖形計算機♡==<br />
*取得 svgdraw.php<br />
*基本框架<br />
*繪製基本圖形<br />
*函式繪圖<br />
*google 圖形計算機</div>
蕭卉均
http://well-being-ng.net/wiki1231/index.php?title=%E8%A8%8E%E8%AB%96:%E8%B3%87%E8%A8%8A%E5%9F%BA%E7%A4%8E%E6%87%89%E7%94%A8/%E8%95%AD%E5%8D%89%E5%9D%87&diff=37929
討論:資訊基礎應用/蕭卉均
2018-01-16T11:49:07Z
<p>蕭卉均：/* ♡GIS♡ */</p>
<hr />
<div>=ღ完整筆記ღ=<br />
==♡環境&工具♡==<br />
===1.♪環境♪===<br />
*伺服器與域名,伺服器DS216,網址6years.jendo.org<br />
*wifi,區網wifi：jendod&jendoa,密碼:jendo19690929<br />
*網站空間,瀏覽器：firefox,優先於chrome,盡量不用IE<br />
*wiki上的個人頁,filezilla→開啟filezilla,並新增一個站台叫♕DS216+(共用)♕→主機設定:6years.jendo.org→協定:SFTP→使用者:共用→字碼集:UTF-8→連線,然後到♕home/www♕→建自己帳號的連線→可用的文字編輯器,如emeditor→連結filezilla&慣用的文字編輯器：♕編輯/設定/檔案編輯♕，選用♕使用自訂編輯器♕&♕總是使用預設的編輯器♕，並指定編輯器的路徑<br />
*課後重點筆記:<br />
*#table是開始,/table是結束<br />
*#IP:IP4,最多表達到255字,IPV4一般網頁使用,IP6,物聯網用<br />
*#物聯網:簡單說一切事物,得失相兼<br />
*#域名:域名伺服器(HOSTS)<br />
*#AI(人工智慧)<br />
*#big5,早期,只有繁體中文<br />
*#UTF-8,萬國碼<br />
<br />
===2.♪工具與設定♪===<br />
*firefox:Mozilla Firefox（簡稱Firefox）,中文俗稱火狐（中國大陸官方有使用但未註冊為商標）,是一個自由及開放原始碼的網頁瀏覽器,由Mozilla基金會及其子公司Mozilla公司開發<br />
*filezilla:ileZilla是一種快速&可信賴的FTP用戶端以及伺服器端開放原始碼程式,具有多種特色&直覺的介面,FileZilla在2003年11月獲選為SourceForge.net當月最佳推薦專案<br />
*EmEditor:EmEditor是江村軟體公司（Emurasoft,坐落於美國華盛頓州）所開發的一款在Windows平台上運行的文字編輯程式,EmEditor以運作輕巧&敏捷而又功能強大&豐富著稱而得到許多用戶的好評<br />
<br />
==♡HTML&HTTP♡==<br />
*發有者及發明年代:於西元1993年,W3C&WHATWG開發<br />
*HTML:超文件標示語言（英語：HyperText Markup Language,簡稱：HTML）是一種用於建立網頁的標準標示語言,HTML是一種基礎技術常與CSS&JavaScript一起被眾多網站用於設計令人賞心悅目的網頁&網頁應用程式以及行動應用程式的使用者介面<br />
*HTTP:超文本傳輸協定（英文：HyperText Transfer Protocol,縮寫：HTTP）是一種用於分佈式&協作式和超媒體資訊系統的應用層協議,HTTP是全球資訊網的資料通訊的基礎<br />
*xml:可延伸標記式語言（英語：Extensible Markup Language,簡稱：XML）是一種標記式語言,標記指電腦所能理解的資訊符號,通過此種標記,電腦之間可以處理包含各種資訊的文章等<br />
*課後筆記:<br />
*#筆記網頁建設:登入後搜尋{資訊基礎應用/蕭卉均}→點一下，開始編輯→編輯完點儲存頁面<br />
*#色碼表:https://www.toodoo.com/db/color.html<br />
*通訊錄:<br />
*<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
<table class='nicetable'><br />
<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
</table><br />
<br />
==♡ wiki ♡==<br />
*何謂wiki:Wiki是一種在全球資訊網上開放且可供多人協同創作的超文字系統,由沃德·坎寧安於1995年首先開發,沃德·坎寧安將wiki定義為「一種允許一群用戶用簡單的描述來建立和連線一組網頁的社會計算系統」<br />
*CC授權:創用CC授權條款（英語：Creative Commons license,簡稱CC授權）是一種公共版權授權條款,其允許分發受版權保護的作品,一個創用CC授權用於一個作者想給他人分享&使用&甚至創作衍生作品的權利<br />
*wiki語法:http://jendo.synology.me/wiki1231/index.php?title=Wiki_%E5%85%A5%E9%96%80%E8%AA%9E%E6%B3%95<br />
*wiki的word適應:履歷表<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E5%B1%A5%E6%AD%B7%E8%A1%A8.html<br />
==♡CSS♡==<br />
*何謂CSS:層疊樣式表（英語：Cascading Style Sheets,簡寫CSS）又稱串樣式列表&級聯樣式表&串接樣式表&層疊樣式表&階層式樣式表,一種用來為結構化文件（如HTML文件或XML應用）添加樣式（字型、間距和顏色等）的電腦語言,由W3C定義和維護,目前最新版本是CSS2.1，為W3C的推薦標準,CSS3現在已被大部分現代瀏覽器支援,而下一版的CSS4仍在開發中<br />
*用法:限制者才有標章,不限制者沒有標章<br />
*重要語法:<br />
*#Attribution(BY):姓名標示,您（使用者）可以複製&發行&展覽&表演&放映&廣播或通過資訊網路傳播本作品；您必須按照作者或者授權人指定的方式對作品進行姓名標示<br />
*#NonCommercial(NC):非商業性使用,您可以自由複製&散布&展示及演出本作品；您不得為商業目的而使用本作品<br />
*#NoDerivs(ND):禁止改作,您可以自由複製&散布&展示及演出本作品；您不得改變&轉變或更改本作品<br />
*#ShareAlike(SA):相同方式分享,您可以自由複製&散布&展示及演出本作品；若您改變&轉變或更改本作品,僅在遵守與本作品相同的授權條款下,您才能散布由本作品產生的衍生作品<br />
<br />
==♡SVG♡==<br />
===1.♪概述♪===<br />
*何謂SVG:可縮放向量圖形（英語：Scalable Vector Graphics,SVG）是一種基於可延伸標記式語言（XML）,用於描述二維向量圖形的圖形格式,SVG由W3C制定,是一個開放標準<br />
*點陣圖與向量圖的比較(含附檔名):<br />
*#SVG:又為向量圖,特色,放大不毛邊,https://upload.wikimedia.org/wikipedia/commons/5/53/Skull_and_crossbones.svg<br />
*#JPG:又名JEPG,失真,壓縮,http://wportfolio.wzu.edu.tw/blog/attach/995/27995/89/bf_51402_8868906_99219_2yzUdJnLy0AsZ9VdwaKNCA.jpg<br />
*#PNG:不失真,公開格式,https://s-media-cache-ak0.pinimg.com/originals/96/94/ef/9694ef6ecfd562c83e7a445ee9ee19ba.png<br />
*#GIF:可動畫,256色,https://2.bp.blogspot.com/-Ra6UuzwDGQg/WDfdq3X1GjI/AAAAAAAD0gc/MfVErIwBENYRH_DvvFsnThfYp-zVxugEgCLcB/s1600/AS000946_02.gif<br />
*SVG格式具有以下優點:<br />
*#圖檔可讀,易於修改和編輯（理論上如此,但實際上卻是因為各種不同的SVG檔編輯器而可能儲存成不易解讀的SVG檔案）<br />
*#與現有技術可以互動融合,例如,SVG技術本身的動態部分（包括時序控制和動畫）就是基於SMIL標準,另外,SVG檔案還可嵌入JavaScript（嚴格地說，應該是ECMAScript）指令碼來控制SVG物件<br />
*#SVG圖形格式可以方便的建立文字索引,從而實現基於內容的圖像搜尋<br />
*#SVG圖形格式支援多種濾鏡和特殊效果,在不改變圖像內容的前提下可以實現點陣圖格式中類似文字陰影的效果<br />
*#SVG圖形格式可以用來動態生成圖形,例如,可用SVG動態生成具有互動功能的地圖,嵌入網頁中,並顯示給終端用戶<br />
*SVG格式具有以下缺點：<br />
*#如何和已經占有重要市場份額的向量圖形格式Adobe Animate競爭的問題,事實上,Adobe Animate在Flash CC 2014版及以後的版本就都支援直接匯出SVG檔案了<br />
*#SVG的本地執行環境下的廠家支援程度<br />
*#由於原始的SVG檔是遵從XML語法,導致資料採用未壓縮的方式存放,因此相較於其他的向量圖形格式,同樣的檔案內容會比其他的檔案格式稍大,Adobe因此使用gzip壓縮開發出壓縮的SVG檔格式,附檔名為 .svgz, 但此種檔案格式除了Adobe旗下的軟體以外,未被廣泛支援使用<br />
*#舊版的SVG Viewer無法正確顯示出使用新版SVG格式的向量圖形<br />
<br />
===2.♪基本架構♪===<br />
*基本架構:SVG允許3種圖形物件類型：向量圖形,柵格圖像以及文字,圖形物件——包括PNG&JPEG這些柵格圖像——能夠被編組&設計&轉換及整合進先前的彩現物件中,文字可以在任何適用於應用程式的XML命名空間之內,從而提高SVG圖形的搜尋能力和無障礙性,SVG提供的功能集涵蓋了巢狀轉換&裁剪路徑&Alpha通道&濾鏡效果&模板物件以及可延伸性,SVG嚴格遵從XML語法,並用文字格式的描述性語言來描述圖像內容,因此是一種和圖像解析度無關的向量圖形格式,SVG可以實現動態和互動功能,在DOM模型的基礎上,SVG開發設計人員可以利用ECMAScript或者SMIL來進行時序控制或物件的操縱,SVG雖然是文字格式,但是SVG支援利用gzip壓縮演算法減少檔案尺寸,壓縮後的檔案通常用被稱為「SVGZ檔案」<br />
*SVG主要支援以下幾種顯示物件：<br />
*#向量顯示物件,基本向量顯示物件包括矩形&圓&橢圓&多邊形&直線&任意曲線等<br />
*#嵌入式外部圖像,包括PNG&JPEG&SVG等<br />
*#文字物件<br />
*基本樣式:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/arrow.svg<br />
*基本圖形:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/bearFace.svg<br />
<br />
===3.♪文字♪===<br />
*TEXT<br />
*#在「text」標籤開始與結束之間夾字,可用中英文,而使用「屬性」來規定文字的表現,所有的屬性都可以改用樣式來表達<br />
*#可用中文字形：<br />
*##屬性dx和dy基於前一個字的位置去做變化：值可為'10,20,30,40'，字的距離一個比一個更遠<br />
*##屬性x和y標示字的起點：值可為'10,20,30,40'，表示每個字的x或y座標<br />
*##屬性fill控制填入字的顏色,預設黑色<br />
*##屬性stroke控制字描框的顏色,預設 none<br />
*##屬性rotate='30'順時鐘轉30°。rotate='30,60,90,120,150,180,210'指定每個字的轉動角度<br />
*##用style控制字體&字形&尺寸,但顏色是用fill不是用color <br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/text.svg<br />
<br />
===4.♪位移&旋轉&縮放&歪斜♪===<br />
*相關屬性說明：<br />
*#平移變換(translate)：transform="translate(x,y)",即新坐標系的原點在原坐標系的(x,y)處,坐標軸的方向不變<br />
*#旋轉變換(rotate)：transform="rotate(angle cx,cy)",angle代表旋轉角度,預設單位是「度」,順時針為正,逆時針為負,(cx,cy)是旋轉中心所在的坐標,若省略旋轉中心坐標,則預設值是(0,0)<br />
*#伸縮變換(scale)：transform="scale(sx,sy)",sx,sy分別代表x軸方向和y方向拉伸或縮小的比例因子,拉伸：大於1；縮小：小於1,若省略sy，即sy=sx，作等比例縮放<br />
*#歪斜變換(skew)：transform='skewX(x-angle)'或transform='skewY(y-angle)',x-angle,y-angle分別代表沿x軸和y軸歪斜的角度<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/transform.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/bearFace.svg<br />
<br />
===5.♪群組♪===<br />
*步驟:<br />
*#先添加svg標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，其中才有href屬性的定義<br />
*#在defs段落中定義圖形，並賦予id<br />
*#用<use xlink:href='#某id'/>來引用既有的定義<br />
<br />
===6.♪定義一次,引用多次♪===<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/uses.svg<br />
<br />
===7.♪漸層♪===<br />
*漸層和濾鏡如果取中文名稱,瀏覽器還認得,但Inkscape和線上轉檔軟體就會不認得<br />
*「漸層」工具可以在多種顏色之間建立漸層混合,您可以從預設漸層填色中選擇,或是建立自己的漸層填色<br />
*線性漸層沿著直線從起點到終點建立陰影<br />
*放射性漸層沿著圓形圖樣從起點到終點建立陰影<br />
*尖角漸層繞著起點以逆時針掃射的方式建立陰影<br />
*反射性漸層在起點的一側建立相同的鏡像線性漸層<br />
*菱形漸層從菱形圖樣的中央往外建立陰影<br />
====(1)☆線性漸層☆====<br />
*步驟：<br />
*#不用添加svg標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，不會用到href屬性<br />
*#在defs段落中定義漸層,並賦予id<br />
*#用fill='url(#某id)'屬性來引用既有的漸層定義<br />
*linearGradient 線性漸層定義語法說明:<br />
*#漸層標籤中的 100%，指的是整個圖形<br />
*#其中的 id 屬性定出漸層名稱<br />
*#由x1,y1,x2,y2四個屬性決定漸層範圍,以及水平,垂直或角形漸層,四個屬性都以百分比表示：<br />
*##x1,y1,x2,y2屬性決定漸層開始和結束位置,x1,x2以圖形的寬度為準,y1,y2以圖形的高度為準<br />
*##當y1和y2相等,而x1和x2不同時,可創建水平漸層<br />
*##當x1和x2相等,而y1和y2不同時,可創建垂直漸層<br />
*##當x1和x2不同,且y1和y2不同時,可創建角形漸層<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/h.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/v.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/arrow.svg<br />
<br />
====(2)☆放射漸層☆====<br />
*radialGradient 放設漸層定義語法說明:<br />
*#漸層範圍：由cx,cy,r三個屬性決定,三個屬性都以百分比表示,漸層範圍是一個圓或橢圓<br />
*##cx表示範圍中心在圖寬百分之幾的位置<br />
*##cy表示範圍中心在圖高百分之幾的位置<br />
*##r如果圖形寬&高相等則範圍為圓,r代表範圍圓半俓除以圖形寬或高；如果圖形寬&高不相等則範圍為橢圓,r代表範圍橢圓的長短軸半長除以圖形寬或高；注意：r為50%,範圍圓直徑恰等於圖的寬或高<br />
*#設色中心：由fx,fy兩個屬性決定的位置,就是設色為0%的地方,兩個屬性都以百分比表示<br />
*##fx表示設色中心在圖寬百分之幾的位置<br />
*##fy表示設色中心在圖高百分之幾的位置<br />
*##設色100%的地方在範圍圓或範圍橢圓的圓周上<br />
*#設色標籤stop,漸層標籤包住數個stop標籤,每種顏色通過一個stop標籤來規定<br />
*##offset屬性用來定義漸層的開始和結束位置,其100%是指整個漸層範圍<br />
*##stop-color屬性用來定義顏色,也可以做為style的樣式<br />
*##stop-opacity屬性決定透明度,也可以做為style的樣式<br />
*#以ball3.svg為例：漸層範圍為整個圓,因為cx,cy,r都是50% ,而設色中心在中間下方,因為fx='50%' fy='100%' ,此處是stop設為0%的顏色(白色),而範圍圓週邊是stop設為100%的顏色(黑色)<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball1.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball2.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball3.svg<br />
<br />
===8.♪柔焦濾鏡♪===<br />
*濾鏡標籤filter語法說明:<br />
*#其中的id屬性定出濾鏡名稱<br />
*#也可以設width,height,x,y去定濾鏡範圍和起點,如沒設以整個圖形為範圍<br />
*#高斯模糊濾鏡feGaussianBlur：濾鏡標籤包住數種不同效果的濾鏡,高斯模糊濾鏡是最簡單的濾鏡<br />
*#高斯模糊濾鏡主要只有一個參數：stdDeviation(標準差),用來控制模糊的程度,數字越大越模糊,數字為零則是圖片原本的狀態<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/sun.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/waterfall1.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/waterfall2.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/waterfall3.svg<br />
<br />
===9.♪path♪===<br />
*path<br />
*#參數大寫代表絕對座標,小寫代表與前一個座標的相對座標<br />
*#點與點之間&同點的x,y座標之間,用空白間開或用,間開兩者是等價的<br />
*http://www.oxxostudio.tw/articles/201406/svg-04-path-1.html<br />
*http://www.oxxostudio.tw/articles/201406/svg-05-path-2.html<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/path01.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/path02.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/path03.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/path04.svg<br />
<br />
===10.♪動畫♪===<br />
*四標籤：<br />
*#set(開關)<br />
*#animate(屬性連續改變)<br />
*#animateTransform(平移,旋轉,縮放)<br />
*#animateMotion(循跡運動)<br />
*共通語法：將母圖形分拆成開始和結束兩標籤,中間插入動畫標籤<br />
*共通屬性：<br />
*#attributeName：<br />
*##set,animate為某一個母圖形的屬性,from和to就是這個屬性的值將由多少變到多少<br />
*##animateTransform為'transform'另搭配type屬性<br />
*##animateMotion免設此屬性<br />
*#type屬性之值(animateTransform專用)：<br />
*##rotate旋轉,影響屬性from='起始角度,旋轉軸心x座標,旋轉軸心y座標'、to='結束角度,旋轉軸心x座標,旋轉軸心y座標'<br />
*##scale縮放,影響屬性from='x起始倍率,y起始倍率'、to='x結束倍率,y結束倍率'，倍率是自左上原點開始算,如果同組x,y倍率相同,可以只寫一個值<br />
*##translate平移,影響屬性from='起始原點x座標,起始原點y座標'、to='結束原點x座標,結束原點y座標'<br />
*##skewX X軸不動,X軸下方向右歪斜,影響屬性from='起始歪斜角度'、to='結束歪斜角度'<br />
*##skewY Y軸不動,Y軸右方向下歪斜,影響屬性from='起始歪斜角度'、to='結束歪斜角度'<br />
*#begin='幾s'：幾秒開始跑,通常設為0s<br />
*#dur='幾s'：跑一輪要幾秒,可以設為indefinite<br />
*#repeatCount='幾'：要跑幾輪,indefinite代表無限多輪,預設值為1<br />
*#from開始狀態(animate,animateTransform有)<br />
*#to結束狀態(set,animate,animateTransform有)<br />
*#path(animateMotion專用)屬性為移動路徑：由m開始<br />
*#rotate='auto'(animateMotion專用)圖形隨路徑曲度而轉折<br />
*http://jendo.org/~admin/path5.svg<br />
*http://jendo.org/~admin/path6.svg<br />
*https://msdn.microsoft.com/zh-tw/library/gg193979(v=vs.85).aspx<br />
<br />
==♡Inkscape♡==<br />
*inkscape下載,64位元：安裝版(62.7MB)|免安裝版(可攜式)(59.9MB)→下載對應的免安裝版→解壓縮<br />
*素材：<br />
*#org=公共利益用,源軟體（英語：open source software,英文縮寫：OSS，中文也稱：開放原始碼軟體）是一種原始碼可以任意取用的電腦軟體,這種軟體的版權持有人在軟體協定的規定之下保留一部分權利並允許用戶學習&修改&增進提高這款軟體的品質,開源協定通常符合開放原始碼的定義的要求,一些開源軟體被釋出到公有領域,開源軟體常被公開和合作地開發<br />
*#com=商業軟體（英語：Commercial software）是在電腦軟體中被作為商品進行交易的軟體,未必是商用軟體,至2000年代,大多數的軟體都屬於商業軟體,相對於商業軟體,有非商業的專有軟體（Proprietary Software）（但專有軟體中大部份都屬於商業軟體）,可供分享使用的自由軟體（Free Software）&共享軟體（Shareware）&免費軟體（Freeware）等<br />
*Vector/animals<br />
*#選一個圖→下載解壓縮(ai)→解散群組→取出圖檔→調整紙張→匯出點陣圖<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E7%8C%B4%E5%AD%90.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E4%B8%89%E8%A7%92%E9%BE%8D.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E5%9C%96%E6%9B%B8%E9%A4%A8.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E6%91%A9%E5%A4%A9%E8%BC%AA.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E6%97%A5%E6%9C%88%E6%BD%AD.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E6%98%9F%E6%98%9F.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E7%AD%86%E8%A8%98%E6%9C%AC.svg<br />
<br />
==♡GIS♡==<br />
*何謂GIS:地理資訊系統（英語：Geographic Information System,縮寫：GIS）是指在地圖上加上數據或訊息,結合地理學與地圖學,已經廣泛的應用在不同的領域,是用於輸入&儲存&查詢&分析和顯示地理資料的電腦系統,GIS屬於資訊系統的一類,不同在於它能運作和處理地理參照資料,地理參照資料描述地球表面（包括大氣層和較淺的地表下空間）空間要素的位置和屬性,在GIS中的兩種地理資料成分：空間資料,與空間要素幾何特性有關；屬性資料,提供空間要素的資訊<br />
*兩種主要的GIS:<br />
*#google map：google釋出的地圖庫,公布了API使得用戶能夠建立自訂的應用,公開格式,但非公共版權內容<br />
*#OpenStreetMap：(開放街圖，簡稱OSM),於2004年由英國的Steve Coast發起,採用類似Wiki的協作編輯以及開放的授權與格式<br />
*基本框架:比較出名的GIS底層數據框架GDAL<br />
*#地圖的需求:<br />
*##點擊地物,顯示地物的屬性信息和關聯的數據<br />
*##單值&分段專題圖<br />
*##連接業務數據庫獲取最新數據<br />
*##疊加不同地圖<br />
*marks:標點<br />
*overlays:標區域<br />
*課後重點:<br />
*#經緯度,1度=60分,1分=60秒<br />
*#先南北,後東西<br />
*#括號&引號必須成對:<br />
*##所有字和符號都用「英數」&「半形」符號,不可以用全形符號<br />
*##所有的小括號&中括號&大括號&單引號&雙引號都要成對<br />
*##每一對大括號代表一個東西(物件),東西裡面可以包進去更小的東西,東西不一定要取名字,例如：<br />
*###一張地圖<br />
*###一個覆蓋物<br />
*###一個經緯度座標點<br />
*###一個地點標示<br />
*###一個html指示<br />
*##每一對中括號裡面包一群相同的東西,例如：<br />
*###一群marker包成一組,名字叫markers；<br />
*###一群overlay包成一組,名字叫overlays；<br />
*###一群coord(經緯度座標)包成一組,名字叫coords<br />
*##每一對小括號中代表「函式」要作用的對象,現在先不必記它<br />
*#整張圖的性質:<br />
*##調整比例尺的性質：zoom:1~20,1比例尺最大,20比例尺最小<br />
*##標定整張地圖中心點位置的性質：<br />
*###latitude:緯度,十進位<br />
*###longitude:經度,十進位<br />
*###address:地址,如：土耳其<br />
*##地圖種類：maptype:值加引號有四種選擇：<br />
*###ROADMAP：道路地圖<br />
*###SATELLITE：衛星空照圖<br />
*###HYBRID：道路與空照圖相疊加<br />
*###TERRAIN：地形圖<br />
*##markers：各個地點標示<br />
*##overlays：各個覆蓋物<br />
*#標點:<br />
*##性質的名稱和性質的「值」用「:」連接<br />
*##同一級或同一組的東西並列時,用「,」分開,但是最後一個性質或東西後面不可以加「,」,因為後面沒有東西了<br />
*##HTML中的樣式語法有點像GIS中性質語法,但前者是用「;」間隔開兩組樣式,後者是用「,」間隔開兩組性質或東西<br />
*#markers內參數:<br />
*##整個markers:後面用一個中括號把所有的點包起來,中括號裡面,每一組大括號是一個點<br />
*##第一個marker為整張圖的中心點,優先於整張圖的中心點<br />
<br />
*google我的地圖:<br />
*#http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/gis1.html<br />
*#http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/GIS2.HTML<br />
*#http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/google.html<br />
*結合我的地圖與GIS:<br />
*#http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E4%BB%A5%E8%89%B2%E5%88%97.HTML<br />
*#http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E6%97%A5%E6%9C%88%E6%BD%AD.html<br />
<br />
==♡圖形計算機♡==<br />
*取得 svgdraw.php<br />
*基本框架<br />
*繪製基本圖形<br />
*函式繪圖<br />
*google 圖形計算機</div>
蕭卉均
http://well-being-ng.net/wiki1231/index.php?title=%E8%A8%8E%E8%AB%96:%E8%B3%87%E8%A8%8A%E5%9F%BA%E7%A4%8E%E6%87%89%E7%94%A8/%E8%95%AD%E5%8D%89%E5%9D%87&diff=37928
討論:資訊基礎應用/蕭卉均
2018-01-16T11:45:54Z
<p>蕭卉均：/* ♡GIS♡ */</p>
<hr />
<div>=ღ完整筆記ღ=<br />
==♡環境&工具♡==<br />
===1.♪環境♪===<br />
*伺服器與域名,伺服器DS216,網址6years.jendo.org<br />
*wifi,區網wifi：jendod&jendoa,密碼:jendo19690929<br />
*網站空間,瀏覽器：firefox,優先於chrome,盡量不用IE<br />
*wiki上的個人頁,filezilla→開啟filezilla,並新增一個站台叫♕DS216+(共用)♕→主機設定:6years.jendo.org→協定:SFTP→使用者:共用→字碼集:UTF-8→連線,然後到♕home/www♕→建自己帳號的連線→可用的文字編輯器,如emeditor→連結filezilla&慣用的文字編輯器：♕編輯/設定/檔案編輯♕，選用♕使用自訂編輯器♕&♕總是使用預設的編輯器♕，並指定編輯器的路徑<br />
*課後重點筆記:<br />
*#table是開始,/table是結束<br />
*#IP:IP4,最多表達到255字,IPV4一般網頁使用,IP6,物聯網用<br />
*#物聯網:簡單說一切事物,得失相兼<br />
*#域名:域名伺服器(HOSTS)<br />
*#AI(人工智慧)<br />
*#big5,早期,只有繁體中文<br />
*#UTF-8,萬國碼<br />
<br />
===2.♪工具與設定♪===<br />
*firefox:Mozilla Firefox（簡稱Firefox）,中文俗稱火狐（中國大陸官方有使用但未註冊為商標）,是一個自由及開放原始碼的網頁瀏覽器,由Mozilla基金會及其子公司Mozilla公司開發<br />
*filezilla:ileZilla是一種快速&可信賴的FTP用戶端以及伺服器端開放原始碼程式,具有多種特色&直覺的介面,FileZilla在2003年11月獲選為SourceForge.net當月最佳推薦專案<br />
*EmEditor:EmEditor是江村軟體公司（Emurasoft,坐落於美國華盛頓州）所開發的一款在Windows平台上運行的文字編輯程式,EmEditor以運作輕巧&敏捷而又功能強大&豐富著稱而得到許多用戶的好評<br />
<br />
==♡HTML&HTTP♡==<br />
*發有者及發明年代:於西元1993年,W3C&WHATWG開發<br />
*HTML:超文件標示語言（英語：HyperText Markup Language,簡稱：HTML）是一種用於建立網頁的標準標示語言,HTML是一種基礎技術常與CSS&JavaScript一起被眾多網站用於設計令人賞心悅目的網頁&網頁應用程式以及行動應用程式的使用者介面<br />
*HTTP:超文本傳輸協定（英文：HyperText Transfer Protocol,縮寫：HTTP）是一種用於分佈式&協作式和超媒體資訊系統的應用層協議,HTTP是全球資訊網的資料通訊的基礎<br />
*xml:可延伸標記式語言（英語：Extensible Markup Language,簡稱：XML）是一種標記式語言,標記指電腦所能理解的資訊符號,通過此種標記,電腦之間可以處理包含各種資訊的文章等<br />
*課後筆記:<br />
*#筆記網頁建設:登入後搜尋{資訊基礎應用/蕭卉均}→點一下，開始編輯→編輯完點儲存頁面<br />
*#色碼表:https://www.toodoo.com/db/color.html<br />
*通訊錄:<br />
*<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
<table class='nicetable'><br />
<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
</table><br />
<br />
==♡ wiki ♡==<br />
*何謂wiki:Wiki是一種在全球資訊網上開放且可供多人協同創作的超文字系統,由沃德·坎寧安於1995年首先開發,沃德·坎寧安將wiki定義為「一種允許一群用戶用簡單的描述來建立和連線一組網頁的社會計算系統」<br />
*CC授權:創用CC授權條款（英語：Creative Commons license,簡稱CC授權）是一種公共版權授權條款,其允許分發受版權保護的作品,一個創用CC授權用於一個作者想給他人分享&使用&甚至創作衍生作品的權利<br />
*wiki語法:http://jendo.synology.me/wiki1231/index.php?title=Wiki_%E5%85%A5%E9%96%80%E8%AA%9E%E6%B3%95<br />
*wiki的word適應:履歷表<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E5%B1%A5%E6%AD%B7%E8%A1%A8.html<br />
==♡CSS♡==<br />
*何謂CSS:層疊樣式表（英語：Cascading Style Sheets,簡寫CSS）又稱串樣式列表&級聯樣式表&串接樣式表&層疊樣式表&階層式樣式表,一種用來為結構化文件（如HTML文件或XML應用）添加樣式（字型、間距和顏色等）的電腦語言,由W3C定義和維護,目前最新版本是CSS2.1，為W3C的推薦標準,CSS3現在已被大部分現代瀏覽器支援,而下一版的CSS4仍在開發中<br />
*用法:限制者才有標章,不限制者沒有標章<br />
*重要語法:<br />
*#Attribution(BY):姓名標示,您（使用者）可以複製&發行&展覽&表演&放映&廣播或通過資訊網路傳播本作品；您必須按照作者或者授權人指定的方式對作品進行姓名標示<br />
*#NonCommercial(NC):非商業性使用,您可以自由複製&散布&展示及演出本作品；您不得為商業目的而使用本作品<br />
*#NoDerivs(ND):禁止改作,您可以自由複製&散布&展示及演出本作品；您不得改變&轉變或更改本作品<br />
*#ShareAlike(SA):相同方式分享,您可以自由複製&散布&展示及演出本作品；若您改變&轉變或更改本作品,僅在遵守與本作品相同的授權條款下,您才能散布由本作品產生的衍生作品<br />
<br />
==♡SVG♡==<br />
===1.♪概述♪===<br />
*何謂SVG:可縮放向量圖形（英語：Scalable Vector Graphics,SVG）是一種基於可延伸標記式語言（XML）,用於描述二維向量圖形的圖形格式,SVG由W3C制定,是一個開放標準<br />
*點陣圖與向量圖的比較(含附檔名):<br />
*#SVG:又為向量圖,特色,放大不毛邊,https://upload.wikimedia.org/wikipedia/commons/5/53/Skull_and_crossbones.svg<br />
*#JPG:又名JEPG,失真,壓縮,http://wportfolio.wzu.edu.tw/blog/attach/995/27995/89/bf_51402_8868906_99219_2yzUdJnLy0AsZ9VdwaKNCA.jpg<br />
*#PNG:不失真,公開格式,https://s-media-cache-ak0.pinimg.com/originals/96/94/ef/9694ef6ecfd562c83e7a445ee9ee19ba.png<br />
*#GIF:可動畫,256色,https://2.bp.blogspot.com/-Ra6UuzwDGQg/WDfdq3X1GjI/AAAAAAAD0gc/MfVErIwBENYRH_DvvFsnThfYp-zVxugEgCLcB/s1600/AS000946_02.gif<br />
*SVG格式具有以下優點:<br />
*#圖檔可讀,易於修改和編輯（理論上如此,但實際上卻是因為各種不同的SVG檔編輯器而可能儲存成不易解讀的SVG檔案）<br />
*#與現有技術可以互動融合,例如,SVG技術本身的動態部分（包括時序控制和動畫）就是基於SMIL標準,另外,SVG檔案還可嵌入JavaScript（嚴格地說，應該是ECMAScript）指令碼來控制SVG物件<br />
*#SVG圖形格式可以方便的建立文字索引,從而實現基於內容的圖像搜尋<br />
*#SVG圖形格式支援多種濾鏡和特殊效果,在不改變圖像內容的前提下可以實現點陣圖格式中類似文字陰影的效果<br />
*#SVG圖形格式可以用來動態生成圖形,例如,可用SVG動態生成具有互動功能的地圖,嵌入網頁中,並顯示給終端用戶<br />
*SVG格式具有以下缺點：<br />
*#如何和已經占有重要市場份額的向量圖形格式Adobe Animate競爭的問題,事實上,Adobe Animate在Flash CC 2014版及以後的版本就都支援直接匯出SVG檔案了<br />
*#SVG的本地執行環境下的廠家支援程度<br />
*#由於原始的SVG檔是遵從XML語法,導致資料採用未壓縮的方式存放,因此相較於其他的向量圖形格式,同樣的檔案內容會比其他的檔案格式稍大,Adobe因此使用gzip壓縮開發出壓縮的SVG檔格式,附檔名為 .svgz, 但此種檔案格式除了Adobe旗下的軟體以外,未被廣泛支援使用<br />
*#舊版的SVG Viewer無法正確顯示出使用新版SVG格式的向量圖形<br />
<br />
===2.♪基本架構♪===<br />
*基本架構:SVG允許3種圖形物件類型：向量圖形,柵格圖像以及文字,圖形物件——包括PNG&JPEG這些柵格圖像——能夠被編組&設計&轉換及整合進先前的彩現物件中,文字可以在任何適用於應用程式的XML命名空間之內,從而提高SVG圖形的搜尋能力和無障礙性,SVG提供的功能集涵蓋了巢狀轉換&裁剪路徑&Alpha通道&濾鏡效果&模板物件以及可延伸性,SVG嚴格遵從XML語法,並用文字格式的描述性語言來描述圖像內容,因此是一種和圖像解析度無關的向量圖形格式,SVG可以實現動態和互動功能,在DOM模型的基礎上,SVG開發設計人員可以利用ECMAScript或者SMIL來進行時序控制或物件的操縱,SVG雖然是文字格式,但是SVG支援利用gzip壓縮演算法減少檔案尺寸,壓縮後的檔案通常用被稱為「SVGZ檔案」<br />
*SVG主要支援以下幾種顯示物件：<br />
*#向量顯示物件,基本向量顯示物件包括矩形&圓&橢圓&多邊形&直線&任意曲線等<br />
*#嵌入式外部圖像,包括PNG&JPEG&SVG等<br />
*#文字物件<br />
*基本樣式:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/arrow.svg<br />
*基本圖形:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/bearFace.svg<br />
<br />
===3.♪文字♪===<br />
*TEXT<br />
*#在「text」標籤開始與結束之間夾字,可用中英文,而使用「屬性」來規定文字的表現,所有的屬性都可以改用樣式來表達<br />
*#可用中文字形：<br />
*##屬性dx和dy基於前一個字的位置去做變化：值可為'10,20,30,40'，字的距離一個比一個更遠<br />
*##屬性x和y標示字的起點：值可為'10,20,30,40'，表示每個字的x或y座標<br />
*##屬性fill控制填入字的顏色,預設黑色<br />
*##屬性stroke控制字描框的顏色,預設 none<br />
*##屬性rotate='30'順時鐘轉30°。rotate='30,60,90,120,150,180,210'指定每個字的轉動角度<br />
*##用style控制字體&字形&尺寸,但顏色是用fill不是用color <br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/text.svg<br />
<br />
===4.♪位移&旋轉&縮放&歪斜♪===<br />
*相關屬性說明：<br />
*#平移變換(translate)：transform="translate(x,y)",即新坐標系的原點在原坐標系的(x,y)處,坐標軸的方向不變<br />
*#旋轉變換(rotate)：transform="rotate(angle cx,cy)",angle代表旋轉角度,預設單位是「度」,順時針為正,逆時針為負,(cx,cy)是旋轉中心所在的坐標,若省略旋轉中心坐標,則預設值是(0,0)<br />
*#伸縮變換(scale)：transform="scale(sx,sy)",sx,sy分別代表x軸方向和y方向拉伸或縮小的比例因子,拉伸：大於1；縮小：小於1,若省略sy，即sy=sx，作等比例縮放<br />
*#歪斜變換(skew)：transform='skewX(x-angle)'或transform='skewY(y-angle)',x-angle,y-angle分別代表沿x軸和y軸歪斜的角度<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/transform.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/bearFace.svg<br />
<br />
===5.♪群組♪===<br />
*步驟:<br />
*#先添加svg標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，其中才有href屬性的定義<br />
*#在defs段落中定義圖形，並賦予id<br />
*#用<use xlink:href='#某id'/>來引用既有的定義<br />
<br />
===6.♪定義一次,引用多次♪===<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/uses.svg<br />
<br />
===7.♪漸層♪===<br />
*漸層和濾鏡如果取中文名稱,瀏覽器還認得,但Inkscape和線上轉檔軟體就會不認得<br />
*「漸層」工具可以在多種顏色之間建立漸層混合,您可以從預設漸層填色中選擇,或是建立自己的漸層填色<br />
*線性漸層沿著直線從起點到終點建立陰影<br />
*放射性漸層沿著圓形圖樣從起點到終點建立陰影<br />
*尖角漸層繞著起點以逆時針掃射的方式建立陰影<br />
*反射性漸層在起點的一側建立相同的鏡像線性漸層<br />
*菱形漸層從菱形圖樣的中央往外建立陰影<br />
====(1)☆線性漸層☆====<br />
*步驟：<br />
*#不用添加svg標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，不會用到href屬性<br />
*#在defs段落中定義漸層,並賦予id<br />
*#用fill='url(#某id)'屬性來引用既有的漸層定義<br />
*linearGradient 線性漸層定義語法說明:<br />
*#漸層標籤中的 100%，指的是整個圖形<br />
*#其中的 id 屬性定出漸層名稱<br />
*#由x1,y1,x2,y2四個屬性決定漸層範圍,以及水平,垂直或角形漸層,四個屬性都以百分比表示：<br />
*##x1,y1,x2,y2屬性決定漸層開始和結束位置,x1,x2以圖形的寬度為準,y1,y2以圖形的高度為準<br />
*##當y1和y2相等,而x1和x2不同時,可創建水平漸層<br />
*##當x1和x2相等,而y1和y2不同時,可創建垂直漸層<br />
*##當x1和x2不同,且y1和y2不同時,可創建角形漸層<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/h.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/v.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/arrow.svg<br />
<br />
====(2)☆放射漸層☆====<br />
*radialGradient 放設漸層定義語法說明:<br />
*#漸層範圍：由cx,cy,r三個屬性決定,三個屬性都以百分比表示,漸層範圍是一個圓或橢圓<br />
*##cx表示範圍中心在圖寬百分之幾的位置<br />
*##cy表示範圍中心在圖高百分之幾的位置<br />
*##r如果圖形寬&高相等則範圍為圓,r代表範圍圓半俓除以圖形寬或高；如果圖形寬&高不相等則範圍為橢圓,r代表範圍橢圓的長短軸半長除以圖形寬或高；注意：r為50%,範圍圓直徑恰等於圖的寬或高<br />
*#設色中心：由fx,fy兩個屬性決定的位置,就是設色為0%的地方,兩個屬性都以百分比表示<br />
*##fx表示設色中心在圖寬百分之幾的位置<br />
*##fy表示設色中心在圖高百分之幾的位置<br />
*##設色100%的地方在範圍圓或範圍橢圓的圓周上<br />
*#設色標籤stop,漸層標籤包住數個stop標籤,每種顏色通過一個stop標籤來規定<br />
*##offset屬性用來定義漸層的開始和結束位置,其100%是指整個漸層範圍<br />
*##stop-color屬性用來定義顏色,也可以做為style的樣式<br />
*##stop-opacity屬性決定透明度,也可以做為style的樣式<br />
*#以ball3.svg為例：漸層範圍為整個圓,因為cx,cy,r都是50% ,而設色中心在中間下方,因為fx='50%' fy='100%' ,此處是stop設為0%的顏色(白色),而範圍圓週邊是stop設為100%的顏色(黑色)<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball1.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball2.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball3.svg<br />
<br />
===8.♪柔焦濾鏡♪===<br />
*濾鏡標籤filter語法說明:<br />
*#其中的id屬性定出濾鏡名稱<br />
*#也可以設width,height,x,y去定濾鏡範圍和起點,如沒設以整個圖形為範圍<br />
*#高斯模糊濾鏡feGaussianBlur：濾鏡標籤包住數種不同效果的濾鏡,高斯模糊濾鏡是最簡單的濾鏡<br />
*#高斯模糊濾鏡主要只有一個參數：stdDeviation(標準差),用來控制模糊的程度,數字越大越模糊,數字為零則是圖片原本的狀態<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/sun.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/waterfall1.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/waterfall2.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/waterfall3.svg<br />
<br />
===9.♪path♪===<br />
*path<br />
*#參數大寫代表絕對座標,小寫代表與前一個座標的相對座標<br />
*#點與點之間&同點的x,y座標之間,用空白間開或用,間開兩者是等價的<br />
*http://www.oxxostudio.tw/articles/201406/svg-04-path-1.html<br />
*http://www.oxxostudio.tw/articles/201406/svg-05-path-2.html<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/path01.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/path02.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/path03.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/path04.svg<br />
<br />
===10.♪動畫♪===<br />
*四標籤：<br />
*#set(開關)<br />
*#animate(屬性連續改變)<br />
*#animateTransform(平移,旋轉,縮放)<br />
*#animateMotion(循跡運動)<br />
*共通語法：將母圖形分拆成開始和結束兩標籤,中間插入動畫標籤<br />
*共通屬性：<br />
*#attributeName：<br />
*##set,animate為某一個母圖形的屬性,from和to就是這個屬性的值將由多少變到多少<br />
*##animateTransform為'transform'另搭配type屬性<br />
*##animateMotion免設此屬性<br />
*#type屬性之值(animateTransform專用)：<br />
*##rotate旋轉,影響屬性from='起始角度,旋轉軸心x座標,旋轉軸心y座標'、to='結束角度,旋轉軸心x座標,旋轉軸心y座標'<br />
*##scale縮放,影響屬性from='x起始倍率,y起始倍率'、to='x結束倍率,y結束倍率'，倍率是自左上原點開始算,如果同組x,y倍率相同,可以只寫一個值<br />
*##translate平移,影響屬性from='起始原點x座標,起始原點y座標'、to='結束原點x座標,結束原點y座標'<br />
*##skewX X軸不動,X軸下方向右歪斜,影響屬性from='起始歪斜角度'、to='結束歪斜角度'<br />
*##skewY Y軸不動,Y軸右方向下歪斜,影響屬性from='起始歪斜角度'、to='結束歪斜角度'<br />
*#begin='幾s'：幾秒開始跑,通常設為0s<br />
*#dur='幾s'：跑一輪要幾秒,可以設為indefinite<br />
*#repeatCount='幾'：要跑幾輪,indefinite代表無限多輪,預設值為1<br />
*#from開始狀態(animate,animateTransform有)<br />
*#to結束狀態(set,animate,animateTransform有)<br />
*#path(animateMotion專用)屬性為移動路徑：由m開始<br />
*#rotate='auto'(animateMotion專用)圖形隨路徑曲度而轉折<br />
*http://jendo.org/~admin/path5.svg<br />
*http://jendo.org/~admin/path6.svg<br />
*https://msdn.microsoft.com/zh-tw/library/gg193979(v=vs.85).aspx<br />
<br />
==♡Inkscape♡==<br />
*inkscape下載,64位元：安裝版(62.7MB)|免安裝版(可攜式)(59.9MB)→下載對應的免安裝版→解壓縮<br />
*素材：<br />
*#org=公共利益用,源軟體（英語：open source software,英文縮寫：OSS，中文也稱：開放原始碼軟體）是一種原始碼可以任意取用的電腦軟體,這種軟體的版權持有人在軟體協定的規定之下保留一部分權利並允許用戶學習&修改&增進提高這款軟體的品質,開源協定通常符合開放原始碼的定義的要求,一些開源軟體被釋出到公有領域,開源軟體常被公開和合作地開發<br />
*#com=商業軟體（英語：Commercial software）是在電腦軟體中被作為商品進行交易的軟體,未必是商用軟體,至2000年代,大多數的軟體都屬於商業軟體,相對於商業軟體,有非商業的專有軟體（Proprietary Software）（但專有軟體中大部份都屬於商業軟體）,可供分享使用的自由軟體（Free Software）&共享軟體（Shareware）&免費軟體（Freeware）等<br />
*Vector/animals<br />
*#選一個圖→下載解壓縮(ai)→解散群組→取出圖檔→調整紙張→匯出點陣圖<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E7%8C%B4%E5%AD%90.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E4%B8%89%E8%A7%92%E9%BE%8D.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E5%9C%96%E6%9B%B8%E9%A4%A8.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E6%91%A9%E5%A4%A9%E8%BC%AA.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E6%97%A5%E6%9C%88%E6%BD%AD.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E6%98%9F%E6%98%9F.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E7%AD%86%E8%A8%98%E6%9C%AC.svg<br />
<br />
==♡GIS♡==<br />
*何謂GIS:地理資訊系統（英語：Geographic Information System,縮寫：GIS）是指在地圖上加上數據或訊息,結合地理學與地圖學,已經廣泛的應用在不同的領域,是用於輸入&儲存&查詢&分析和顯示地理資料的電腦系統,GIS屬於資訊系統的一類,不同在於它能運作和處理地理參照資料,地理參照資料描述地球表面（包括大氣層和較淺的地表下空間）空間要素的位置和屬性,在GIS中的兩種地理資料成分：空間資料,與空間要素幾何特性有關；屬性資料,提供空間要素的資訊<br />
*兩種主要的GIS:<br />
*#google map：google釋出的地圖庫,公布了API使得用戶能夠建立自訂的應用,公開格式,但非公共版權內容<br />
*#OpenStreetMap：(開放街圖，簡稱OSM),於2004年由英國的Steve Coast發起,採用類似Wiki的協作編輯以及開放的授權與格式<br />
*基本框架:比較出名的GIS底層數據框架GDAL<br />
*#地圖的需求:<br />
*##點擊地物,顯示地物的屬性信息和關聯的數據<br />
*##單值&分段專題圖<br />
*##連接業務數據庫獲取最新數據<br />
*##疊加不同地圖<br />
*marks:標點<br />
*overlays:標區域<br />
*課後重點:<br />
*#經緯度,1度=60分,1分=60秒<br />
*#先南北,後東西<br />
*#括號&引號必須成對:<br />
*##所有字和符號都用「英數」&「半形」符號,不可以用全形符號<br />
*##所有的小括號&中括號&大括號&單引號&雙引號都要成對<br />
*##每一對大括號代表一個東西(物件),東西裡面可以包進去更小的東西,東西不一定要取名字,例如：<br />
*###一張地圖<br />
*###一個覆蓋物<br />
*###一個經緯度座標點<br />
*###一個地點標示<br />
*###一個html指示<br />
*##每一對中括號裡面包一群相同的東西,例如：<br />
*###一群marker包成一組,名字叫markers；<br />
*###一群overlay包成一組,名字叫overlays；<br />
*###一群coord(經緯度座標)包成一組,名字叫coords<br />
*##每一對小括號中代表「函式」要作用的對象,現在先不必記它<br />
*#整張圖的性質:<br />
*##調整比例尺的性質：zoom:1~20,1比例尺最大,20比例尺最小<br />
*##標定整張地圖中心點位置的性質：<br />
*###latitude:緯度,十進位<br />
*###longitude:經度,十進位<br />
*###address:地址,如：土耳其<br />
*##地圖種類：maptype:值加引號有四種選擇：<br />
*###ROADMAP：道路地圖<br />
*###SATELLITE：衛星空照圖<br />
*###HYBRID：道路與空照圖相疊加<br />
*###TERRAIN：地形圖<br />
*##markers：各個地點標示<br />
*##overlays：各個覆蓋物<br />
*##標點:<br />
<br />
<br />
*google我的地圖:<br />
*#http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/gis1.html<br />
*#http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/GIS2.HTML<br />
*#http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/google.html<br />
*結合我的地圖與GIS:<br />
*#http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E4%BB%A5%E8%89%B2%E5%88%97.HTML<br />
*#http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E6%97%A5%E6%9C%88%E6%BD%AD.html<br />
<br />
==♡圖形計算機♡==<br />
*取得 svgdraw.php<br />
*基本框架<br />
*繪製基本圖形<br />
*函式繪圖<br />
*google 圖形計算機</div>
蕭卉均
http://well-being-ng.net/wiki1231/index.php?title=%E8%A8%8E%E8%AB%96:%E8%B3%87%E8%A8%8A%E5%9F%BA%E7%A4%8E%E6%87%89%E7%94%A8/%E8%95%AD%E5%8D%89%E5%9D%87&diff=37927
討論:資訊基礎應用/蕭卉均
2018-01-16T11:39:17Z
<p>蕭卉均：/* ♡GIS♡ */</p>
<hr />
<div>=ღ完整筆記ღ=<br />
==♡環境&工具♡==<br />
===1.♪環境♪===<br />
*伺服器與域名,伺服器DS216,網址6years.jendo.org<br />
*wifi,區網wifi：jendod&jendoa,密碼:jendo19690929<br />
*網站空間,瀏覽器：firefox,優先於chrome,盡量不用IE<br />
*wiki上的個人頁,filezilla→開啟filezilla,並新增一個站台叫♕DS216+(共用)♕→主機設定:6years.jendo.org→協定:SFTP→使用者:共用→字碼集:UTF-8→連線,然後到♕home/www♕→建自己帳號的連線→可用的文字編輯器,如emeditor→連結filezilla&慣用的文字編輯器：♕編輯/設定/檔案編輯♕，選用♕使用自訂編輯器♕&♕總是使用預設的編輯器♕，並指定編輯器的路徑<br />
*課後重點筆記:<br />
*#table是開始,/table是結束<br />
*#IP:IP4,最多表達到255字,IPV4一般網頁使用,IP6,物聯網用<br />
*#物聯網:簡單說一切事物,得失相兼<br />
*#域名:域名伺服器(HOSTS)<br />
*#AI(人工智慧)<br />
*#big5,早期,只有繁體中文<br />
*#UTF-8,萬國碼<br />
<br />
===2.♪工具與設定♪===<br />
*firefox:Mozilla Firefox（簡稱Firefox）,中文俗稱火狐（中國大陸官方有使用但未註冊為商標）,是一個自由及開放原始碼的網頁瀏覽器,由Mozilla基金會及其子公司Mozilla公司開發<br />
*filezilla:ileZilla是一種快速&可信賴的FTP用戶端以及伺服器端開放原始碼程式,具有多種特色&直覺的介面,FileZilla在2003年11月獲選為SourceForge.net當月最佳推薦專案<br />
*EmEditor:EmEditor是江村軟體公司（Emurasoft,坐落於美國華盛頓州）所開發的一款在Windows平台上運行的文字編輯程式,EmEditor以運作輕巧&敏捷而又功能強大&豐富著稱而得到許多用戶的好評<br />
<br />
==♡HTML&HTTP♡==<br />
*發有者及發明年代:於西元1993年,W3C&WHATWG開發<br />
*HTML:超文件標示語言（英語：HyperText Markup Language,簡稱：HTML）是一種用於建立網頁的標準標示語言,HTML是一種基礎技術常與CSS&JavaScript一起被眾多網站用於設計令人賞心悅目的網頁&網頁應用程式以及行動應用程式的使用者介面<br />
*HTTP:超文本傳輸協定（英文：HyperText Transfer Protocol,縮寫：HTTP）是一種用於分佈式&協作式和超媒體資訊系統的應用層協議,HTTP是全球資訊網的資料通訊的基礎<br />
*xml:可延伸標記式語言（英語：Extensible Markup Language,簡稱：XML）是一種標記式語言,標記指電腦所能理解的資訊符號,通過此種標記,電腦之間可以處理包含各種資訊的文章等<br />
*課後筆記:<br />
*#筆記網頁建設:登入後搜尋{資訊基礎應用/蕭卉均}→點一下，開始編輯→編輯完點儲存頁面<br />
*#色碼表:https://www.toodoo.com/db/color.html<br />
*通訊錄:<br />
*<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
<table class='nicetable'><br />
<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
</table><br />
<br />
==♡ wiki ♡==<br />
*何謂wiki:Wiki是一種在全球資訊網上開放且可供多人協同創作的超文字系統,由沃德·坎寧安於1995年首先開發,沃德·坎寧安將wiki定義為「一種允許一群用戶用簡單的描述來建立和連線一組網頁的社會計算系統」<br />
*CC授權:創用CC授權條款（英語：Creative Commons license,簡稱CC授權）是一種公共版權授權條款,其允許分發受版權保護的作品,一個創用CC授權用於一個作者想給他人分享&使用&甚至創作衍生作品的權利<br />
*wiki語法:http://jendo.synology.me/wiki1231/index.php?title=Wiki_%E5%85%A5%E9%96%80%E8%AA%9E%E6%B3%95<br />
*wiki的word適應:履歷表<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E5%B1%A5%E6%AD%B7%E8%A1%A8.html<br />
==♡CSS♡==<br />
*何謂CSS:層疊樣式表（英語：Cascading Style Sheets,簡寫CSS）又稱串樣式列表&級聯樣式表&串接樣式表&層疊樣式表&階層式樣式表,一種用來為結構化文件（如HTML文件或XML應用）添加樣式（字型、間距和顏色等）的電腦語言,由W3C定義和維護,目前最新版本是CSS2.1，為W3C的推薦標準,CSS3現在已被大部分現代瀏覽器支援,而下一版的CSS4仍在開發中<br />
*用法:限制者才有標章,不限制者沒有標章<br />
*重要語法:<br />
*#Attribution(BY):姓名標示,您（使用者）可以複製&發行&展覽&表演&放映&廣播或通過資訊網路傳播本作品；您必須按照作者或者授權人指定的方式對作品進行姓名標示<br />
*#NonCommercial(NC):非商業性使用,您可以自由複製&散布&展示及演出本作品；您不得為商業目的而使用本作品<br />
*#NoDerivs(ND):禁止改作,您可以自由複製&散布&展示及演出本作品；您不得改變&轉變或更改本作品<br />
*#ShareAlike(SA):相同方式分享,您可以自由複製&散布&展示及演出本作品；若您改變&轉變或更改本作品,僅在遵守與本作品相同的授權條款下,您才能散布由本作品產生的衍生作品<br />
<br />
==♡SVG♡==<br />
===1.♪概述♪===<br />
*何謂SVG:可縮放向量圖形（英語：Scalable Vector Graphics,SVG）是一種基於可延伸標記式語言（XML）,用於描述二維向量圖形的圖形格式,SVG由W3C制定,是一個開放標準<br />
*點陣圖與向量圖的比較(含附檔名):<br />
*#SVG:又為向量圖,特色,放大不毛邊,https://upload.wikimedia.org/wikipedia/commons/5/53/Skull_and_crossbones.svg<br />
*#JPG:又名JEPG,失真,壓縮,http://wportfolio.wzu.edu.tw/blog/attach/995/27995/89/bf_51402_8868906_99219_2yzUdJnLy0AsZ9VdwaKNCA.jpg<br />
*#PNG:不失真,公開格式,https://s-media-cache-ak0.pinimg.com/originals/96/94/ef/9694ef6ecfd562c83e7a445ee9ee19ba.png<br />
*#GIF:可動畫,256色,https://2.bp.blogspot.com/-Ra6UuzwDGQg/WDfdq3X1GjI/AAAAAAAD0gc/MfVErIwBENYRH_DvvFsnThfYp-zVxugEgCLcB/s1600/AS000946_02.gif<br />
*SVG格式具有以下優點:<br />
*#圖檔可讀,易於修改和編輯（理論上如此,但實際上卻是因為各種不同的SVG檔編輯器而可能儲存成不易解讀的SVG檔案）<br />
*#與現有技術可以互動融合,例如,SVG技術本身的動態部分（包括時序控制和動畫）就是基於SMIL標準,另外,SVG檔案還可嵌入JavaScript（嚴格地說，應該是ECMAScript）指令碼來控制SVG物件<br />
*#SVG圖形格式可以方便的建立文字索引,從而實現基於內容的圖像搜尋<br />
*#SVG圖形格式支援多種濾鏡和特殊效果,在不改變圖像內容的前提下可以實現點陣圖格式中類似文字陰影的效果<br />
*#SVG圖形格式可以用來動態生成圖形,例如,可用SVG動態生成具有互動功能的地圖,嵌入網頁中,並顯示給終端用戶<br />
*SVG格式具有以下缺點：<br />
*#如何和已經占有重要市場份額的向量圖形格式Adobe Animate競爭的問題,事實上,Adobe Animate在Flash CC 2014版及以後的版本就都支援直接匯出SVG檔案了<br />
*#SVG的本地執行環境下的廠家支援程度<br />
*#由於原始的SVG檔是遵從XML語法,導致資料採用未壓縮的方式存放,因此相較於其他的向量圖形格式,同樣的檔案內容會比其他的檔案格式稍大,Adobe因此使用gzip壓縮開發出壓縮的SVG檔格式,附檔名為 .svgz, 但此種檔案格式除了Adobe旗下的軟體以外,未被廣泛支援使用<br />
*#舊版的SVG Viewer無法正確顯示出使用新版SVG格式的向量圖形<br />
<br />
===2.♪基本架構♪===<br />
*基本架構:SVG允許3種圖形物件類型：向量圖形,柵格圖像以及文字,圖形物件——包括PNG&JPEG這些柵格圖像——能夠被編組&設計&轉換及整合進先前的彩現物件中,文字可以在任何適用於應用程式的XML命名空間之內,從而提高SVG圖形的搜尋能力和無障礙性,SVG提供的功能集涵蓋了巢狀轉換&裁剪路徑&Alpha通道&濾鏡效果&模板物件以及可延伸性,SVG嚴格遵從XML語法,並用文字格式的描述性語言來描述圖像內容,因此是一種和圖像解析度無關的向量圖形格式,SVG可以實現動態和互動功能,在DOM模型的基礎上,SVG開發設計人員可以利用ECMAScript或者SMIL來進行時序控制或物件的操縱,SVG雖然是文字格式,但是SVG支援利用gzip壓縮演算法減少檔案尺寸,壓縮後的檔案通常用被稱為「SVGZ檔案」<br />
*SVG主要支援以下幾種顯示物件：<br />
*#向量顯示物件,基本向量顯示物件包括矩形&圓&橢圓&多邊形&直線&任意曲線等<br />
*#嵌入式外部圖像,包括PNG&JPEG&SVG等<br />
*#文字物件<br />
*基本樣式:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/arrow.svg<br />
*基本圖形:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/bearFace.svg<br />
<br />
===3.♪文字♪===<br />
*TEXT<br />
*#在「text」標籤開始與結束之間夾字,可用中英文,而使用「屬性」來規定文字的表現,所有的屬性都可以改用樣式來表達<br />
*#可用中文字形：<br />
*##屬性dx和dy基於前一個字的位置去做變化：值可為'10,20,30,40'，字的距離一個比一個更遠<br />
*##屬性x和y標示字的起點：值可為'10,20,30,40'，表示每個字的x或y座標<br />
*##屬性fill控制填入字的顏色,預設黑色<br />
*##屬性stroke控制字描框的顏色,預設 none<br />
*##屬性rotate='30'順時鐘轉30°。rotate='30,60,90,120,150,180,210'指定每個字的轉動角度<br />
*##用style控制字體&字形&尺寸,但顏色是用fill不是用color <br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/text.svg<br />
<br />
===4.♪位移&旋轉&縮放&歪斜♪===<br />
*相關屬性說明：<br />
*#平移變換(translate)：transform="translate(x,y)",即新坐標系的原點在原坐標系的(x,y)處,坐標軸的方向不變<br />
*#旋轉變換(rotate)：transform="rotate(angle cx,cy)",angle代表旋轉角度,預設單位是「度」,順時針為正,逆時針為負,(cx,cy)是旋轉中心所在的坐標,若省略旋轉中心坐標,則預設值是(0,0)<br />
*#伸縮變換(scale)：transform="scale(sx,sy)",sx,sy分別代表x軸方向和y方向拉伸或縮小的比例因子,拉伸：大於1；縮小：小於1,若省略sy，即sy=sx，作等比例縮放<br />
*#歪斜變換(skew)：transform='skewX(x-angle)'或transform='skewY(y-angle)',x-angle,y-angle分別代表沿x軸和y軸歪斜的角度<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/transform.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/bearFace.svg<br />
<br />
===5.♪群組♪===<br />
*步驟:<br />
*#先添加svg標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，其中才有href屬性的定義<br />
*#在defs段落中定義圖形，並賦予id<br />
*#用<use xlink:href='#某id'/>來引用既有的定義<br />
<br />
===6.♪定義一次,引用多次♪===<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/uses.svg<br />
<br />
===7.♪漸層♪===<br />
*漸層和濾鏡如果取中文名稱,瀏覽器還認得,但Inkscape和線上轉檔軟體就會不認得<br />
*「漸層」工具可以在多種顏色之間建立漸層混合,您可以從預設漸層填色中選擇,或是建立自己的漸層填色<br />
*線性漸層沿著直線從起點到終點建立陰影<br />
*放射性漸層沿著圓形圖樣從起點到終點建立陰影<br />
*尖角漸層繞著起點以逆時針掃射的方式建立陰影<br />
*反射性漸層在起點的一側建立相同的鏡像線性漸層<br />
*菱形漸層從菱形圖樣的中央往外建立陰影<br />
====(1)☆線性漸層☆====<br />
*步驟：<br />
*#不用添加svg標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，不會用到href屬性<br />
*#在defs段落中定義漸層,並賦予id<br />
*#用fill='url(#某id)'屬性來引用既有的漸層定義<br />
*linearGradient 線性漸層定義語法說明:<br />
*#漸層標籤中的 100%，指的是整個圖形<br />
*#其中的 id 屬性定出漸層名稱<br />
*#由x1,y1,x2,y2四個屬性決定漸層範圍,以及水平,垂直或角形漸層,四個屬性都以百分比表示：<br />
*##x1,y1,x2,y2屬性決定漸層開始和結束位置,x1,x2以圖形的寬度為準,y1,y2以圖形的高度為準<br />
*##當y1和y2相等,而x1和x2不同時,可創建水平漸層<br />
*##當x1和x2相等,而y1和y2不同時,可創建垂直漸層<br />
*##當x1和x2不同,且y1和y2不同時,可創建角形漸層<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/h.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/v.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/arrow.svg<br />
<br />
====(2)☆放射漸層☆====<br />
*radialGradient 放設漸層定義語法說明:<br />
*#漸層範圍：由cx,cy,r三個屬性決定,三個屬性都以百分比表示,漸層範圍是一個圓或橢圓<br />
*##cx表示範圍中心在圖寬百分之幾的位置<br />
*##cy表示範圍中心在圖高百分之幾的位置<br />
*##r如果圖形寬&高相等則範圍為圓,r代表範圍圓半俓除以圖形寬或高；如果圖形寬&高不相等則範圍為橢圓,r代表範圍橢圓的長短軸半長除以圖形寬或高；注意：r為50%,範圍圓直徑恰等於圖的寬或高<br />
*#設色中心：由fx,fy兩個屬性決定的位置,就是設色為0%的地方,兩個屬性都以百分比表示<br />
*##fx表示設色中心在圖寬百分之幾的位置<br />
*##fy表示設色中心在圖高百分之幾的位置<br />
*##設色100%的地方在範圍圓或範圍橢圓的圓周上<br />
*#設色標籤stop,漸層標籤包住數個stop標籤,每種顏色通過一個stop標籤來規定<br />
*##offset屬性用來定義漸層的開始和結束位置,其100%是指整個漸層範圍<br />
*##stop-color屬性用來定義顏色,也可以做為style的樣式<br />
*##stop-opacity屬性決定透明度,也可以做為style的樣式<br />
*#以ball3.svg為例：漸層範圍為整個圓,因為cx,cy,r都是50% ,而設色中心在中間下方,因為fx='50%' fy='100%' ,此處是stop設為0%的顏色(白色),而範圍圓週邊是stop設為100%的顏色(黑色)<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball1.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball2.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball3.svg<br />
<br />
===8.♪柔焦濾鏡♪===<br />
*濾鏡標籤filter語法說明:<br />
*#其中的id屬性定出濾鏡名稱<br />
*#也可以設width,height,x,y去定濾鏡範圍和起點,如沒設以整個圖形為範圍<br />
*#高斯模糊濾鏡feGaussianBlur：濾鏡標籤包住數種不同效果的濾鏡,高斯模糊濾鏡是最簡單的濾鏡<br />
*#高斯模糊濾鏡主要只有一個參數：stdDeviation(標準差),用來控制模糊的程度,數字越大越模糊,數字為零則是圖片原本的狀態<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/sun.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/waterfall1.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/waterfall2.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/waterfall3.svg<br />
<br />
===9.♪path♪===<br />
*path<br />
*#參數大寫代表絕對座標,小寫代表與前一個座標的相對座標<br />
*#點與點之間&同點的x,y座標之間,用空白間開或用,間開兩者是等價的<br />
*http://www.oxxostudio.tw/articles/201406/svg-04-path-1.html<br />
*http://www.oxxostudio.tw/articles/201406/svg-05-path-2.html<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/path01.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/path02.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/path03.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/path04.svg<br />
<br />
===10.♪動畫♪===<br />
*四標籤：<br />
*#set(開關)<br />
*#animate(屬性連續改變)<br />
*#animateTransform(平移,旋轉,縮放)<br />
*#animateMotion(循跡運動)<br />
*共通語法：將母圖形分拆成開始和結束兩標籤,中間插入動畫標籤<br />
*共通屬性：<br />
*#attributeName：<br />
*##set,animate為某一個母圖形的屬性,from和to就是這個屬性的值將由多少變到多少<br />
*##animateTransform為'transform'另搭配type屬性<br />
*##animateMotion免設此屬性<br />
*#type屬性之值(animateTransform專用)：<br />
*##rotate旋轉,影響屬性from='起始角度,旋轉軸心x座標,旋轉軸心y座標'、to='結束角度,旋轉軸心x座標,旋轉軸心y座標'<br />
*##scale縮放,影響屬性from='x起始倍率,y起始倍率'、to='x結束倍率,y結束倍率'，倍率是自左上原點開始算,如果同組x,y倍率相同,可以只寫一個值<br />
*##translate平移,影響屬性from='起始原點x座標,起始原點y座標'、to='結束原點x座標,結束原點y座標'<br />
*##skewX X軸不動,X軸下方向右歪斜,影響屬性from='起始歪斜角度'、to='結束歪斜角度'<br />
*##skewY Y軸不動,Y軸右方向下歪斜,影響屬性from='起始歪斜角度'、to='結束歪斜角度'<br />
*#begin='幾s'：幾秒開始跑,通常設為0s<br />
*#dur='幾s'：跑一輪要幾秒,可以設為indefinite<br />
*#repeatCount='幾'：要跑幾輪,indefinite代表無限多輪,預設值為1<br />
*#from開始狀態(animate,animateTransform有)<br />
*#to結束狀態(set,animate,animateTransform有)<br />
*#path(animateMotion專用)屬性為移動路徑：由m開始<br />
*#rotate='auto'(animateMotion專用)圖形隨路徑曲度而轉折<br />
*http://jendo.org/~admin/path5.svg<br />
*http://jendo.org/~admin/path6.svg<br />
*https://msdn.microsoft.com/zh-tw/library/gg193979(v=vs.85).aspx<br />
<br />
==♡Inkscape♡==<br />
*inkscape下載,64位元：安裝版(62.7MB)|免安裝版(可攜式)(59.9MB)→下載對應的免安裝版→解壓縮<br />
*素材：<br />
*#org=公共利益用,源軟體（英語：open source software,英文縮寫：OSS，中文也稱：開放原始碼軟體）是一種原始碼可以任意取用的電腦軟體,這種軟體的版權持有人在軟體協定的規定之下保留一部分權利並允許用戶學習&修改&增進提高這款軟體的品質,開源協定通常符合開放原始碼的定義的要求,一些開源軟體被釋出到公有領域,開源軟體常被公開和合作地開發<br />
*#com=商業軟體（英語：Commercial software）是在電腦軟體中被作為商品進行交易的軟體,未必是商用軟體,至2000年代,大多數的軟體都屬於商業軟體,相對於商業軟體,有非商業的專有軟體（Proprietary Software）（但專有軟體中大部份都屬於商業軟體）,可供分享使用的自由軟體（Free Software）&共享軟體（Shareware）&免費軟體（Freeware）等<br />
*Vector/animals<br />
*#選一個圖→下載解壓縮(ai)→解散群組→取出圖檔→調整紙張→匯出點陣圖<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E7%8C%B4%E5%AD%90.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E4%B8%89%E8%A7%92%E9%BE%8D.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E5%9C%96%E6%9B%B8%E9%A4%A8.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E6%91%A9%E5%A4%A9%E8%BC%AA.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E6%97%A5%E6%9C%88%E6%BD%AD.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E6%98%9F%E6%98%9F.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E7%AD%86%E8%A8%98%E6%9C%AC.svg<br />
<br />
==♡GIS♡==<br />
*何謂GIS:地理資訊系統（英語：Geographic Information System,縮寫：GIS）是指在地圖上加上數據或訊息,結合地理學與地圖學,已經廣泛的應用在不同的領域,是用於輸入&儲存&查詢&分析和顯示地理資料的電腦系統,GIS屬於資訊系統的一類,不同在於它能運作和處理地理參照資料,地理參照資料描述地球表面（包括大氣層和較淺的地表下空間）空間要素的位置和屬性,在GIS中的兩種地理資料成分：空間資料,與空間要素幾何特性有關；屬性資料,提供空間要素的資訊<br />
*兩種主要的GIS:<br />
*#google map：google釋出的地圖庫,公布了API使得用戶能夠建立自訂的應用,公開格式,但非公共版權內容<br />
*#OpenStreetMap：(開放街圖，簡稱OSM),於2004年由英國的Steve Coast發起,採用類似Wiki的協作編輯以及開放的授權與格式<br />
*基本框架:比較出名的GIS底層數據框架GDAL<br />
*#地圖的需求:<br />
*##點擊地物,顯示地物的屬性信息和關聯的數據<br />
*##單值&分段專題圖<br />
*##連接業務數據庫獲取最新數據<br />
*##疊加不同地圖<br />
*marks:標點<br />
*overlays:標區域<br />
*課後重點:<br />
*#經緯度,1度=60分,1分=60秒<br />
*#先南北,後東西<br />
*#括號&引號必須成對:<br />
*##所有字和符號都用「英數」&「半形」符號,不可以用全形符號<br />
*##所有的小括號&中括號&大括號&單引號&雙引號都要成對<br />
*##每一對大括號代表一個東西(物件),東西裡面可以包進去更小的東西,東西不一定要取名字,例如：<br />
*###一張地圖<br />
*google我的地圖:<br />
*#http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/gis1.html<br />
*#http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/GIS2.HTML<br />
*#http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/google.html<br />
*結合我的地圖與GIS:<br />
*#http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E4%BB%A5%E8%89%B2%E5%88%97.HTML<br />
*#http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E6%97%A5%E6%9C%88%E6%BD%AD.html<br />
<br />
==♡圖形計算機♡==<br />
*取得 svgdraw.php<br />
*基本框架<br />
*繪製基本圖形<br />
*函式繪圖<br />
*google 圖形計算機</div>
蕭卉均
http://well-being-ng.net/wiki1231/index.php?title=%E8%B3%87%E8%A8%8A%E5%9F%BA%E7%A4%8E%E6%87%89%E7%94%A8/%E8%95%AD%E5%8D%89%E5%9D%87&diff=37926
資訊基礎應用/蕭卉均
2018-01-16T11:28:44Z
<p>蕭卉均：/* 1月2日 */</p>
<hr />
<div>[[分類:資訊基礎應用]]<br />
=學習筆記=<br />
===9月5日===<br />
*table是開始，/table是結束<br />
*IP<br />
*#IP4，最多表達到255字，IPV4一般網頁使用<br />
*#IP6，物聯網用<br />
*物聯網<br />
*#物聯網簡單說一切事物，得失相兼<br />
*域名<br />
*#域名伺服器(HOSTS)<br />
*AI(人工智慧)<br />
*FZ<br />
*#調整 C:\Windows\System32\drivers\etc\hosts，新增一行「192.168.4.2 6years.jendo.org」，下課前#拿掉<br />
*#FZ:編輯>設定>檔案編輯>使用自訂編輯> Programs>Copy>EmEditor>總是使用預設編輯<br />
*#big5，早期，只有繁體中文<br />
*#UTF-8，萬國碼<br />
<br />
===9月12日===<br />
*筆記網頁建設<br />
*#登入後搜尋{資訊基礎應用/蕭卉均}<br />
*#點一下，開始編輯<br />
*#編輯完點儲存頁面<br />
*通訊錄<br />
*#<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
*#網頁表格<br />
<table class='nicetable'><br />
<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
</table><br />
*顏色<br />
<table border=1><br />
<tr><td>紅色</td><td>foo</td><td>綠色</td><td>ofo</td></tr><br />
<tr><td>藍色</td><td>oof</td><td>白色</td><td>fff</td></tr><br />
<tr><td>黑色</td><td>ooo</td><td>灰色</td><td>aaa</td></tr><br />
</table border=1><br />
*borde=1.px(邊框)<br />
*style(樣式)<br />
*collapse(崩塌)<br />
*solid(實線)<br />
<br />
===9月19日===<br />
*重點整理<br />
<table border=1><br />
<tr><td>Td</td><td>標籤</td></tr><br />
<tr><td>Style&class</td><td>屬性</td></tr><br />
<tr><td>Style</td><td>樣式</td></tr><br />
<tr><td>#XXX</td><td>指定XXX</td></tr><br />
</table border=1><br />
*網頁顏色修改<br />
*# border:blue solid 2px;<br />
*ID<br />
*#ID='ABC'，指定特有英文，能針對段落修改<br />
*CSS<br />
*#https://zh.wikipedia.org/wiki/%E5%B1%82%E5%8F%A0%E6%A0%B7%E5%BC%8F%E8%A1%A8<br />
<br />
===9月26日===<br />
*wiki<br />
*#分享式合作<br />
*#Wikipeida是Alexa流量統計前幾名唯一屬於公益性質的網站，其他皆是商業性的公司。<br />
*共享私人飛機<br />
*#http://hk.bbwc.cn/mjyugm.html<br />
*口決<br />
*#井號、星號、等號、中括號；用空白行分段<br />
*圖照的引用<br />
[[File:Palace of Westminster, London - Feb 2007.jpg|203px]]<br />
*檔案:Go top.gif格式：檔案:檔名|圖長|圖寬|…<br />
*CC<br />
*#CC授權(Creative Commons，簡稱CC)<br />
*#諸標章：CC授權、姓名標示、非商業性、禁止改作、相同方式分享。<br />
*#限制者才有標章，不限制者沒有標章。<br />
*#六種核心授權：1(必須姓名標示)×2(商業、非商業)×3(可改作、不可改作、相同方式分享)。<br />
*''PIXE.=PX''<br />
*WIKI<br />
*#單中括號，A<br />
*#雙中括號，多為圖片用<br />
*圖片檔<br />
*#PNG:不失真，公開格式<br />
*#JPG:又名JEPG，失真，壓縮<br />
*#GIF:可動畫，256色<br />
*#SVG:又為向量圖，特色，放大不毛邊<br />
*#發表權限，公司發表後50年，個人死後50年，美國修改為70年<br />
*文字表現<br />
*#「'''''''…'''''''」代表所夾的字要拉斜。<br />
*#「''''''''…''''''''」代表所夾的字要加粗<br />
*#「{|」表格開始，其後可以加表格屬性；「|}」表格結束<br />
*#&GT；有些服藥與標籤相同，加&GT區隔<br />
===10月3日===<br />
以 word 打開<br />
*#找到「尺規」開關並打開<br />
*#取消「檔案/選項/進階/顯示字元寬度單位」核取方塊<br />
*#找出長寬<br />
*#每 inch 2.54公分，72pt<br />
*#開「履歷表.html」頁<br />
*#在樣式定義中以「@page 某值{…}」設定 css<br />
*可用的定義：<br />
*#size:寬 長;<br />
*#margin:天 右 地 左<br />
*#mso-page-orientation:landscape 橫放<br />
*#mso-header-margin:頁首大小<br />
*#mso-footer-margin:頁尾大小<br />
<br />
===10月10日===<br />
*國慶連假<br />
<br />
===10月17===<br />
*XML(標籤)<br />
*#MARKUP<br />
*#指示<br />
*XML.NS<br />
*#NAME SPACE<br />
*#HTML，註解<br />
*#charset屬性指定HTML文檔的字符編碼<br />
*W3C<br />
*padding(內距)<br />
*#控制區域如 DIV 、 span 、表格的內部距離(例如文字或圖片與邊框的距離)<br />
*#不可以設定負值，這點與 margin 不同<br />
*#padding:auto;：讓瀏覽器自己去設定<br />
*#padding:%;：讓瀏覽器自己去設定，跟邊界元素有關<br />
*margin(邊沿)<br />
*#控制一個區域(例如 DIV 或 span)的外邊界距離，俗稱外距<br />
*#可以設定負値，會使得 margin 設定為負值的元素「疊」到另一個元素上(不過還是要視另一個元素所設定的邊界距離而定)。例如，我們將 A 區塊的 margin-bottom 設為 0 ， B 區塊的 margin-top 設為 -10px ，那麼 B 區塊的文字就會疊到 A 區塊的文字上<br />
*#margin:auto;：讓瀏覽器自己去設定<br />
*#margin:%;：讓瀏覽器自己去設定，跟邊界元素有關<br />
*border(邊框)<br />
*#邊框粗細：用長度表達<br />
*#邊框顏色：可以使用色標準色碼或顏色的英文名稱表達<br />
*#邊框樣式：可以設定實線(solid)、虛線(dashed)、雙實線(double)、連續點(dotted)等<br />
*警號<br />
*#三個數字，紅&綠&藍<br />
*#六個數字，紅紅&綠綠&藍藍<br />
===10月24日===<br />
*svg放大不會不毛邊<br />
*用程式碼構成一張圖~~步驟<br />
*#宣告格式(版本&字格式&是否獨立存在)<br />
*#SVG開始(格式的長寬)<br />
*#SVG結束<br />
*polyline<br />
*polygon<br />
*circle<br />
<br />
===11月7日===<br />
*text.svg<br />
*在「text」標籤開始與結束之間夾字，可用中英文。而使用「屬性」來規定文字的表現，所有的屬性都可以改用樣式來表達。<br />
*可用中文字形：<br />
*#屬性 dx 和 dy 基於前一個字的位置去做變化：值可為'10,20,30,40'，字的距離一個比一個更遠。<br />
*#屬性 x 和 y 標示字的起點：值可為'10,20,30,40'，表示每個字的 x 或 y 座標。<br />
*#屬性 fill 控制填入字的顏色，預設黑色<br />
*#屬性 stroke 控制字描框的顏色，預設 none<br />
*#屬性 rotate='30' 順時鐘轉30°。rotate='30,60,90,120,150,180,210'指定每個字的轉動角度。<br />
*#用 style 控制字體、字形、尺寸，但顏色是用 fill 不是用 color 。<br />
===11月14日===<br />
*今天學到線性漸層<br />
*#漸層和濾鏡如果取中文名稱，瀏覽器還認得，但 Inkscape 和線上轉檔軟體就會不認得<br />
*#在 defs 段落中定義漸層，並賦予 id<br />
*#用 fill='url(#某id)' 屬性來引用既有的漸層定義<br />
*linearGradient 線性漸層定義語法說明:<br />
*#漸層標籤中的 100%，指的是整個圖形<br />
*#其中的 id 屬性定出漸層名稱<br />
*放射漸層<br />
*radialGradient 放設漸層定義語法說明:<br />
*#漸層範圍：由 cx,cy,r 三個屬性決定，三個屬性都以百分比表示，漸層範圍是一個圓或橢圓<br />
*#設色中心：由 fx,fy 兩個屬性決定的位置，就是設色為 0% 的地方，兩個屬性都以百分比表示<br />
*#設色標籤 stop，漸層標籤包住數個 stop 標籤，每種顏色通過一個 stop 標籤來規定<br />
*#以 ball3.svg 為例：漸層範圍為整個圓，因為 cx,cy,r 都是 50% ，而設色中心在中間下方，因為 fx='50%' fy='100%' ，此處是 stop 設為 0% 的顏色(白色)，而範圍圓週邊是 stop 設為 100% 的顏色(黑色)<br />
*柔焦濾鏡<br />
*濾鏡標籤 filter 語法說明:<br />
*#其中的 id 屬性定出濾鏡名稱<br />
*#也可以設 width,height,x,y 去定濾鏡範圍和起點，如沒設以整個圖形為範圍<br />
*#高斯模糊濾鏡 feGaussianBlur ：濾鏡標籤包住數種不同效果的濾鏡，高斯模糊濾鏡是最簡單的濾鏡<br />
*#高斯模糊濾鏡主要只有一個參數：stdDeviation(標準差)，用來控制模糊的程度，數字越大越模糊，數字為零則是圖片原本的狀態<br />
===11月21日===<br />
*共通語法<br />
*#將母圖形分拆成開始和結束兩標籤，中間插入動畫標籤<br />
*共通屬性<br />
*#attributeName<br />
*#type屬性之值(animateTransform專用)<br />
*#begin='幾s'：幾秒開始跑，通常設為 0s<br />
*#dur='幾s'：跑一輪要幾秒，可以設為 indefinite<br />
*#repeatCount='幾'：要跑幾輪，indefinite代表無限多輪，預設值為1<br />
*#from 開始狀態(animate,animateTransform有)<br />
*#to 結束狀態(set,animate,animateTransform有)<br />
*#path(animateMotion專用) 屬性為移動路徑：由 m 開始<br />
*#rotate='auto'(animateMotion專用) 圖形隨路徑曲度而轉折<br />
===11月28日===<br />
*.org，公共利益用<br />
*.com﹐為工商適用<br />
===12月12日===<br />
*google map<br />
*#google釋出的地圖庫，公布了API使得用戶能夠建立自訂的應用。公開格式，但非公共版權內容<br />
*#早期使用美國衛星，現在google公司有自己的衛星<br />
*#用戶可以自訂店面，講白點，幫忙免費做白工，廣告費由google收<br />
*#google map，可以用任何語言收詢到經緯度座標<br />
*OpenStreetMap<br />
*#(開放街圖，簡稱OSM)，於2004年由英國的 Steve Coast 發起，採用類似 Wiki 的協作編輯以及開放的授權與格式<br />
*GIS 相關單字<br />
*ʕ•ᴥ•ʔ✓=w=考試ʕ•ᴥ•ʔ<br />
*#zoom:放大或縮小畫面<br />
*#✓overlay:覆蓋物，GIS中用複數overlays✓<br />
*#✓marker:標記，GIS中代表地點標示，用複數markers✓<br />
*#address:地址<br />
*#latitude:緯度<br />
*#✓longitude:經度✓<br />
*#coord:經緯度座標，GIS中代表地點標示，用複數coords<br />
*#map:地圖<br />
*#type:類別<br />
*#road:道路<br />
*#color:顏色<br />
*#fill:填滿<br />
*#radius:半徑<br />
*#html:超文件<br />
*#content:內容<br />
*#✓popup:跳出✓<br />
*#✓false:假的，不成立✓<br />
*#true:真的，成立<br />
*#✓polyline:多點成線✓<br />
*#✓polygon:多邊形✓<br />
*#✓circle:圓形✓<br />
*#✓rectangle：方形(矩形)✓<br />
*#✓ROADMAP：道路地圖✓<br />
*#SATELLITE：衛星空照圖<br />
*#HYBRID：道路與空照圖相疊加<br />
*#TERRAIN：地形圖<br />
*引用ID，#<br />
*[代表陣列]<br />
===12月19日===<br />
*經緯度，1度=60分，1分=60秒<br />
*先南北，後東西<br />
===12月26日===<br />
*CN,簡體中文<br />
*TW﹐繁體中文<br />
===1月2日===</div>
蕭卉均
http://well-being-ng.net/wiki1231/index.php?title=%E8%A8%8E%E8%AB%96:%E8%B3%87%E8%A8%8A%E5%9F%BA%E7%A4%8E%E6%87%89%E7%94%A8/%E8%95%AD%E5%8D%89%E5%9D%87&diff=37925
討論:資訊基礎應用/蕭卉均
2018-01-16T11:27:15Z
<p>蕭卉均：/* ♡GIS♡ */</p>
<hr />
<div>=ღ完整筆記ღ=<br />
==♡環境&工具♡==<br />
===1.♪環境♪===<br />
*伺服器與域名,伺服器DS216,網址6years.jendo.org<br />
*wifi,區網wifi：jendod&jendoa,密碼:jendo19690929<br />
*網站空間,瀏覽器：firefox,優先於chrome,盡量不用IE<br />
*wiki上的個人頁,filezilla→開啟filezilla,並新增一個站台叫♕DS216+(共用)♕→主機設定:6years.jendo.org→協定:SFTP→使用者:共用→字碼集:UTF-8→連線,然後到♕home/www♕→建自己帳號的連線→可用的文字編輯器,如emeditor→連結filezilla&慣用的文字編輯器：♕編輯/設定/檔案編輯♕，選用♕使用自訂編輯器♕&♕總是使用預設的編輯器♕，並指定編輯器的路徑<br />
*課後重點筆記:<br />
*#table是開始,/table是結束<br />
*#IP:IP4,最多表達到255字,IPV4一般網頁使用,IP6,物聯網用<br />
*#物聯網:簡單說一切事物,得失相兼<br />
*#域名:域名伺服器(HOSTS)<br />
*#AI(人工智慧)<br />
*#big5,早期,只有繁體中文<br />
*#UTF-8,萬國碼<br />
<br />
===2.♪工具與設定♪===<br />
*firefox:Mozilla Firefox（簡稱Firefox）,中文俗稱火狐（中國大陸官方有使用但未註冊為商標）,是一個自由及開放原始碼的網頁瀏覽器,由Mozilla基金會及其子公司Mozilla公司開發<br />
*filezilla:ileZilla是一種快速&可信賴的FTP用戶端以及伺服器端開放原始碼程式,具有多種特色&直覺的介面,FileZilla在2003年11月獲選為SourceForge.net當月最佳推薦專案<br />
*EmEditor:EmEditor是江村軟體公司（Emurasoft,坐落於美國華盛頓州）所開發的一款在Windows平台上運行的文字編輯程式,EmEditor以運作輕巧&敏捷而又功能強大&豐富著稱而得到許多用戶的好評<br />
<br />
==♡HTML&HTTP♡==<br />
*發有者及發明年代:於西元1993年,W3C&WHATWG開發<br />
*HTML:超文件標示語言（英語：HyperText Markup Language,簡稱：HTML）是一種用於建立網頁的標準標示語言,HTML是一種基礎技術常與CSS&JavaScript一起被眾多網站用於設計令人賞心悅目的網頁&網頁應用程式以及行動應用程式的使用者介面<br />
*HTTP:超文本傳輸協定（英文：HyperText Transfer Protocol,縮寫：HTTP）是一種用於分佈式&協作式和超媒體資訊系統的應用層協議,HTTP是全球資訊網的資料通訊的基礎<br />
*xml:可延伸標記式語言（英語：Extensible Markup Language,簡稱：XML）是一種標記式語言,標記指電腦所能理解的資訊符號,通過此種標記,電腦之間可以處理包含各種資訊的文章等<br />
*課後筆記:<br />
*#筆記網頁建設:登入後搜尋{資訊基礎應用/蕭卉均}→點一下，開始編輯→編輯完點儲存頁面<br />
*#色碼表:https://www.toodoo.com/db/color.html<br />
*通訊錄:<br />
*<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
<table class='nicetable'><br />
<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
</table><br />
<br />
==♡ wiki ♡==<br />
*何謂wiki:Wiki是一種在全球資訊網上開放且可供多人協同創作的超文字系統,由沃德·坎寧安於1995年首先開發,沃德·坎寧安將wiki定義為「一種允許一群用戶用簡單的描述來建立和連線一組網頁的社會計算系統」<br />
*CC授權:創用CC授權條款（英語：Creative Commons license,簡稱CC授權）是一種公共版權授權條款,其允許分發受版權保護的作品,一個創用CC授權用於一個作者想給他人分享&使用&甚至創作衍生作品的權利<br />
*wiki語法:http://jendo.synology.me/wiki1231/index.php?title=Wiki_%E5%85%A5%E9%96%80%E8%AA%9E%E6%B3%95<br />
*wiki的word適應:履歷表<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E5%B1%A5%E6%AD%B7%E8%A1%A8.html<br />
==♡CSS♡==<br />
*何謂CSS:層疊樣式表（英語：Cascading Style Sheets,簡寫CSS）又稱串樣式列表&級聯樣式表&串接樣式表&層疊樣式表&階層式樣式表,一種用來為結構化文件（如HTML文件或XML應用）添加樣式（字型、間距和顏色等）的電腦語言,由W3C定義和維護,目前最新版本是CSS2.1，為W3C的推薦標準,CSS3現在已被大部分現代瀏覽器支援,而下一版的CSS4仍在開發中<br />
*用法:限制者才有標章,不限制者沒有標章<br />
*重要語法:<br />
*#Attribution(BY):姓名標示,您（使用者）可以複製&發行&展覽&表演&放映&廣播或通過資訊網路傳播本作品；您必須按照作者或者授權人指定的方式對作品進行姓名標示<br />
*#NonCommercial(NC):非商業性使用,您可以自由複製&散布&展示及演出本作品；您不得為商業目的而使用本作品<br />
*#NoDerivs(ND):禁止改作,您可以自由複製&散布&展示及演出本作品；您不得改變&轉變或更改本作品<br />
*#ShareAlike(SA):相同方式分享,您可以自由複製&散布&展示及演出本作品；若您改變&轉變或更改本作品,僅在遵守與本作品相同的授權條款下,您才能散布由本作品產生的衍生作品<br />
<br />
==♡SVG♡==<br />
===1.♪概述♪===<br />
*何謂SVG:可縮放向量圖形（英語：Scalable Vector Graphics,SVG）是一種基於可延伸標記式語言（XML）,用於描述二維向量圖形的圖形格式,SVG由W3C制定,是一個開放標準<br />
*點陣圖與向量圖的比較(含附檔名):<br />
*#SVG:又為向量圖,特色,放大不毛邊,https://upload.wikimedia.org/wikipedia/commons/5/53/Skull_and_crossbones.svg<br />
*#JPG:又名JEPG,失真,壓縮,http://wportfolio.wzu.edu.tw/blog/attach/995/27995/89/bf_51402_8868906_99219_2yzUdJnLy0AsZ9VdwaKNCA.jpg<br />
*#PNG:不失真,公開格式,https://s-media-cache-ak0.pinimg.com/originals/96/94/ef/9694ef6ecfd562c83e7a445ee9ee19ba.png<br />
*#GIF:可動畫,256色,https://2.bp.blogspot.com/-Ra6UuzwDGQg/WDfdq3X1GjI/AAAAAAAD0gc/MfVErIwBENYRH_DvvFsnThfYp-zVxugEgCLcB/s1600/AS000946_02.gif<br />
*SVG格式具有以下優點:<br />
*#圖檔可讀,易於修改和編輯（理論上如此,但實際上卻是因為各種不同的SVG檔編輯器而可能儲存成不易解讀的SVG檔案）<br />
*#與現有技術可以互動融合,例如,SVG技術本身的動態部分（包括時序控制和動畫）就是基於SMIL標準,另外,SVG檔案還可嵌入JavaScript（嚴格地說，應該是ECMAScript）指令碼來控制SVG物件<br />
*#SVG圖形格式可以方便的建立文字索引,從而實現基於內容的圖像搜尋<br />
*#SVG圖形格式支援多種濾鏡和特殊效果,在不改變圖像內容的前提下可以實現點陣圖格式中類似文字陰影的效果<br />
*#SVG圖形格式可以用來動態生成圖形,例如,可用SVG動態生成具有互動功能的地圖,嵌入網頁中,並顯示給終端用戶<br />
*SVG格式具有以下缺點：<br />
*#如何和已經占有重要市場份額的向量圖形格式Adobe Animate競爭的問題,事實上,Adobe Animate在Flash CC 2014版及以後的版本就都支援直接匯出SVG檔案了<br />
*#SVG的本地執行環境下的廠家支援程度<br />
*#由於原始的SVG檔是遵從XML語法,導致資料採用未壓縮的方式存放,因此相較於其他的向量圖形格式,同樣的檔案內容會比其他的檔案格式稍大,Adobe因此使用gzip壓縮開發出壓縮的SVG檔格式,附檔名為 .svgz, 但此種檔案格式除了Adobe旗下的軟體以外,未被廣泛支援使用<br />
*#舊版的SVG Viewer無法正確顯示出使用新版SVG格式的向量圖形<br />
<br />
===2.♪基本架構♪===<br />
*基本架構:SVG允許3種圖形物件類型：向量圖形,柵格圖像以及文字,圖形物件——包括PNG&JPEG這些柵格圖像——能夠被編組&設計&轉換及整合進先前的彩現物件中,文字可以在任何適用於應用程式的XML命名空間之內,從而提高SVG圖形的搜尋能力和無障礙性,SVG提供的功能集涵蓋了巢狀轉換&裁剪路徑&Alpha通道&濾鏡效果&模板物件以及可延伸性,SVG嚴格遵從XML語法,並用文字格式的描述性語言來描述圖像內容,因此是一種和圖像解析度無關的向量圖形格式,SVG可以實現動態和互動功能,在DOM模型的基礎上,SVG開發設計人員可以利用ECMAScript或者SMIL來進行時序控制或物件的操縱,SVG雖然是文字格式,但是SVG支援利用gzip壓縮演算法減少檔案尺寸,壓縮後的檔案通常用被稱為「SVGZ檔案」<br />
*SVG主要支援以下幾種顯示物件：<br />
*#向量顯示物件,基本向量顯示物件包括矩形&圓&橢圓&多邊形&直線&任意曲線等<br />
*#嵌入式外部圖像,包括PNG&JPEG&SVG等<br />
*#文字物件<br />
*基本樣式:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/arrow.svg<br />
*基本圖形:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/bearFace.svg<br />
<br />
===3.♪文字♪===<br />
*TEXT<br />
*#在「text」標籤開始與結束之間夾字,可用中英文,而使用「屬性」來規定文字的表現,所有的屬性都可以改用樣式來表達<br />
*#可用中文字形：<br />
*##屬性dx和dy基於前一個字的位置去做變化：值可為'10,20,30,40'，字的距離一個比一個更遠<br />
*##屬性x和y標示字的起點：值可為'10,20,30,40'，表示每個字的x或y座標<br />
*##屬性fill控制填入字的顏色,預設黑色<br />
*##屬性stroke控制字描框的顏色,預設 none<br />
*##屬性rotate='30'順時鐘轉30°。rotate='30,60,90,120,150,180,210'指定每個字的轉動角度<br />
*##用style控制字體&字形&尺寸,但顏色是用fill不是用color <br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/text.svg<br />
<br />
===4.♪位移&旋轉&縮放&歪斜♪===<br />
*相關屬性說明：<br />
*#平移變換(translate)：transform="translate(x,y)",即新坐標系的原點在原坐標系的(x,y)處,坐標軸的方向不變<br />
*#旋轉變換(rotate)：transform="rotate(angle cx,cy)",angle代表旋轉角度,預設單位是「度」,順時針為正,逆時針為負,(cx,cy)是旋轉中心所在的坐標,若省略旋轉中心坐標,則預設值是(0,0)<br />
*#伸縮變換(scale)：transform="scale(sx,sy)",sx,sy分別代表x軸方向和y方向拉伸或縮小的比例因子,拉伸：大於1；縮小：小於1,若省略sy，即sy=sx，作等比例縮放<br />
*#歪斜變換(skew)：transform='skewX(x-angle)'或transform='skewY(y-angle)',x-angle,y-angle分別代表沿x軸和y軸歪斜的角度<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/transform.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/bearFace.svg<br />
<br />
===5.♪群組♪===<br />
*步驟:<br />
*#先添加svg標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，其中才有href屬性的定義<br />
*#在defs段落中定義圖形，並賦予id<br />
*#用<use xlink:href='#某id'/>來引用既有的定義<br />
<br />
===6.♪定義一次,引用多次♪===<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/uses.svg<br />
<br />
===7.♪漸層♪===<br />
*漸層和濾鏡如果取中文名稱,瀏覽器還認得,但Inkscape和線上轉檔軟體就會不認得<br />
*「漸層」工具可以在多種顏色之間建立漸層混合,您可以從預設漸層填色中選擇,或是建立自己的漸層填色<br />
*線性漸層沿著直線從起點到終點建立陰影<br />
*放射性漸層沿著圓形圖樣從起點到終點建立陰影<br />
*尖角漸層繞著起點以逆時針掃射的方式建立陰影<br />
*反射性漸層在起點的一側建立相同的鏡像線性漸層<br />
*菱形漸層從菱形圖樣的中央往外建立陰影<br />
====(1)☆線性漸層☆====<br />
*步驟：<br />
*#不用添加svg標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，不會用到href屬性<br />
*#在defs段落中定義漸層,並賦予id<br />
*#用fill='url(#某id)'屬性來引用既有的漸層定義<br />
*linearGradient 線性漸層定義語法說明:<br />
*#漸層標籤中的 100%，指的是整個圖形<br />
*#其中的 id 屬性定出漸層名稱<br />
*#由x1,y1,x2,y2四個屬性決定漸層範圍,以及水平,垂直或角形漸層,四個屬性都以百分比表示：<br />
*##x1,y1,x2,y2屬性決定漸層開始和結束位置,x1,x2以圖形的寬度為準,y1,y2以圖形的高度為準<br />
*##當y1和y2相等,而x1和x2不同時,可創建水平漸層<br />
*##當x1和x2相等,而y1和y2不同時,可創建垂直漸層<br />
*##當x1和x2不同,且y1和y2不同時,可創建角形漸層<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/h.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/v.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/arrow.svg<br />
<br />
====(2)☆放射漸層☆====<br />
*radialGradient 放設漸層定義語法說明:<br />
*#漸層範圍：由cx,cy,r三個屬性決定,三個屬性都以百分比表示,漸層範圍是一個圓或橢圓<br />
*##cx表示範圍中心在圖寬百分之幾的位置<br />
*##cy表示範圍中心在圖高百分之幾的位置<br />
*##r如果圖形寬&高相等則範圍為圓,r代表範圍圓半俓除以圖形寬或高；如果圖形寬&高不相等則範圍為橢圓,r代表範圍橢圓的長短軸半長除以圖形寬或高；注意：r為50%,範圍圓直徑恰等於圖的寬或高<br />
*#設色中心：由fx,fy兩個屬性決定的位置,就是設色為0%的地方,兩個屬性都以百分比表示<br />
*##fx表示設色中心在圖寬百分之幾的位置<br />
*##fy表示設色中心在圖高百分之幾的位置<br />
*##設色100%的地方在範圍圓或範圍橢圓的圓周上<br />
*#設色標籤stop,漸層標籤包住數個stop標籤,每種顏色通過一個stop標籤來規定<br />
*##offset屬性用來定義漸層的開始和結束位置,其100%是指整個漸層範圍<br />
*##stop-color屬性用來定義顏色,也可以做為style的樣式<br />
*##stop-opacity屬性決定透明度,也可以做為style的樣式<br />
*#以ball3.svg為例：漸層範圍為整個圓,因為cx,cy,r都是50% ,而設色中心在中間下方,因為fx='50%' fy='100%' ,此處是stop設為0%的顏色(白色),而範圍圓週邊是stop設為100%的顏色(黑色)<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball1.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball2.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball3.svg<br />
<br />
===8.♪柔焦濾鏡♪===<br />
*濾鏡標籤filter語法說明:<br />
*#其中的id屬性定出濾鏡名稱<br />
*#也可以設width,height,x,y去定濾鏡範圍和起點,如沒設以整個圖形為範圍<br />
*#高斯模糊濾鏡feGaussianBlur：濾鏡標籤包住數種不同效果的濾鏡,高斯模糊濾鏡是最簡單的濾鏡<br />
*#高斯模糊濾鏡主要只有一個參數：stdDeviation(標準差),用來控制模糊的程度,數字越大越模糊,數字為零則是圖片原本的狀態<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/sun.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/waterfall1.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/waterfall2.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/waterfall3.svg<br />
<br />
===9.♪path♪===<br />
*path<br />
*#參數大寫代表絕對座標,小寫代表與前一個座標的相對座標<br />
*#點與點之間&同點的x,y座標之間,用空白間開或用,間開兩者是等價的<br />
*http://www.oxxostudio.tw/articles/201406/svg-04-path-1.html<br />
*http://www.oxxostudio.tw/articles/201406/svg-05-path-2.html<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/path01.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/path02.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/path03.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/path04.svg<br />
<br />
===10.♪動畫♪===<br />
*四標籤：<br />
*#set(開關)<br />
*#animate(屬性連續改變)<br />
*#animateTransform(平移,旋轉,縮放)<br />
*#animateMotion(循跡運動)<br />
*共通語法：將母圖形分拆成開始和結束兩標籤,中間插入動畫標籤<br />
*共通屬性：<br />
*#attributeName：<br />
*##set,animate為某一個母圖形的屬性,from和to就是這個屬性的值將由多少變到多少<br />
*##animateTransform為'transform'另搭配type屬性<br />
*##animateMotion免設此屬性<br />
*#type屬性之值(animateTransform專用)：<br />
*##rotate旋轉,影響屬性from='起始角度,旋轉軸心x座標,旋轉軸心y座標'、to='結束角度,旋轉軸心x座標,旋轉軸心y座標'<br />
*##scale縮放,影響屬性from='x起始倍率,y起始倍率'、to='x結束倍率,y結束倍率'，倍率是自左上原點開始算,如果同組x,y倍率相同,可以只寫一個值<br />
*##translate平移,影響屬性from='起始原點x座標,起始原點y座標'、to='結束原點x座標,結束原點y座標'<br />
*##skewX X軸不動,X軸下方向右歪斜,影響屬性from='起始歪斜角度'、to='結束歪斜角度'<br />
*##skewY Y軸不動,Y軸右方向下歪斜,影響屬性from='起始歪斜角度'、to='結束歪斜角度'<br />
*#begin='幾s'：幾秒開始跑,通常設為0s<br />
*#dur='幾s'：跑一輪要幾秒,可以設為indefinite<br />
*#repeatCount='幾'：要跑幾輪,indefinite代表無限多輪,預設值為1<br />
*#from開始狀態(animate,animateTransform有)<br />
*#to結束狀態(set,animate,animateTransform有)<br />
*#path(animateMotion專用)屬性為移動路徑：由m開始<br />
*#rotate='auto'(animateMotion專用)圖形隨路徑曲度而轉折<br />
*http://jendo.org/~admin/path5.svg<br />
*http://jendo.org/~admin/path6.svg<br />
*https://msdn.microsoft.com/zh-tw/library/gg193979(v=vs.85).aspx<br />
<br />
==♡Inkscape♡==<br />
*inkscape下載,64位元：安裝版(62.7MB)|免安裝版(可攜式)(59.9MB)→下載對應的免安裝版→解壓縮<br />
*素材：<br />
*#org=公共利益用,源軟體（英語：open source software,英文縮寫：OSS，中文也稱：開放原始碼軟體）是一種原始碼可以任意取用的電腦軟體,這種軟體的版權持有人在軟體協定的規定之下保留一部分權利並允許用戶學習&修改&增進提高這款軟體的品質,開源協定通常符合開放原始碼的定義的要求,一些開源軟體被釋出到公有領域,開源軟體常被公開和合作地開發<br />
*#com=商業軟體（英語：Commercial software）是在電腦軟體中被作為商品進行交易的軟體,未必是商用軟體,至2000年代,大多數的軟體都屬於商業軟體,相對於商業軟體,有非商業的專有軟體（Proprietary Software）（但專有軟體中大部份都屬於商業軟體）,可供分享使用的自由軟體（Free Software）&共享軟體（Shareware）&免費軟體（Freeware）等<br />
*Vector/animals<br />
*#選一個圖→下載解壓縮(ai)→解散群組→取出圖檔→調整紙張→匯出點陣圖<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E7%8C%B4%E5%AD%90.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E4%B8%89%E8%A7%92%E9%BE%8D.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E5%9C%96%E6%9B%B8%E9%A4%A8.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E6%91%A9%E5%A4%A9%E8%BC%AA.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E6%97%A5%E6%9C%88%E6%BD%AD.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E6%98%9F%E6%98%9F.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E7%AD%86%E8%A8%98%E6%9C%AC.svg<br />
<br />
==♡GIS♡==<br />
*何謂GIS:地理資訊系統（英語：Geographic Information System,縮寫：GIS）是指在地圖上加上數據或訊息,結合地理學與地圖學,已經廣泛的應用在不同的領域,是用於輸入&儲存&查詢&分析和顯示地理資料的電腦系統,GIS屬於資訊系統的一類,不同在於它能運作和處理地理參照資料,地理參照資料描述地球表面（包括大氣層和較淺的地表下空間）空間要素的位置和屬性,在GIS中的兩種地理資料成分：空間資料,與空間要素幾何特性有關；屬性資料,提供空間要素的資訊<br />
*兩種主要的GIS:<br />
*#google map：google釋出的地圖庫,公布了API使得用戶能夠建立自訂的應用,公開格式,但非公共版權內容<br />
*#OpenStreetMap：(開放街圖，簡稱OSM),於2004年由英國的Steve Coast發起,採用類似Wiki的協作編輯以及開放的授權與格式<br />
*基本框架:比較出名的GIS底層數據框架GDAL<br />
*#地圖的需求:<br />
*##點擊地物,顯示地物的屬性信息和關聯的數據<br />
*##單值&分段專題圖<br />
*##連接業務數據庫獲取最新數據<br />
*##疊加不同地圖<br />
*marks:標點<br />
*overlays:標區域<br />
*google我的地圖:<br />
*#http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/gis1.html<br />
*#http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/GIS2.HTML<br />
*#http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/google.html<br />
*結合我的地圖與GIS:<br />
*#http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E4%BB%A5%E8%89%B2%E5%88%97.HTML<br />
*#http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E6%97%A5%E6%9C%88%E6%BD%AD.html<br />
<br />
==♡圖形計算機♡==<br />
*取得 svgdraw.php<br />
*基本框架<br />
*繪製基本圖形<br />
*函式繪圖<br />
*google 圖形計算機</div>
蕭卉均
http://well-being-ng.net/wiki1231/index.php?title=%E8%A8%8E%E8%AB%96:%E8%B3%87%E8%A8%8A%E5%9F%BA%E7%A4%8E%E6%87%89%E7%94%A8/%E8%95%AD%E5%8D%89%E5%9D%87&diff=37924
討論:資訊基礎應用/蕭卉均
2018-01-16T11:24:39Z
<p>蕭卉均：/* ♡Inkscape♡ */</p>
<hr />
<div>=ღ完整筆記ღ=<br />
==♡環境&工具♡==<br />
===1.♪環境♪===<br />
*伺服器與域名,伺服器DS216,網址6years.jendo.org<br />
*wifi,區網wifi：jendod&jendoa,密碼:jendo19690929<br />
*網站空間,瀏覽器：firefox,優先於chrome,盡量不用IE<br />
*wiki上的個人頁,filezilla→開啟filezilla,並新增一個站台叫♕DS216+(共用)♕→主機設定:6years.jendo.org→協定:SFTP→使用者:共用→字碼集:UTF-8→連線,然後到♕home/www♕→建自己帳號的連線→可用的文字編輯器,如emeditor→連結filezilla&慣用的文字編輯器：♕編輯/設定/檔案編輯♕，選用♕使用自訂編輯器♕&♕總是使用預設的編輯器♕，並指定編輯器的路徑<br />
*課後重點筆記:<br />
*#table是開始,/table是結束<br />
*#IP:IP4,最多表達到255字,IPV4一般網頁使用,IP6,物聯網用<br />
*#物聯網:簡單說一切事物,得失相兼<br />
*#域名:域名伺服器(HOSTS)<br />
*#AI(人工智慧)<br />
*#big5,早期,只有繁體中文<br />
*#UTF-8,萬國碼<br />
<br />
===2.♪工具與設定♪===<br />
*firefox:Mozilla Firefox（簡稱Firefox）,中文俗稱火狐（中國大陸官方有使用但未註冊為商標）,是一個自由及開放原始碼的網頁瀏覽器,由Mozilla基金會及其子公司Mozilla公司開發<br />
*filezilla:ileZilla是一種快速&可信賴的FTP用戶端以及伺服器端開放原始碼程式,具有多種特色&直覺的介面,FileZilla在2003年11月獲選為SourceForge.net當月最佳推薦專案<br />
*EmEditor:EmEditor是江村軟體公司（Emurasoft,坐落於美國華盛頓州）所開發的一款在Windows平台上運行的文字編輯程式,EmEditor以運作輕巧&敏捷而又功能強大&豐富著稱而得到許多用戶的好評<br />
<br />
==♡HTML&HTTP♡==<br />
*發有者及發明年代:於西元1993年,W3C&WHATWG開發<br />
*HTML:超文件標示語言（英語：HyperText Markup Language,簡稱：HTML）是一種用於建立網頁的標準標示語言,HTML是一種基礎技術常與CSS&JavaScript一起被眾多網站用於設計令人賞心悅目的網頁&網頁應用程式以及行動應用程式的使用者介面<br />
*HTTP:超文本傳輸協定（英文：HyperText Transfer Protocol,縮寫：HTTP）是一種用於分佈式&協作式和超媒體資訊系統的應用層協議,HTTP是全球資訊網的資料通訊的基礎<br />
*xml:可延伸標記式語言（英語：Extensible Markup Language,簡稱：XML）是一種標記式語言,標記指電腦所能理解的資訊符號,通過此種標記,電腦之間可以處理包含各種資訊的文章等<br />
*課後筆記:<br />
*#筆記網頁建設:登入後搜尋{資訊基礎應用/蕭卉均}→點一下，開始編輯→編輯完點儲存頁面<br />
*#色碼表:https://www.toodoo.com/db/color.html<br />
*通訊錄:<br />
*<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
<table class='nicetable'><br />
<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
</table><br />
<br />
==♡ wiki ♡==<br />
*何謂wiki:Wiki是一種在全球資訊網上開放且可供多人協同創作的超文字系統,由沃德·坎寧安於1995年首先開發,沃德·坎寧安將wiki定義為「一種允許一群用戶用簡單的描述來建立和連線一組網頁的社會計算系統」<br />
*CC授權:創用CC授權條款（英語：Creative Commons license,簡稱CC授權）是一種公共版權授權條款,其允許分發受版權保護的作品,一個創用CC授權用於一個作者想給他人分享&使用&甚至創作衍生作品的權利<br />
*wiki語法:http://jendo.synology.me/wiki1231/index.php?title=Wiki_%E5%85%A5%E9%96%80%E8%AA%9E%E6%B3%95<br />
*wiki的word適應:履歷表<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E5%B1%A5%E6%AD%B7%E8%A1%A8.html<br />
==♡CSS♡==<br />
*何謂CSS:層疊樣式表（英語：Cascading Style Sheets,簡寫CSS）又稱串樣式列表&級聯樣式表&串接樣式表&層疊樣式表&階層式樣式表,一種用來為結構化文件（如HTML文件或XML應用）添加樣式（字型、間距和顏色等）的電腦語言,由W3C定義和維護,目前最新版本是CSS2.1，為W3C的推薦標準,CSS3現在已被大部分現代瀏覽器支援,而下一版的CSS4仍在開發中<br />
*用法:限制者才有標章,不限制者沒有標章<br />
*重要語法:<br />
*#Attribution(BY):姓名標示,您（使用者）可以複製&發行&展覽&表演&放映&廣播或通過資訊網路傳播本作品；您必須按照作者或者授權人指定的方式對作品進行姓名標示<br />
*#NonCommercial(NC):非商業性使用,您可以自由複製&散布&展示及演出本作品；您不得為商業目的而使用本作品<br />
*#NoDerivs(ND):禁止改作,您可以自由複製&散布&展示及演出本作品；您不得改變&轉變或更改本作品<br />
*#ShareAlike(SA):相同方式分享,您可以自由複製&散布&展示及演出本作品；若您改變&轉變或更改本作品,僅在遵守與本作品相同的授權條款下,您才能散布由本作品產生的衍生作品<br />
<br />
==♡SVG♡==<br />
===1.♪概述♪===<br />
*何謂SVG:可縮放向量圖形（英語：Scalable Vector Graphics,SVG）是一種基於可延伸標記式語言（XML）,用於描述二維向量圖形的圖形格式,SVG由W3C制定,是一個開放標準<br />
*點陣圖與向量圖的比較(含附檔名):<br />
*#SVG:又為向量圖,特色,放大不毛邊,https://upload.wikimedia.org/wikipedia/commons/5/53/Skull_and_crossbones.svg<br />
*#JPG:又名JEPG,失真,壓縮,http://wportfolio.wzu.edu.tw/blog/attach/995/27995/89/bf_51402_8868906_99219_2yzUdJnLy0AsZ9VdwaKNCA.jpg<br />
*#PNG:不失真,公開格式,https://s-media-cache-ak0.pinimg.com/originals/96/94/ef/9694ef6ecfd562c83e7a445ee9ee19ba.png<br />
*#GIF:可動畫,256色,https://2.bp.blogspot.com/-Ra6UuzwDGQg/WDfdq3X1GjI/AAAAAAAD0gc/MfVErIwBENYRH_DvvFsnThfYp-zVxugEgCLcB/s1600/AS000946_02.gif<br />
*SVG格式具有以下優點:<br />
*#圖檔可讀,易於修改和編輯（理論上如此,但實際上卻是因為各種不同的SVG檔編輯器而可能儲存成不易解讀的SVG檔案）<br />
*#與現有技術可以互動融合,例如,SVG技術本身的動態部分（包括時序控制和動畫）就是基於SMIL標準,另外,SVG檔案還可嵌入JavaScript（嚴格地說，應該是ECMAScript）指令碼來控制SVG物件<br />
*#SVG圖形格式可以方便的建立文字索引,從而實現基於內容的圖像搜尋<br />
*#SVG圖形格式支援多種濾鏡和特殊效果,在不改變圖像內容的前提下可以實現點陣圖格式中類似文字陰影的效果<br />
*#SVG圖形格式可以用來動態生成圖形,例如,可用SVG動態生成具有互動功能的地圖,嵌入網頁中,並顯示給終端用戶<br />
*SVG格式具有以下缺點：<br />
*#如何和已經占有重要市場份額的向量圖形格式Adobe Animate競爭的問題,事實上,Adobe Animate在Flash CC 2014版及以後的版本就都支援直接匯出SVG檔案了<br />
*#SVG的本地執行環境下的廠家支援程度<br />
*#由於原始的SVG檔是遵從XML語法,導致資料採用未壓縮的方式存放,因此相較於其他的向量圖形格式,同樣的檔案內容會比其他的檔案格式稍大,Adobe因此使用gzip壓縮開發出壓縮的SVG檔格式,附檔名為 .svgz, 但此種檔案格式除了Adobe旗下的軟體以外,未被廣泛支援使用<br />
*#舊版的SVG Viewer無法正確顯示出使用新版SVG格式的向量圖形<br />
<br />
===2.♪基本架構♪===<br />
*基本架構:SVG允許3種圖形物件類型：向量圖形,柵格圖像以及文字,圖形物件——包括PNG&JPEG這些柵格圖像——能夠被編組&設計&轉換及整合進先前的彩現物件中,文字可以在任何適用於應用程式的XML命名空間之內,從而提高SVG圖形的搜尋能力和無障礙性,SVG提供的功能集涵蓋了巢狀轉換&裁剪路徑&Alpha通道&濾鏡效果&模板物件以及可延伸性,SVG嚴格遵從XML語法,並用文字格式的描述性語言來描述圖像內容,因此是一種和圖像解析度無關的向量圖形格式,SVG可以實現動態和互動功能,在DOM模型的基礎上,SVG開發設計人員可以利用ECMAScript或者SMIL來進行時序控制或物件的操縱,SVG雖然是文字格式,但是SVG支援利用gzip壓縮演算法減少檔案尺寸,壓縮後的檔案通常用被稱為「SVGZ檔案」<br />
*SVG主要支援以下幾種顯示物件：<br />
*#向量顯示物件,基本向量顯示物件包括矩形&圓&橢圓&多邊形&直線&任意曲線等<br />
*#嵌入式外部圖像,包括PNG&JPEG&SVG等<br />
*#文字物件<br />
*基本樣式:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/arrow.svg<br />
*基本圖形:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/bearFace.svg<br />
<br />
===3.♪文字♪===<br />
*TEXT<br />
*#在「text」標籤開始與結束之間夾字,可用中英文,而使用「屬性」來規定文字的表現,所有的屬性都可以改用樣式來表達<br />
*#可用中文字形：<br />
*##屬性dx和dy基於前一個字的位置去做變化：值可為'10,20,30,40'，字的距離一個比一個更遠<br />
*##屬性x和y標示字的起點：值可為'10,20,30,40'，表示每個字的x或y座標<br />
*##屬性fill控制填入字的顏色,預設黑色<br />
*##屬性stroke控制字描框的顏色,預設 none<br />
*##屬性rotate='30'順時鐘轉30°。rotate='30,60,90,120,150,180,210'指定每個字的轉動角度<br />
*##用style控制字體&字形&尺寸,但顏色是用fill不是用color <br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/text.svg<br />
<br />
===4.♪位移&旋轉&縮放&歪斜♪===<br />
*相關屬性說明：<br />
*#平移變換(translate)：transform="translate(x,y)",即新坐標系的原點在原坐標系的(x,y)處,坐標軸的方向不變<br />
*#旋轉變換(rotate)：transform="rotate(angle cx,cy)",angle代表旋轉角度,預設單位是「度」,順時針為正,逆時針為負,(cx,cy)是旋轉中心所在的坐標,若省略旋轉中心坐標,則預設值是(0,0)<br />
*#伸縮變換(scale)：transform="scale(sx,sy)",sx,sy分別代表x軸方向和y方向拉伸或縮小的比例因子,拉伸：大於1；縮小：小於1,若省略sy，即sy=sx，作等比例縮放<br />
*#歪斜變換(skew)：transform='skewX(x-angle)'或transform='skewY(y-angle)',x-angle,y-angle分別代表沿x軸和y軸歪斜的角度<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/transform.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/bearFace.svg<br />
<br />
===5.♪群組♪===<br />
*步驟:<br />
*#先添加svg標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，其中才有href屬性的定義<br />
*#在defs段落中定義圖形，並賦予id<br />
*#用<use xlink:href='#某id'/>來引用既有的定義<br />
<br />
===6.♪定義一次,引用多次♪===<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/uses.svg<br />
<br />
===7.♪漸層♪===<br />
*漸層和濾鏡如果取中文名稱,瀏覽器還認得,但Inkscape和線上轉檔軟體就會不認得<br />
*「漸層」工具可以在多種顏色之間建立漸層混合,您可以從預設漸層填色中選擇,或是建立自己的漸層填色<br />
*線性漸層沿著直線從起點到終點建立陰影<br />
*放射性漸層沿著圓形圖樣從起點到終點建立陰影<br />
*尖角漸層繞著起點以逆時針掃射的方式建立陰影<br />
*反射性漸層在起點的一側建立相同的鏡像線性漸層<br />
*菱形漸層從菱形圖樣的中央往外建立陰影<br />
====(1)☆線性漸層☆====<br />
*步驟：<br />
*#不用添加svg標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，不會用到href屬性<br />
*#在defs段落中定義漸層,並賦予id<br />
*#用fill='url(#某id)'屬性來引用既有的漸層定義<br />
*linearGradient 線性漸層定義語法說明:<br />
*#漸層標籤中的 100%，指的是整個圖形<br />
*#其中的 id 屬性定出漸層名稱<br />
*#由x1,y1,x2,y2四個屬性決定漸層範圍,以及水平,垂直或角形漸層,四個屬性都以百分比表示：<br />
*##x1,y1,x2,y2屬性決定漸層開始和結束位置,x1,x2以圖形的寬度為準,y1,y2以圖形的高度為準<br />
*##當y1和y2相等,而x1和x2不同時,可創建水平漸層<br />
*##當x1和x2相等,而y1和y2不同時,可創建垂直漸層<br />
*##當x1和x2不同,且y1和y2不同時,可創建角形漸層<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/h.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/v.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/arrow.svg<br />
<br />
====(2)☆放射漸層☆====<br />
*radialGradient 放設漸層定義語法說明:<br />
*#漸層範圍：由cx,cy,r三個屬性決定,三個屬性都以百分比表示,漸層範圍是一個圓或橢圓<br />
*##cx表示範圍中心在圖寬百分之幾的位置<br />
*##cy表示範圍中心在圖高百分之幾的位置<br />
*##r如果圖形寬&高相等則範圍為圓,r代表範圍圓半俓除以圖形寬或高；如果圖形寬&高不相等則範圍為橢圓,r代表範圍橢圓的長短軸半長除以圖形寬或高；注意：r為50%,範圍圓直徑恰等於圖的寬或高<br />
*#設色中心：由fx,fy兩個屬性決定的位置,就是設色為0%的地方,兩個屬性都以百分比表示<br />
*##fx表示設色中心在圖寬百分之幾的位置<br />
*##fy表示設色中心在圖高百分之幾的位置<br />
*##設色100%的地方在範圍圓或範圍橢圓的圓周上<br />
*#設色標籤stop,漸層標籤包住數個stop標籤,每種顏色通過一個stop標籤來規定<br />
*##offset屬性用來定義漸層的開始和結束位置,其100%是指整個漸層範圍<br />
*##stop-color屬性用來定義顏色,也可以做為style的樣式<br />
*##stop-opacity屬性決定透明度,也可以做為style的樣式<br />
*#以ball3.svg為例：漸層範圍為整個圓,因為cx,cy,r都是50% ,而設色中心在中間下方,因為fx='50%' fy='100%' ,此處是stop設為0%的顏色(白色),而範圍圓週邊是stop設為100%的顏色(黑色)<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball1.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball2.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball3.svg<br />
<br />
===8.♪柔焦濾鏡♪===<br />
*濾鏡標籤filter語法說明:<br />
*#其中的id屬性定出濾鏡名稱<br />
*#也可以設width,height,x,y去定濾鏡範圍和起點,如沒設以整個圖形為範圍<br />
*#高斯模糊濾鏡feGaussianBlur：濾鏡標籤包住數種不同效果的濾鏡,高斯模糊濾鏡是最簡單的濾鏡<br />
*#高斯模糊濾鏡主要只有一個參數：stdDeviation(標準差),用來控制模糊的程度,數字越大越模糊,數字為零則是圖片原本的狀態<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/sun.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/waterfall1.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/waterfall2.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/waterfall3.svg<br />
<br />
===9.♪path♪===<br />
*path<br />
*#參數大寫代表絕對座標,小寫代表與前一個座標的相對座標<br />
*#點與點之間&同點的x,y座標之間,用空白間開或用,間開兩者是等價的<br />
*http://www.oxxostudio.tw/articles/201406/svg-04-path-1.html<br />
*http://www.oxxostudio.tw/articles/201406/svg-05-path-2.html<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/path01.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/path02.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/path03.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/path04.svg<br />
<br />
===10.♪動畫♪===<br />
*四標籤：<br />
*#set(開關)<br />
*#animate(屬性連續改變)<br />
*#animateTransform(平移,旋轉,縮放)<br />
*#animateMotion(循跡運動)<br />
*共通語法：將母圖形分拆成開始和結束兩標籤,中間插入動畫標籤<br />
*共通屬性：<br />
*#attributeName：<br />
*##set,animate為某一個母圖形的屬性,from和to就是這個屬性的值將由多少變到多少<br />
*##animateTransform為'transform'另搭配type屬性<br />
*##animateMotion免設此屬性<br />
*#type屬性之值(animateTransform專用)：<br />
*##rotate旋轉,影響屬性from='起始角度,旋轉軸心x座標,旋轉軸心y座標'、to='結束角度,旋轉軸心x座標,旋轉軸心y座標'<br />
*##scale縮放,影響屬性from='x起始倍率,y起始倍率'、to='x結束倍率,y結束倍率'，倍率是自左上原點開始算,如果同組x,y倍率相同,可以只寫一個值<br />
*##translate平移,影響屬性from='起始原點x座標,起始原點y座標'、to='結束原點x座標,結束原點y座標'<br />
*##skewX X軸不動,X軸下方向右歪斜,影響屬性from='起始歪斜角度'、to='結束歪斜角度'<br />
*##skewY Y軸不動,Y軸右方向下歪斜,影響屬性from='起始歪斜角度'、to='結束歪斜角度'<br />
*#begin='幾s'：幾秒開始跑,通常設為0s<br />
*#dur='幾s'：跑一輪要幾秒,可以設為indefinite<br />
*#repeatCount='幾'：要跑幾輪,indefinite代表無限多輪,預設值為1<br />
*#from開始狀態(animate,animateTransform有)<br />
*#to結束狀態(set,animate,animateTransform有)<br />
*#path(animateMotion專用)屬性為移動路徑：由m開始<br />
*#rotate='auto'(animateMotion專用)圖形隨路徑曲度而轉折<br />
*http://jendo.org/~admin/path5.svg<br />
*http://jendo.org/~admin/path6.svg<br />
*https://msdn.microsoft.com/zh-tw/library/gg193979(v=vs.85).aspx<br />
<br />
==♡Inkscape♡==<br />
*inkscape下載,64位元：安裝版(62.7MB)|免安裝版(可攜式)(59.9MB)→下載對應的免安裝版→解壓縮<br />
*素材：<br />
*#org=公共利益用,源軟體（英語：open source software,英文縮寫：OSS，中文也稱：開放原始碼軟體）是一種原始碼可以任意取用的電腦軟體,這種軟體的版權持有人在軟體協定的規定之下保留一部分權利並允許用戶學習&修改&增進提高這款軟體的品質,開源協定通常符合開放原始碼的定義的要求,一些開源軟體被釋出到公有領域,開源軟體常被公開和合作地開發<br />
*#com=商業軟體（英語：Commercial software）是在電腦軟體中被作為商品進行交易的軟體,未必是商用軟體,至2000年代,大多數的軟體都屬於商業軟體,相對於商業軟體,有非商業的專有軟體（Proprietary Software）（但專有軟體中大部份都屬於商業軟體）,可供分享使用的自由軟體（Free Software）&共享軟體（Shareware）&免費軟體（Freeware）等<br />
*Vector/animals<br />
*#選一個圖→下載解壓縮(ai)→解散群組→取出圖檔→調整紙張→匯出點陣圖<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E7%8C%B4%E5%AD%90.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E4%B8%89%E8%A7%92%E9%BE%8D.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E5%9C%96%E6%9B%B8%E9%A4%A8.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E6%91%A9%E5%A4%A9%E8%BC%AA.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E6%97%A5%E6%9C%88%E6%BD%AD.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E6%98%9F%E6%98%9F.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E7%AD%86%E8%A8%98%E6%9C%AC.svg<br />
<br />
==♡GIS♡==<br />
*何謂GIS:地理資訊系統（英語：Geographic Information System,縮寫：GIS）是指在地圖上加上數據或訊息,結合地理學與地圖學,已經廣泛的應用在不同的領域,是用於輸入&儲存&查詢&分析和顯示地理資料的電腦系統,GIS屬於資訊系統的一類,不同在於它能運作和處理地理參照資料,地理參照資料描述地球表面（包括大氣層和較淺的地表下空間）空間要素的位置和屬性,在GIS中的兩種地理資料成分：空間資料,與空間要素幾何特性有關；屬性資料,提供空間要素的資訊<br />
*兩種主要的GIS:<br />
*#google map：google釋出的地圖庫,公布了API使得用戶能夠建立自訂的應用,公開格式,但非公共版權內容<br />
*#OpenStreetMap：(開放街圖，簡稱OSM),於2004年由英國的Steve Coast發起,採用類似Wiki的協作編輯以及開放的授權與格式<br />
*基本框架:比較出名的GIS底層數據框架GDAL<br />
*#地圖的需求:<br />
*##點擊地物,顯示地物的屬性信息和關聯的數據<br />
*##單值&分段專題圖<br />
*##連接業務數據庫獲取最新數據<br />
*##疊加不同地圖<br />
*marks:標點<br />
*overlays:標區域<br />
*google我的地圖:<br />
*結合我的地圖與 GIS<br />
<br />
==♡圖形計算機♡==<br />
*取得 svgdraw.php<br />
*基本框架<br />
*繪製基本圖形<br />
*函式繪圖<br />
*google 圖形計算機</div>
蕭卉均
http://well-being-ng.net/wiki1231/index.php?title=%E8%A8%8E%E8%AB%96:%E8%B3%87%E8%A8%8A%E5%9F%BA%E7%A4%8E%E6%87%89%E7%94%A8/%E8%95%AD%E5%8D%89%E5%9D%87&diff=37923
討論:資訊基礎應用/蕭卉均
2018-01-16T11:22:29Z
<p>蕭卉均：/* ♡Inkscape♡ */</p>
<hr />
<div>=ღ完整筆記ღ=<br />
==♡環境&工具♡==<br />
===1.♪環境♪===<br />
*伺服器與域名,伺服器DS216,網址6years.jendo.org<br />
*wifi,區網wifi：jendod&jendoa,密碼:jendo19690929<br />
*網站空間,瀏覽器：firefox,優先於chrome,盡量不用IE<br />
*wiki上的個人頁,filezilla→開啟filezilla,並新增一個站台叫♕DS216+(共用)♕→主機設定:6years.jendo.org→協定:SFTP→使用者:共用→字碼集:UTF-8→連線,然後到♕home/www♕→建自己帳號的連線→可用的文字編輯器,如emeditor→連結filezilla&慣用的文字編輯器：♕編輯/設定/檔案編輯♕，選用♕使用自訂編輯器♕&♕總是使用預設的編輯器♕，並指定編輯器的路徑<br />
*課後重點筆記:<br />
*#table是開始,/table是結束<br />
*#IP:IP4,最多表達到255字,IPV4一般網頁使用,IP6,物聯網用<br />
*#物聯網:簡單說一切事物,得失相兼<br />
*#域名:域名伺服器(HOSTS)<br />
*#AI(人工智慧)<br />
*#big5,早期,只有繁體中文<br />
*#UTF-8,萬國碼<br />
<br />
===2.♪工具與設定♪===<br />
*firefox:Mozilla Firefox（簡稱Firefox）,中文俗稱火狐（中國大陸官方有使用但未註冊為商標）,是一個自由及開放原始碼的網頁瀏覽器,由Mozilla基金會及其子公司Mozilla公司開發<br />
*filezilla:ileZilla是一種快速&可信賴的FTP用戶端以及伺服器端開放原始碼程式,具有多種特色&直覺的介面,FileZilla在2003年11月獲選為SourceForge.net當月最佳推薦專案<br />
*EmEditor:EmEditor是江村軟體公司（Emurasoft,坐落於美國華盛頓州）所開發的一款在Windows平台上運行的文字編輯程式,EmEditor以運作輕巧&敏捷而又功能強大&豐富著稱而得到許多用戶的好評<br />
<br />
==♡HTML&HTTP♡==<br />
*發有者及發明年代:於西元1993年,W3C&WHATWG開發<br />
*HTML:超文件標示語言（英語：HyperText Markup Language,簡稱：HTML）是一種用於建立網頁的標準標示語言,HTML是一種基礎技術常與CSS&JavaScript一起被眾多網站用於設計令人賞心悅目的網頁&網頁應用程式以及行動應用程式的使用者介面<br />
*HTTP:超文本傳輸協定（英文：HyperText Transfer Protocol,縮寫：HTTP）是一種用於分佈式&協作式和超媒體資訊系統的應用層協議,HTTP是全球資訊網的資料通訊的基礎<br />
*xml:可延伸標記式語言（英語：Extensible Markup Language,簡稱：XML）是一種標記式語言,標記指電腦所能理解的資訊符號,通過此種標記,電腦之間可以處理包含各種資訊的文章等<br />
*課後筆記:<br />
*#筆記網頁建設:登入後搜尋{資訊基礎應用/蕭卉均}→點一下，開始編輯→編輯完點儲存頁面<br />
*#色碼表:https://www.toodoo.com/db/color.html<br />
*通訊錄:<br />
*<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
<table class='nicetable'><br />
<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
</table><br />
<br />
==♡ wiki ♡==<br />
*何謂wiki:Wiki是一種在全球資訊網上開放且可供多人協同創作的超文字系統,由沃德·坎寧安於1995年首先開發,沃德·坎寧安將wiki定義為「一種允許一群用戶用簡單的描述來建立和連線一組網頁的社會計算系統」<br />
*CC授權:創用CC授權條款（英語：Creative Commons license,簡稱CC授權）是一種公共版權授權條款,其允許分發受版權保護的作品,一個創用CC授權用於一個作者想給他人分享&使用&甚至創作衍生作品的權利<br />
*wiki語法:http://jendo.synology.me/wiki1231/index.php?title=Wiki_%E5%85%A5%E9%96%80%E8%AA%9E%E6%B3%95<br />
*wiki的word適應:履歷表<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E5%B1%A5%E6%AD%B7%E8%A1%A8.html<br />
==♡CSS♡==<br />
*何謂CSS:層疊樣式表（英語：Cascading Style Sheets,簡寫CSS）又稱串樣式列表&級聯樣式表&串接樣式表&層疊樣式表&階層式樣式表,一種用來為結構化文件（如HTML文件或XML應用）添加樣式（字型、間距和顏色等）的電腦語言,由W3C定義和維護,目前最新版本是CSS2.1，為W3C的推薦標準,CSS3現在已被大部分現代瀏覽器支援,而下一版的CSS4仍在開發中<br />
*用法:限制者才有標章,不限制者沒有標章<br />
*重要語法:<br />
*#Attribution(BY):姓名標示,您（使用者）可以複製&發行&展覽&表演&放映&廣播或通過資訊網路傳播本作品；您必須按照作者或者授權人指定的方式對作品進行姓名標示<br />
*#NonCommercial(NC):非商業性使用,您可以自由複製&散布&展示及演出本作品；您不得為商業目的而使用本作品<br />
*#NoDerivs(ND):禁止改作,您可以自由複製&散布&展示及演出本作品；您不得改變&轉變或更改本作品<br />
*#ShareAlike(SA):相同方式分享,您可以自由複製&散布&展示及演出本作品；若您改變&轉變或更改本作品,僅在遵守與本作品相同的授權條款下,您才能散布由本作品產生的衍生作品<br />
<br />
==♡SVG♡==<br />
===1.♪概述♪===<br />
*何謂SVG:可縮放向量圖形（英語：Scalable Vector Graphics,SVG）是一種基於可延伸標記式語言（XML）,用於描述二維向量圖形的圖形格式,SVG由W3C制定,是一個開放標準<br />
*點陣圖與向量圖的比較(含附檔名):<br />
*#SVG:又為向量圖,特色,放大不毛邊,https://upload.wikimedia.org/wikipedia/commons/5/53/Skull_and_crossbones.svg<br />
*#JPG:又名JEPG,失真,壓縮,http://wportfolio.wzu.edu.tw/blog/attach/995/27995/89/bf_51402_8868906_99219_2yzUdJnLy0AsZ9VdwaKNCA.jpg<br />
*#PNG:不失真,公開格式,https://s-media-cache-ak0.pinimg.com/originals/96/94/ef/9694ef6ecfd562c83e7a445ee9ee19ba.png<br />
*#GIF:可動畫,256色,https://2.bp.blogspot.com/-Ra6UuzwDGQg/WDfdq3X1GjI/AAAAAAAD0gc/MfVErIwBENYRH_DvvFsnThfYp-zVxugEgCLcB/s1600/AS000946_02.gif<br />
*SVG格式具有以下優點:<br />
*#圖檔可讀,易於修改和編輯（理論上如此,但實際上卻是因為各種不同的SVG檔編輯器而可能儲存成不易解讀的SVG檔案）<br />
*#與現有技術可以互動融合,例如,SVG技術本身的動態部分（包括時序控制和動畫）就是基於SMIL標準,另外,SVG檔案還可嵌入JavaScript（嚴格地說，應該是ECMAScript）指令碼來控制SVG物件<br />
*#SVG圖形格式可以方便的建立文字索引,從而實現基於內容的圖像搜尋<br />
*#SVG圖形格式支援多種濾鏡和特殊效果,在不改變圖像內容的前提下可以實現點陣圖格式中類似文字陰影的效果<br />
*#SVG圖形格式可以用來動態生成圖形,例如,可用SVG動態生成具有互動功能的地圖,嵌入網頁中,並顯示給終端用戶<br />
*SVG格式具有以下缺點：<br />
*#如何和已經占有重要市場份額的向量圖形格式Adobe Animate競爭的問題,事實上,Adobe Animate在Flash CC 2014版及以後的版本就都支援直接匯出SVG檔案了<br />
*#SVG的本地執行環境下的廠家支援程度<br />
*#由於原始的SVG檔是遵從XML語法,導致資料採用未壓縮的方式存放,因此相較於其他的向量圖形格式,同樣的檔案內容會比其他的檔案格式稍大,Adobe因此使用gzip壓縮開發出壓縮的SVG檔格式,附檔名為 .svgz, 但此種檔案格式除了Adobe旗下的軟體以外,未被廣泛支援使用<br />
*#舊版的SVG Viewer無法正確顯示出使用新版SVG格式的向量圖形<br />
<br />
===2.♪基本架構♪===<br />
*基本架構:SVG允許3種圖形物件類型：向量圖形,柵格圖像以及文字,圖形物件——包括PNG&JPEG這些柵格圖像——能夠被編組&設計&轉換及整合進先前的彩現物件中,文字可以在任何適用於應用程式的XML命名空間之內,從而提高SVG圖形的搜尋能力和無障礙性,SVG提供的功能集涵蓋了巢狀轉換&裁剪路徑&Alpha通道&濾鏡效果&模板物件以及可延伸性,SVG嚴格遵從XML語法,並用文字格式的描述性語言來描述圖像內容,因此是一種和圖像解析度無關的向量圖形格式,SVG可以實現動態和互動功能,在DOM模型的基礎上,SVG開發設計人員可以利用ECMAScript或者SMIL來進行時序控制或物件的操縱,SVG雖然是文字格式,但是SVG支援利用gzip壓縮演算法減少檔案尺寸,壓縮後的檔案通常用被稱為「SVGZ檔案」<br />
*SVG主要支援以下幾種顯示物件：<br />
*#向量顯示物件,基本向量顯示物件包括矩形&圓&橢圓&多邊形&直線&任意曲線等<br />
*#嵌入式外部圖像,包括PNG&JPEG&SVG等<br />
*#文字物件<br />
*基本樣式:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/arrow.svg<br />
*基本圖形:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/bearFace.svg<br />
<br />
===3.♪文字♪===<br />
*TEXT<br />
*#在「text」標籤開始與結束之間夾字,可用中英文,而使用「屬性」來規定文字的表現,所有的屬性都可以改用樣式來表達<br />
*#可用中文字形：<br />
*##屬性dx和dy基於前一個字的位置去做變化：值可為'10,20,30,40'，字的距離一個比一個更遠<br />
*##屬性x和y標示字的起點：值可為'10,20,30,40'，表示每個字的x或y座標<br />
*##屬性fill控制填入字的顏色,預設黑色<br />
*##屬性stroke控制字描框的顏色,預設 none<br />
*##屬性rotate='30'順時鐘轉30°。rotate='30,60,90,120,150,180,210'指定每個字的轉動角度<br />
*##用style控制字體&字形&尺寸,但顏色是用fill不是用color <br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/text.svg<br />
<br />
===4.♪位移&旋轉&縮放&歪斜♪===<br />
*相關屬性說明：<br />
*#平移變換(translate)：transform="translate(x,y)",即新坐標系的原點在原坐標系的(x,y)處,坐標軸的方向不變<br />
*#旋轉變換(rotate)：transform="rotate(angle cx,cy)",angle代表旋轉角度,預設單位是「度」,順時針為正,逆時針為負,(cx,cy)是旋轉中心所在的坐標,若省略旋轉中心坐標,則預設值是(0,0)<br />
*#伸縮變換(scale)：transform="scale(sx,sy)",sx,sy分別代表x軸方向和y方向拉伸或縮小的比例因子,拉伸：大於1；縮小：小於1,若省略sy，即sy=sx，作等比例縮放<br />
*#歪斜變換(skew)：transform='skewX(x-angle)'或transform='skewY(y-angle)',x-angle,y-angle分別代表沿x軸和y軸歪斜的角度<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/transform.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/bearFace.svg<br />
<br />
===5.♪群組♪===<br />
*步驟:<br />
*#先添加svg標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，其中才有href屬性的定義<br />
*#在defs段落中定義圖形，並賦予id<br />
*#用<use xlink:href='#某id'/>來引用既有的定義<br />
<br />
===6.♪定義一次,引用多次♪===<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/uses.svg<br />
<br />
===7.♪漸層♪===<br />
*漸層和濾鏡如果取中文名稱,瀏覽器還認得,但Inkscape和線上轉檔軟體就會不認得<br />
*「漸層」工具可以在多種顏色之間建立漸層混合,您可以從預設漸層填色中選擇,或是建立自己的漸層填色<br />
*線性漸層沿著直線從起點到終點建立陰影<br />
*放射性漸層沿著圓形圖樣從起點到終點建立陰影<br />
*尖角漸層繞著起點以逆時針掃射的方式建立陰影<br />
*反射性漸層在起點的一側建立相同的鏡像線性漸層<br />
*菱形漸層從菱形圖樣的中央往外建立陰影<br />
====(1)☆線性漸層☆====<br />
*步驟：<br />
*#不用添加svg標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，不會用到href屬性<br />
*#在defs段落中定義漸層,並賦予id<br />
*#用fill='url(#某id)'屬性來引用既有的漸層定義<br />
*linearGradient 線性漸層定義語法說明:<br />
*#漸層標籤中的 100%，指的是整個圖形<br />
*#其中的 id 屬性定出漸層名稱<br />
*#由x1,y1,x2,y2四個屬性決定漸層範圍,以及水平,垂直或角形漸層,四個屬性都以百分比表示：<br />
*##x1,y1,x2,y2屬性決定漸層開始和結束位置,x1,x2以圖形的寬度為準,y1,y2以圖形的高度為準<br />
*##當y1和y2相等,而x1和x2不同時,可創建水平漸層<br />
*##當x1和x2相等,而y1和y2不同時,可創建垂直漸層<br />
*##當x1和x2不同,且y1和y2不同時,可創建角形漸層<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/h.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/v.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/arrow.svg<br />
<br />
====(2)☆放射漸層☆====<br />
*radialGradient 放設漸層定義語法說明:<br />
*#漸層範圍：由cx,cy,r三個屬性決定,三個屬性都以百分比表示,漸層範圍是一個圓或橢圓<br />
*##cx表示範圍中心在圖寬百分之幾的位置<br />
*##cy表示範圍中心在圖高百分之幾的位置<br />
*##r如果圖形寬&高相等則範圍為圓,r代表範圍圓半俓除以圖形寬或高；如果圖形寬&高不相等則範圍為橢圓,r代表範圍橢圓的長短軸半長除以圖形寬或高；注意：r為50%,範圍圓直徑恰等於圖的寬或高<br />
*#設色中心：由fx,fy兩個屬性決定的位置,就是設色為0%的地方,兩個屬性都以百分比表示<br />
*##fx表示設色中心在圖寬百分之幾的位置<br />
*##fy表示設色中心在圖高百分之幾的位置<br />
*##設色100%的地方在範圍圓或範圍橢圓的圓周上<br />
*#設色標籤stop,漸層標籤包住數個stop標籤,每種顏色通過一個stop標籤來規定<br />
*##offset屬性用來定義漸層的開始和結束位置,其100%是指整個漸層範圍<br />
*##stop-color屬性用來定義顏色,也可以做為style的樣式<br />
*##stop-opacity屬性決定透明度,也可以做為style的樣式<br />
*#以ball3.svg為例：漸層範圍為整個圓,因為cx,cy,r都是50% ,而設色中心在中間下方,因為fx='50%' fy='100%' ,此處是stop設為0%的顏色(白色),而範圍圓週邊是stop設為100%的顏色(黑色)<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball1.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball2.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball3.svg<br />
<br />
===8.♪柔焦濾鏡♪===<br />
*濾鏡標籤filter語法說明:<br />
*#其中的id屬性定出濾鏡名稱<br />
*#也可以設width,height,x,y去定濾鏡範圍和起點,如沒設以整個圖形為範圍<br />
*#高斯模糊濾鏡feGaussianBlur：濾鏡標籤包住數種不同效果的濾鏡,高斯模糊濾鏡是最簡單的濾鏡<br />
*#高斯模糊濾鏡主要只有一個參數：stdDeviation(標準差),用來控制模糊的程度,數字越大越模糊,數字為零則是圖片原本的狀態<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/sun.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/waterfall1.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/waterfall2.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/waterfall3.svg<br />
<br />
===9.♪path♪===<br />
*path<br />
*#參數大寫代表絕對座標,小寫代表與前一個座標的相對座標<br />
*#點與點之間&同點的x,y座標之間,用空白間開或用,間開兩者是等價的<br />
*http://www.oxxostudio.tw/articles/201406/svg-04-path-1.html<br />
*http://www.oxxostudio.tw/articles/201406/svg-05-path-2.html<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/path01.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/path02.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/path03.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/path04.svg<br />
<br />
===10.♪動畫♪===<br />
*四標籤：<br />
*#set(開關)<br />
*#animate(屬性連續改變)<br />
*#animateTransform(平移,旋轉,縮放)<br />
*#animateMotion(循跡運動)<br />
*共通語法：將母圖形分拆成開始和結束兩標籤,中間插入動畫標籤<br />
*共通屬性：<br />
*#attributeName：<br />
*##set,animate為某一個母圖形的屬性,from和to就是這個屬性的值將由多少變到多少<br />
*##animateTransform為'transform'另搭配type屬性<br />
*##animateMotion免設此屬性<br />
*#type屬性之值(animateTransform專用)：<br />
*##rotate旋轉,影響屬性from='起始角度,旋轉軸心x座標,旋轉軸心y座標'、to='結束角度,旋轉軸心x座標,旋轉軸心y座標'<br />
*##scale縮放,影響屬性from='x起始倍率,y起始倍率'、to='x結束倍率,y結束倍率'，倍率是自左上原點開始算,如果同組x,y倍率相同,可以只寫一個值<br />
*##translate平移,影響屬性from='起始原點x座標,起始原點y座標'、to='結束原點x座標,結束原點y座標'<br />
*##skewX X軸不動,X軸下方向右歪斜,影響屬性from='起始歪斜角度'、to='結束歪斜角度'<br />
*##skewY Y軸不動,Y軸右方向下歪斜,影響屬性from='起始歪斜角度'、to='結束歪斜角度'<br />
*#begin='幾s'：幾秒開始跑,通常設為0s<br />
*#dur='幾s'：跑一輪要幾秒,可以設為indefinite<br />
*#repeatCount='幾'：要跑幾輪,indefinite代表無限多輪,預設值為1<br />
*#from開始狀態(animate,animateTransform有)<br />
*#to結束狀態(set,animate,animateTransform有)<br />
*#path(animateMotion專用)屬性為移動路徑：由m開始<br />
*#rotate='auto'(animateMotion專用)圖形隨路徑曲度而轉折<br />
*http://jendo.org/~admin/path5.svg<br />
*http://jendo.org/~admin/path6.svg<br />
*https://msdn.microsoft.com/zh-tw/library/gg193979(v=vs.85).aspx<br />
<br />
==♡Inkscape♡==<br />
*inkscape下載,64位元：安裝版(62.7MB)|免安裝版(可攜式)(59.9MB)→下載對應的免安裝版→解壓縮<br />
*素材：<br />
*#org=公共利益用,源軟體（英語：open source software,英文縮寫：OSS，中文也稱：開放原始碼軟體）是一種原始碼可以任意取用的電腦軟體,這種軟體的版權持有人在軟體協定的規定之下保留一部分權利並允許用戶學習&修改&增進提高這款軟體的品質,開源協定通常符合開放原始碼的定義的要求,一些開源軟體被釋出到公有領域,開源軟體常被公開和合作地開發<br />
*#com=商業軟體（英語：Commercial software）是在電腦軟體中被作為商品進行交易的軟體,未必是商用軟體,至2000年代,大多數的軟體都屬於商業軟體,相對於商業軟體,有非商業的專有軟體（Proprietary Software）（但專有軟體中大部份都屬於商業軟體）,可供分享使用的自由軟體（Free Software）&共享軟體（Shareware）&免費軟體（Freeware）等<br />
*Vector/animals<br />
*#選一個圖→下載解壓縮(ai)→解散群組→取出圖檔→調整紙張→匯出點陣圖<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E4%B8%89%E8%A7%92%E9%BE%8D.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E5%9C%96%E6%9B%B8%E9%A4%A8.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E6%91%A9%E5%A4%A9%E8%BC%AA.svg<br />
*<br />
*<br />
*<br />
<br />
==♡GIS♡==<br />
*何謂GIS:地理資訊系統（英語：Geographic Information System,縮寫：GIS）是指在地圖上加上數據或訊息,結合地理學與地圖學,已經廣泛的應用在不同的領域,是用於輸入&儲存&查詢&分析和顯示地理資料的電腦系統,GIS屬於資訊系統的一類,不同在於它能運作和處理地理參照資料,地理參照資料描述地球表面（包括大氣層和較淺的地表下空間）空間要素的位置和屬性,在GIS中的兩種地理資料成分：空間資料,與空間要素幾何特性有關；屬性資料,提供空間要素的資訊<br />
*兩種主要的GIS:<br />
*#google map：google釋出的地圖庫,公布了API使得用戶能夠建立自訂的應用,公開格式,但非公共版權內容<br />
*#OpenStreetMap：(開放街圖，簡稱OSM),於2004年由英國的Steve Coast發起,採用類似Wiki的協作編輯以及開放的授權與格式<br />
*基本框架:比較出名的GIS底層數據框架GDAL<br />
*#地圖的需求:<br />
*##點擊地物,顯示地物的屬性信息和關聯的數據<br />
*##單值&分段專題圖<br />
*##連接業務數據庫獲取最新數據<br />
*##疊加不同地圖<br />
*marks:標點<br />
*overlays:標區域<br />
*google我的地圖:<br />
*結合我的地圖與 GIS<br />
<br />
==♡圖形計算機♡==<br />
*取得 svgdraw.php<br />
*基本框架<br />
*繪製基本圖形<br />
*函式繪圖<br />
*google 圖形計算機</div>
蕭卉均
http://well-being-ng.net/wiki1231/index.php?title=%E8%A8%8E%E8%AB%96:%E8%B3%87%E8%A8%8A%E5%9F%BA%E7%A4%8E%E6%87%89%E7%94%A8/%E8%95%AD%E5%8D%89%E5%9D%87&diff=37922
討論:資訊基礎應用/蕭卉均
2018-01-16T11:19:59Z
<p>蕭卉均：/* ♡GIS♡ */</p>
<hr />
<div>=ღ完整筆記ღ=<br />
==♡環境&工具♡==<br />
===1.♪環境♪===<br />
*伺服器與域名,伺服器DS216,網址6years.jendo.org<br />
*wifi,區網wifi：jendod&jendoa,密碼:jendo19690929<br />
*網站空間,瀏覽器：firefox,優先於chrome,盡量不用IE<br />
*wiki上的個人頁,filezilla→開啟filezilla,並新增一個站台叫♕DS216+(共用)♕→主機設定:6years.jendo.org→協定:SFTP→使用者:共用→字碼集:UTF-8→連線,然後到♕home/www♕→建自己帳號的連線→可用的文字編輯器,如emeditor→連結filezilla&慣用的文字編輯器：♕編輯/設定/檔案編輯♕，選用♕使用自訂編輯器♕&♕總是使用預設的編輯器♕，並指定編輯器的路徑<br />
*課後重點筆記:<br />
*#table是開始,/table是結束<br />
*#IP:IP4,最多表達到255字,IPV4一般網頁使用,IP6,物聯網用<br />
*#物聯網:簡單說一切事物,得失相兼<br />
*#域名:域名伺服器(HOSTS)<br />
*#AI(人工智慧)<br />
*#big5,早期,只有繁體中文<br />
*#UTF-8,萬國碼<br />
<br />
===2.♪工具與設定♪===<br />
*firefox:Mozilla Firefox（簡稱Firefox）,中文俗稱火狐（中國大陸官方有使用但未註冊為商標）,是一個自由及開放原始碼的網頁瀏覽器,由Mozilla基金會及其子公司Mozilla公司開發<br />
*filezilla:ileZilla是一種快速&可信賴的FTP用戶端以及伺服器端開放原始碼程式,具有多種特色&直覺的介面,FileZilla在2003年11月獲選為SourceForge.net當月最佳推薦專案<br />
*EmEditor:EmEditor是江村軟體公司（Emurasoft,坐落於美國華盛頓州）所開發的一款在Windows平台上運行的文字編輯程式,EmEditor以運作輕巧&敏捷而又功能強大&豐富著稱而得到許多用戶的好評<br />
<br />
==♡HTML&HTTP♡==<br />
*發有者及發明年代:於西元1993年,W3C&WHATWG開發<br />
*HTML:超文件標示語言（英語：HyperText Markup Language,簡稱：HTML）是一種用於建立網頁的標準標示語言,HTML是一種基礎技術常與CSS&JavaScript一起被眾多網站用於設計令人賞心悅目的網頁&網頁應用程式以及行動應用程式的使用者介面<br />
*HTTP:超文本傳輸協定（英文：HyperText Transfer Protocol,縮寫：HTTP）是一種用於分佈式&協作式和超媒體資訊系統的應用層協議,HTTP是全球資訊網的資料通訊的基礎<br />
*xml:可延伸標記式語言（英語：Extensible Markup Language,簡稱：XML）是一種標記式語言,標記指電腦所能理解的資訊符號,通過此種標記,電腦之間可以處理包含各種資訊的文章等<br />
*課後筆記:<br />
*#筆記網頁建設:登入後搜尋{資訊基礎應用/蕭卉均}→點一下，開始編輯→編輯完點儲存頁面<br />
*#色碼表:https://www.toodoo.com/db/color.html<br />
*通訊錄:<br />
*<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
<table class='nicetable'><br />
<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
</table><br />
<br />
==♡ wiki ♡==<br />
*何謂wiki:Wiki是一種在全球資訊網上開放且可供多人協同創作的超文字系統,由沃德·坎寧安於1995年首先開發,沃德·坎寧安將wiki定義為「一種允許一群用戶用簡單的描述來建立和連線一組網頁的社會計算系統」<br />
*CC授權:創用CC授權條款（英語：Creative Commons license,簡稱CC授權）是一種公共版權授權條款,其允許分發受版權保護的作品,一個創用CC授權用於一個作者想給他人分享&使用&甚至創作衍生作品的權利<br />
*wiki語法:http://jendo.synology.me/wiki1231/index.php?title=Wiki_%E5%85%A5%E9%96%80%E8%AA%9E%E6%B3%95<br />
*wiki的word適應:履歷表<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E5%B1%A5%E6%AD%B7%E8%A1%A8.html<br />
==♡CSS♡==<br />
*何謂CSS:層疊樣式表（英語：Cascading Style Sheets,簡寫CSS）又稱串樣式列表&級聯樣式表&串接樣式表&層疊樣式表&階層式樣式表,一種用來為結構化文件（如HTML文件或XML應用）添加樣式（字型、間距和顏色等）的電腦語言,由W3C定義和維護,目前最新版本是CSS2.1，為W3C的推薦標準,CSS3現在已被大部分現代瀏覽器支援,而下一版的CSS4仍在開發中<br />
*用法:限制者才有標章,不限制者沒有標章<br />
*重要語法:<br />
*#Attribution(BY):姓名標示,您（使用者）可以複製&發行&展覽&表演&放映&廣播或通過資訊網路傳播本作品；您必須按照作者或者授權人指定的方式對作品進行姓名標示<br />
*#NonCommercial(NC):非商業性使用,您可以自由複製&散布&展示及演出本作品；您不得為商業目的而使用本作品<br />
*#NoDerivs(ND):禁止改作,您可以自由複製&散布&展示及演出本作品；您不得改變&轉變或更改本作品<br />
*#ShareAlike(SA):相同方式分享,您可以自由複製&散布&展示及演出本作品；若您改變&轉變或更改本作品,僅在遵守與本作品相同的授權條款下,您才能散布由本作品產生的衍生作品<br />
<br />
==♡SVG♡==<br />
===1.♪概述♪===<br />
*何謂SVG:可縮放向量圖形（英語：Scalable Vector Graphics,SVG）是一種基於可延伸標記式語言（XML）,用於描述二維向量圖形的圖形格式,SVG由W3C制定,是一個開放標準<br />
*點陣圖與向量圖的比較(含附檔名):<br />
*#SVG:又為向量圖,特色,放大不毛邊,https://upload.wikimedia.org/wikipedia/commons/5/53/Skull_and_crossbones.svg<br />
*#JPG:又名JEPG,失真,壓縮,http://wportfolio.wzu.edu.tw/blog/attach/995/27995/89/bf_51402_8868906_99219_2yzUdJnLy0AsZ9VdwaKNCA.jpg<br />
*#PNG:不失真,公開格式,https://s-media-cache-ak0.pinimg.com/originals/96/94/ef/9694ef6ecfd562c83e7a445ee9ee19ba.png<br />
*#GIF:可動畫,256色,https://2.bp.blogspot.com/-Ra6UuzwDGQg/WDfdq3X1GjI/AAAAAAAD0gc/MfVErIwBENYRH_DvvFsnThfYp-zVxugEgCLcB/s1600/AS000946_02.gif<br />
*SVG格式具有以下優點:<br />
*#圖檔可讀,易於修改和編輯（理論上如此,但實際上卻是因為各種不同的SVG檔編輯器而可能儲存成不易解讀的SVG檔案）<br />
*#與現有技術可以互動融合,例如,SVG技術本身的動態部分（包括時序控制和動畫）就是基於SMIL標準,另外,SVG檔案還可嵌入JavaScript（嚴格地說，應該是ECMAScript）指令碼來控制SVG物件<br />
*#SVG圖形格式可以方便的建立文字索引,從而實現基於內容的圖像搜尋<br />
*#SVG圖形格式支援多種濾鏡和特殊效果,在不改變圖像內容的前提下可以實現點陣圖格式中類似文字陰影的效果<br />
*#SVG圖形格式可以用來動態生成圖形,例如,可用SVG動態生成具有互動功能的地圖,嵌入網頁中,並顯示給終端用戶<br />
*SVG格式具有以下缺點：<br />
*#如何和已經占有重要市場份額的向量圖形格式Adobe Animate競爭的問題,事實上,Adobe Animate在Flash CC 2014版及以後的版本就都支援直接匯出SVG檔案了<br />
*#SVG的本地執行環境下的廠家支援程度<br />
*#由於原始的SVG檔是遵從XML語法,導致資料採用未壓縮的方式存放,因此相較於其他的向量圖形格式,同樣的檔案內容會比其他的檔案格式稍大,Adobe因此使用gzip壓縮開發出壓縮的SVG檔格式,附檔名為 .svgz, 但此種檔案格式除了Adobe旗下的軟體以外,未被廣泛支援使用<br />
*#舊版的SVG Viewer無法正確顯示出使用新版SVG格式的向量圖形<br />
<br />
===2.♪基本架構♪===<br />
*基本架構:SVG允許3種圖形物件類型：向量圖形,柵格圖像以及文字,圖形物件——包括PNG&JPEG這些柵格圖像——能夠被編組&設計&轉換及整合進先前的彩現物件中,文字可以在任何適用於應用程式的XML命名空間之內,從而提高SVG圖形的搜尋能力和無障礙性,SVG提供的功能集涵蓋了巢狀轉換&裁剪路徑&Alpha通道&濾鏡效果&模板物件以及可延伸性,SVG嚴格遵從XML語法,並用文字格式的描述性語言來描述圖像內容,因此是一種和圖像解析度無關的向量圖形格式,SVG可以實現動態和互動功能,在DOM模型的基礎上,SVG開發設計人員可以利用ECMAScript或者SMIL來進行時序控制或物件的操縱,SVG雖然是文字格式,但是SVG支援利用gzip壓縮演算法減少檔案尺寸,壓縮後的檔案通常用被稱為「SVGZ檔案」<br />
*SVG主要支援以下幾種顯示物件：<br />
*#向量顯示物件,基本向量顯示物件包括矩形&圓&橢圓&多邊形&直線&任意曲線等<br />
*#嵌入式外部圖像,包括PNG&JPEG&SVG等<br />
*#文字物件<br />
*基本樣式:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/arrow.svg<br />
*基本圖形:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/bearFace.svg<br />
<br />
===3.♪文字♪===<br />
*TEXT<br />
*#在「text」標籤開始與結束之間夾字,可用中英文,而使用「屬性」來規定文字的表現,所有的屬性都可以改用樣式來表達<br />
*#可用中文字形：<br />
*##屬性dx和dy基於前一個字的位置去做變化：值可為'10,20,30,40'，字的距離一個比一個更遠<br />
*##屬性x和y標示字的起點：值可為'10,20,30,40'，表示每個字的x或y座標<br />
*##屬性fill控制填入字的顏色,預設黑色<br />
*##屬性stroke控制字描框的顏色,預設 none<br />
*##屬性rotate='30'順時鐘轉30°。rotate='30,60,90,120,150,180,210'指定每個字的轉動角度<br />
*##用style控制字體&字形&尺寸,但顏色是用fill不是用color <br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/text.svg<br />
<br />
===4.♪位移&旋轉&縮放&歪斜♪===<br />
*相關屬性說明：<br />
*#平移變換(translate)：transform="translate(x,y)",即新坐標系的原點在原坐標系的(x,y)處,坐標軸的方向不變<br />
*#旋轉變換(rotate)：transform="rotate(angle cx,cy)",angle代表旋轉角度,預設單位是「度」,順時針為正,逆時針為負,(cx,cy)是旋轉中心所在的坐標,若省略旋轉中心坐標,則預設值是(0,0)<br />
*#伸縮變換(scale)：transform="scale(sx,sy)",sx,sy分別代表x軸方向和y方向拉伸或縮小的比例因子,拉伸：大於1；縮小：小於1,若省略sy，即sy=sx，作等比例縮放<br />
*#歪斜變換(skew)：transform='skewX(x-angle)'或transform='skewY(y-angle)',x-angle,y-angle分別代表沿x軸和y軸歪斜的角度<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/transform.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/bearFace.svg<br />
<br />
===5.♪群組♪===<br />
*步驟:<br />
*#先添加svg標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，其中才有href屬性的定義<br />
*#在defs段落中定義圖形，並賦予id<br />
*#用<use xlink:href='#某id'/>來引用既有的定義<br />
<br />
===6.♪定義一次,引用多次♪===<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/uses.svg<br />
<br />
===7.♪漸層♪===<br />
*漸層和濾鏡如果取中文名稱,瀏覽器還認得,但Inkscape和線上轉檔軟體就會不認得<br />
*「漸層」工具可以在多種顏色之間建立漸層混合,您可以從預設漸層填色中選擇,或是建立自己的漸層填色<br />
*線性漸層沿著直線從起點到終點建立陰影<br />
*放射性漸層沿著圓形圖樣從起點到終點建立陰影<br />
*尖角漸層繞著起點以逆時針掃射的方式建立陰影<br />
*反射性漸層在起點的一側建立相同的鏡像線性漸層<br />
*菱形漸層從菱形圖樣的中央往外建立陰影<br />
====(1)☆線性漸層☆====<br />
*步驟：<br />
*#不用添加svg標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，不會用到href屬性<br />
*#在defs段落中定義漸層,並賦予id<br />
*#用fill='url(#某id)'屬性來引用既有的漸層定義<br />
*linearGradient 線性漸層定義語法說明:<br />
*#漸層標籤中的 100%，指的是整個圖形<br />
*#其中的 id 屬性定出漸層名稱<br />
*#由x1,y1,x2,y2四個屬性決定漸層範圍,以及水平,垂直或角形漸層,四個屬性都以百分比表示：<br />
*##x1,y1,x2,y2屬性決定漸層開始和結束位置,x1,x2以圖形的寬度為準,y1,y2以圖形的高度為準<br />
*##當y1和y2相等,而x1和x2不同時,可創建水平漸層<br />
*##當x1和x2相等,而y1和y2不同時,可創建垂直漸層<br />
*##當x1和x2不同,且y1和y2不同時,可創建角形漸層<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/h.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/v.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/arrow.svg<br />
<br />
====(2)☆放射漸層☆====<br />
*radialGradient 放設漸層定義語法說明:<br />
*#漸層範圍：由cx,cy,r三個屬性決定,三個屬性都以百分比表示,漸層範圍是一個圓或橢圓<br />
*##cx表示範圍中心在圖寬百分之幾的位置<br />
*##cy表示範圍中心在圖高百分之幾的位置<br />
*##r如果圖形寬&高相等則範圍為圓,r代表範圍圓半俓除以圖形寬或高；如果圖形寬&高不相等則範圍為橢圓,r代表範圍橢圓的長短軸半長除以圖形寬或高；注意：r為50%,範圍圓直徑恰等於圖的寬或高<br />
*#設色中心：由fx,fy兩個屬性決定的位置,就是設色為0%的地方,兩個屬性都以百分比表示<br />
*##fx表示設色中心在圖寬百分之幾的位置<br />
*##fy表示設色中心在圖高百分之幾的位置<br />
*##設色100%的地方在範圍圓或範圍橢圓的圓周上<br />
*#設色標籤stop,漸層標籤包住數個stop標籤,每種顏色通過一個stop標籤來規定<br />
*##offset屬性用來定義漸層的開始和結束位置,其100%是指整個漸層範圍<br />
*##stop-color屬性用來定義顏色,也可以做為style的樣式<br />
*##stop-opacity屬性決定透明度,也可以做為style的樣式<br />
*#以ball3.svg為例：漸層範圍為整個圓,因為cx,cy,r都是50% ,而設色中心在中間下方,因為fx='50%' fy='100%' ,此處是stop設為0%的顏色(白色),而範圍圓週邊是stop設為100%的顏色(黑色)<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball1.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball2.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball3.svg<br />
<br />
===8.♪柔焦濾鏡♪===<br />
*濾鏡標籤filter語法說明:<br />
*#其中的id屬性定出濾鏡名稱<br />
*#也可以設width,height,x,y去定濾鏡範圍和起點,如沒設以整個圖形為範圍<br />
*#高斯模糊濾鏡feGaussianBlur：濾鏡標籤包住數種不同效果的濾鏡,高斯模糊濾鏡是最簡單的濾鏡<br />
*#高斯模糊濾鏡主要只有一個參數：stdDeviation(標準差),用來控制模糊的程度,數字越大越模糊,數字為零則是圖片原本的狀態<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/sun.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/waterfall1.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/waterfall2.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/waterfall3.svg<br />
<br />
===9.♪path♪===<br />
*path<br />
*#參數大寫代表絕對座標,小寫代表與前一個座標的相對座標<br />
*#點與點之間&同點的x,y座標之間,用空白間開或用,間開兩者是等價的<br />
*http://www.oxxostudio.tw/articles/201406/svg-04-path-1.html<br />
*http://www.oxxostudio.tw/articles/201406/svg-05-path-2.html<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/path01.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/path02.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/path03.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/path04.svg<br />
<br />
===10.♪動畫♪===<br />
*四標籤：<br />
*#set(開關)<br />
*#animate(屬性連續改變)<br />
*#animateTransform(平移,旋轉,縮放)<br />
*#animateMotion(循跡運動)<br />
*共通語法：將母圖形分拆成開始和結束兩標籤,中間插入動畫標籤<br />
*共通屬性：<br />
*#attributeName：<br />
*##set,animate為某一個母圖形的屬性,from和to就是這個屬性的值將由多少變到多少<br />
*##animateTransform為'transform'另搭配type屬性<br />
*##animateMotion免設此屬性<br />
*#type屬性之值(animateTransform專用)：<br />
*##rotate旋轉,影響屬性from='起始角度,旋轉軸心x座標,旋轉軸心y座標'、to='結束角度,旋轉軸心x座標,旋轉軸心y座標'<br />
*##scale縮放,影響屬性from='x起始倍率,y起始倍率'、to='x結束倍率,y結束倍率'，倍率是自左上原點開始算,如果同組x,y倍率相同,可以只寫一個值<br />
*##translate平移,影響屬性from='起始原點x座標,起始原點y座標'、to='結束原點x座標,結束原點y座標'<br />
*##skewX X軸不動,X軸下方向右歪斜,影響屬性from='起始歪斜角度'、to='結束歪斜角度'<br />
*##skewY Y軸不動,Y軸右方向下歪斜,影響屬性from='起始歪斜角度'、to='結束歪斜角度'<br />
*#begin='幾s'：幾秒開始跑,通常設為0s<br />
*#dur='幾s'：跑一輪要幾秒,可以設為indefinite<br />
*#repeatCount='幾'：要跑幾輪,indefinite代表無限多輪,預設值為1<br />
*#from開始狀態(animate,animateTransform有)<br />
*#to結束狀態(set,animate,animateTransform有)<br />
*#path(animateMotion專用)屬性為移動路徑：由m開始<br />
*#rotate='auto'(animateMotion專用)圖形隨路徑曲度而轉折<br />
*http://jendo.org/~admin/path5.svg<br />
*http://jendo.org/~admin/path6.svg<br />
*https://msdn.microsoft.com/zh-tw/library/gg193979(v=vs.85).aspx<br />
<br />
==♡Inkscape♡==<br />
*inkscape下載,64位元：安裝版(62.7MB)|免安裝版(可攜式)(59.9MB)→下載對應的免安裝版→解壓縮<br />
*素材：<br />
*#org=公共利益用,源軟體（英語：open source software,英文縮寫：OSS，中文也稱：開放原始碼軟體）是一種原始碼可以任意取用的電腦軟體,這種軟體的版權持有人在軟體協定的規定之下保留一部分權利並允許用戶學習&修改&增進提高這款軟體的品質,開源協定通常符合開放原始碼的定義的要求,一些開源軟體被釋出到公有領域,開源軟體常被公開和合作地開發<br />
*#com=商業軟體（英語：Commercial software）是在電腦軟體中被作為商品進行交易的軟體,未必是商用軟體,至2000年代,大多數的軟體都屬於商業軟體,相對於商業軟體,有非商業的專有軟體（Proprietary Software）（但專有軟體中大部份都屬於商業軟體）,可供分享使用的自由軟體（Free Software）&共享軟體（Shareware）&免費軟體（Freeware）等<br />
*Vector/animals<br />
*#選一個圖→下載解壓縮(ai)→解散群組→取出圖檔→調整紙張→匯出點陣圖<br />
<br />
==♡GIS♡==<br />
*何謂GIS:地理資訊系統（英語：Geographic Information System,縮寫：GIS）是指在地圖上加上數據或訊息,結合地理學與地圖學,已經廣泛的應用在不同的領域,是用於輸入&儲存&查詢&分析和顯示地理資料的電腦系統,GIS屬於資訊系統的一類,不同在於它能運作和處理地理參照資料,地理參照資料描述地球表面（包括大氣層和較淺的地表下空間）空間要素的位置和屬性,在GIS中的兩種地理資料成分：空間資料,與空間要素幾何特性有關；屬性資料,提供空間要素的資訊<br />
*兩種主要的GIS:<br />
*#google map：google釋出的地圖庫,公布了API使得用戶能夠建立自訂的應用,公開格式,但非公共版權內容<br />
*#OpenStreetMap：(開放街圖，簡稱OSM),於2004年由英國的Steve Coast發起,採用類似Wiki的協作編輯以及開放的授權與格式<br />
*基本框架:比較出名的GIS底層數據框架GDAL<br />
*#地圖的需求:<br />
*##點擊地物,顯示地物的屬性信息和關聯的數據<br />
*##單值&分段專題圖<br />
*##連接業務數據庫獲取最新數據<br />
*##疊加不同地圖<br />
*marks:標點<br />
*overlays:標區域<br />
*google我的地圖:<br />
*結合我的地圖與 GIS<br />
<br />
==♡圖形計算機♡==<br />
*取得 svgdraw.php<br />
*基本框架<br />
*繪製基本圖形<br />
*函式繪圖<br />
*google 圖形計算機</div>
蕭卉均
http://well-being-ng.net/wiki1231/index.php?title=%E8%A8%8E%E8%AB%96:%E8%B3%87%E8%A8%8A%E5%9F%BA%E7%A4%8E%E6%87%89%E7%94%A8/%E8%95%AD%E5%8D%89%E5%9D%87&diff=37921
討論:資訊基礎應用/蕭卉均
2018-01-16T11:08:04Z
<p>蕭卉均：/* ♡Inkscape♡ */</p>
<hr />
<div>=ღ完整筆記ღ=<br />
==♡環境&工具♡==<br />
===1.♪環境♪===<br />
*伺服器與域名,伺服器DS216,網址6years.jendo.org<br />
*wifi,區網wifi：jendod&jendoa,密碼:jendo19690929<br />
*網站空間,瀏覽器：firefox,優先於chrome,盡量不用IE<br />
*wiki上的個人頁,filezilla→開啟filezilla,並新增一個站台叫♕DS216+(共用)♕→主機設定:6years.jendo.org→協定:SFTP→使用者:共用→字碼集:UTF-8→連線,然後到♕home/www♕→建自己帳號的連線→可用的文字編輯器,如emeditor→連結filezilla&慣用的文字編輯器：♕編輯/設定/檔案編輯♕，選用♕使用自訂編輯器♕&♕總是使用預設的編輯器♕，並指定編輯器的路徑<br />
*課後重點筆記:<br />
*#table是開始,/table是結束<br />
*#IP:IP4,最多表達到255字,IPV4一般網頁使用,IP6,物聯網用<br />
*#物聯網:簡單說一切事物,得失相兼<br />
*#域名:域名伺服器(HOSTS)<br />
*#AI(人工智慧)<br />
*#big5,早期,只有繁體中文<br />
*#UTF-8,萬國碼<br />
<br />
===2.♪工具與設定♪===<br />
*firefox:Mozilla Firefox（簡稱Firefox）,中文俗稱火狐（中國大陸官方有使用但未註冊為商標）,是一個自由及開放原始碼的網頁瀏覽器,由Mozilla基金會及其子公司Mozilla公司開發<br />
*filezilla:ileZilla是一種快速&可信賴的FTP用戶端以及伺服器端開放原始碼程式,具有多種特色&直覺的介面,FileZilla在2003年11月獲選為SourceForge.net當月最佳推薦專案<br />
*EmEditor:EmEditor是江村軟體公司（Emurasoft,坐落於美國華盛頓州）所開發的一款在Windows平台上運行的文字編輯程式,EmEditor以運作輕巧&敏捷而又功能強大&豐富著稱而得到許多用戶的好評<br />
<br />
==♡HTML&HTTP♡==<br />
*發有者及發明年代:於西元1993年,W3C&WHATWG開發<br />
*HTML:超文件標示語言（英語：HyperText Markup Language,簡稱：HTML）是一種用於建立網頁的標準標示語言,HTML是一種基礎技術常與CSS&JavaScript一起被眾多網站用於設計令人賞心悅目的網頁&網頁應用程式以及行動應用程式的使用者介面<br />
*HTTP:超文本傳輸協定（英文：HyperText Transfer Protocol,縮寫：HTTP）是一種用於分佈式&協作式和超媒體資訊系統的應用層協議,HTTP是全球資訊網的資料通訊的基礎<br />
*xml:可延伸標記式語言（英語：Extensible Markup Language,簡稱：XML）是一種標記式語言,標記指電腦所能理解的資訊符號,通過此種標記,電腦之間可以處理包含各種資訊的文章等<br />
*課後筆記:<br />
*#筆記網頁建設:登入後搜尋{資訊基礎應用/蕭卉均}→點一下，開始編輯→編輯完點儲存頁面<br />
*#色碼表:https://www.toodoo.com/db/color.html<br />
*通訊錄:<br />
*<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
<table class='nicetable'><br />
<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
</table><br />
<br />
==♡ wiki ♡==<br />
*何謂wiki:Wiki是一種在全球資訊網上開放且可供多人協同創作的超文字系統,由沃德·坎寧安於1995年首先開發,沃德·坎寧安將wiki定義為「一種允許一群用戶用簡單的描述來建立和連線一組網頁的社會計算系統」<br />
*CC授權:創用CC授權條款（英語：Creative Commons license,簡稱CC授權）是一種公共版權授權條款,其允許分發受版權保護的作品,一個創用CC授權用於一個作者想給他人分享&使用&甚至創作衍生作品的權利<br />
*wiki語法:http://jendo.synology.me/wiki1231/index.php?title=Wiki_%E5%85%A5%E9%96%80%E8%AA%9E%E6%B3%95<br />
*wiki的word適應:履歷表<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E5%B1%A5%E6%AD%B7%E8%A1%A8.html<br />
==♡CSS♡==<br />
*何謂CSS:層疊樣式表（英語：Cascading Style Sheets,簡寫CSS）又稱串樣式列表&級聯樣式表&串接樣式表&層疊樣式表&階層式樣式表,一種用來為結構化文件（如HTML文件或XML應用）添加樣式（字型、間距和顏色等）的電腦語言,由W3C定義和維護,目前最新版本是CSS2.1，為W3C的推薦標準,CSS3現在已被大部分現代瀏覽器支援,而下一版的CSS4仍在開發中<br />
*用法:限制者才有標章,不限制者沒有標章<br />
*重要語法:<br />
*#Attribution(BY):姓名標示,您（使用者）可以複製&發行&展覽&表演&放映&廣播或通過資訊網路傳播本作品；您必須按照作者或者授權人指定的方式對作品進行姓名標示<br />
*#NonCommercial(NC):非商業性使用,您可以自由複製&散布&展示及演出本作品；您不得為商業目的而使用本作品<br />
*#NoDerivs(ND):禁止改作,您可以自由複製&散布&展示及演出本作品；您不得改變&轉變或更改本作品<br />
*#ShareAlike(SA):相同方式分享,您可以自由複製&散布&展示及演出本作品；若您改變&轉變或更改本作品,僅在遵守與本作品相同的授權條款下,您才能散布由本作品產生的衍生作品<br />
<br />
==♡SVG♡==<br />
===1.♪概述♪===<br />
*何謂SVG:可縮放向量圖形（英語：Scalable Vector Graphics,SVG）是一種基於可延伸標記式語言（XML）,用於描述二維向量圖形的圖形格式,SVG由W3C制定,是一個開放標準<br />
*點陣圖與向量圖的比較(含附檔名):<br />
*#SVG:又為向量圖,特色,放大不毛邊,https://upload.wikimedia.org/wikipedia/commons/5/53/Skull_and_crossbones.svg<br />
*#JPG:又名JEPG,失真,壓縮,http://wportfolio.wzu.edu.tw/blog/attach/995/27995/89/bf_51402_8868906_99219_2yzUdJnLy0AsZ9VdwaKNCA.jpg<br />
*#PNG:不失真,公開格式,https://s-media-cache-ak0.pinimg.com/originals/96/94/ef/9694ef6ecfd562c83e7a445ee9ee19ba.png<br />
*#GIF:可動畫,256色,https://2.bp.blogspot.com/-Ra6UuzwDGQg/WDfdq3X1GjI/AAAAAAAD0gc/MfVErIwBENYRH_DvvFsnThfYp-zVxugEgCLcB/s1600/AS000946_02.gif<br />
*SVG格式具有以下優點:<br />
*#圖檔可讀,易於修改和編輯（理論上如此,但實際上卻是因為各種不同的SVG檔編輯器而可能儲存成不易解讀的SVG檔案）<br />
*#與現有技術可以互動融合,例如,SVG技術本身的動態部分（包括時序控制和動畫）就是基於SMIL標準,另外,SVG檔案還可嵌入JavaScript（嚴格地說，應該是ECMAScript）指令碼來控制SVG物件<br />
*#SVG圖形格式可以方便的建立文字索引,從而實現基於內容的圖像搜尋<br />
*#SVG圖形格式支援多種濾鏡和特殊效果,在不改變圖像內容的前提下可以實現點陣圖格式中類似文字陰影的效果<br />
*#SVG圖形格式可以用來動態生成圖形,例如,可用SVG動態生成具有互動功能的地圖,嵌入網頁中,並顯示給終端用戶<br />
*SVG格式具有以下缺點：<br />
*#如何和已經占有重要市場份額的向量圖形格式Adobe Animate競爭的問題,事實上,Adobe Animate在Flash CC 2014版及以後的版本就都支援直接匯出SVG檔案了<br />
*#SVG的本地執行環境下的廠家支援程度<br />
*#由於原始的SVG檔是遵從XML語法,導致資料採用未壓縮的方式存放,因此相較於其他的向量圖形格式,同樣的檔案內容會比其他的檔案格式稍大,Adobe因此使用gzip壓縮開發出壓縮的SVG檔格式,附檔名為 .svgz, 但此種檔案格式除了Adobe旗下的軟體以外,未被廣泛支援使用<br />
*#舊版的SVG Viewer無法正確顯示出使用新版SVG格式的向量圖形<br />
<br />
===2.♪基本架構♪===<br />
*基本架構:SVG允許3種圖形物件類型：向量圖形,柵格圖像以及文字,圖形物件——包括PNG&JPEG這些柵格圖像——能夠被編組&設計&轉換及整合進先前的彩現物件中,文字可以在任何適用於應用程式的XML命名空間之內,從而提高SVG圖形的搜尋能力和無障礙性,SVG提供的功能集涵蓋了巢狀轉換&裁剪路徑&Alpha通道&濾鏡效果&模板物件以及可延伸性,SVG嚴格遵從XML語法,並用文字格式的描述性語言來描述圖像內容,因此是一種和圖像解析度無關的向量圖形格式,SVG可以實現動態和互動功能,在DOM模型的基礎上,SVG開發設計人員可以利用ECMAScript或者SMIL來進行時序控制或物件的操縱,SVG雖然是文字格式,但是SVG支援利用gzip壓縮演算法減少檔案尺寸,壓縮後的檔案通常用被稱為「SVGZ檔案」<br />
*SVG主要支援以下幾種顯示物件：<br />
*#向量顯示物件,基本向量顯示物件包括矩形&圓&橢圓&多邊形&直線&任意曲線等<br />
*#嵌入式外部圖像,包括PNG&JPEG&SVG等<br />
*#文字物件<br />
*基本樣式:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/arrow.svg<br />
*基本圖形:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/bearFace.svg<br />
<br />
===3.♪文字♪===<br />
*TEXT<br />
*#在「text」標籤開始與結束之間夾字,可用中英文,而使用「屬性」來規定文字的表現,所有的屬性都可以改用樣式來表達<br />
*#可用中文字形：<br />
*##屬性dx和dy基於前一個字的位置去做變化：值可為'10,20,30,40'，字的距離一個比一個更遠<br />
*##屬性x和y標示字的起點：值可為'10,20,30,40'，表示每個字的x或y座標<br />
*##屬性fill控制填入字的顏色,預設黑色<br />
*##屬性stroke控制字描框的顏色,預設 none<br />
*##屬性rotate='30'順時鐘轉30°。rotate='30,60,90,120,150,180,210'指定每個字的轉動角度<br />
*##用style控制字體&字形&尺寸,但顏色是用fill不是用color <br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/text.svg<br />
<br />
===4.♪位移&旋轉&縮放&歪斜♪===<br />
*相關屬性說明：<br />
*#平移變換(translate)：transform="translate(x,y)",即新坐標系的原點在原坐標系的(x,y)處,坐標軸的方向不變<br />
*#旋轉變換(rotate)：transform="rotate(angle cx,cy)",angle代表旋轉角度,預設單位是「度」,順時針為正,逆時針為負,(cx,cy)是旋轉中心所在的坐標,若省略旋轉中心坐標,則預設值是(0,0)<br />
*#伸縮變換(scale)：transform="scale(sx,sy)",sx,sy分別代表x軸方向和y方向拉伸或縮小的比例因子,拉伸：大於1；縮小：小於1,若省略sy，即sy=sx，作等比例縮放<br />
*#歪斜變換(skew)：transform='skewX(x-angle)'或transform='skewY(y-angle)',x-angle,y-angle分別代表沿x軸和y軸歪斜的角度<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/transform.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/bearFace.svg<br />
<br />
===5.♪群組♪===<br />
*步驟:<br />
*#先添加svg標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，其中才有href屬性的定義<br />
*#在defs段落中定義圖形，並賦予id<br />
*#用<use xlink:href='#某id'/>來引用既有的定義<br />
<br />
===6.♪定義一次,引用多次♪===<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/uses.svg<br />
<br />
===7.♪漸層♪===<br />
*漸層和濾鏡如果取中文名稱,瀏覽器還認得,但Inkscape和線上轉檔軟體就會不認得<br />
*「漸層」工具可以在多種顏色之間建立漸層混合,您可以從預設漸層填色中選擇,或是建立自己的漸層填色<br />
*線性漸層沿著直線從起點到終點建立陰影<br />
*放射性漸層沿著圓形圖樣從起點到終點建立陰影<br />
*尖角漸層繞著起點以逆時針掃射的方式建立陰影<br />
*反射性漸層在起點的一側建立相同的鏡像線性漸層<br />
*菱形漸層從菱形圖樣的中央往外建立陰影<br />
====(1)☆線性漸層☆====<br />
*步驟：<br />
*#不用添加svg標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，不會用到href屬性<br />
*#在defs段落中定義漸層,並賦予id<br />
*#用fill='url(#某id)'屬性來引用既有的漸層定義<br />
*linearGradient 線性漸層定義語法說明:<br />
*#漸層標籤中的 100%，指的是整個圖形<br />
*#其中的 id 屬性定出漸層名稱<br />
*#由x1,y1,x2,y2四個屬性決定漸層範圍,以及水平,垂直或角形漸層,四個屬性都以百分比表示：<br />
*##x1,y1,x2,y2屬性決定漸層開始和結束位置,x1,x2以圖形的寬度為準,y1,y2以圖形的高度為準<br />
*##當y1和y2相等,而x1和x2不同時,可創建水平漸層<br />
*##當x1和x2相等,而y1和y2不同時,可創建垂直漸層<br />
*##當x1和x2不同,且y1和y2不同時,可創建角形漸層<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/h.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/v.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/arrow.svg<br />
<br />
====(2)☆放射漸層☆====<br />
*radialGradient 放設漸層定義語法說明:<br />
*#漸層範圍：由cx,cy,r三個屬性決定,三個屬性都以百分比表示,漸層範圍是一個圓或橢圓<br />
*##cx表示範圍中心在圖寬百分之幾的位置<br />
*##cy表示範圍中心在圖高百分之幾的位置<br />
*##r如果圖形寬&高相等則範圍為圓,r代表範圍圓半俓除以圖形寬或高；如果圖形寬&高不相等則範圍為橢圓,r代表範圍橢圓的長短軸半長除以圖形寬或高；注意：r為50%,範圍圓直徑恰等於圖的寬或高<br />
*#設色中心：由fx,fy兩個屬性決定的位置,就是設色為0%的地方,兩個屬性都以百分比表示<br />
*##fx表示設色中心在圖寬百分之幾的位置<br />
*##fy表示設色中心在圖高百分之幾的位置<br />
*##設色100%的地方在範圍圓或範圍橢圓的圓周上<br />
*#設色標籤stop,漸層標籤包住數個stop標籤,每種顏色通過一個stop標籤來規定<br />
*##offset屬性用來定義漸層的開始和結束位置,其100%是指整個漸層範圍<br />
*##stop-color屬性用來定義顏色,也可以做為style的樣式<br />
*##stop-opacity屬性決定透明度,也可以做為style的樣式<br />
*#以ball3.svg為例：漸層範圍為整個圓,因為cx,cy,r都是50% ,而設色中心在中間下方,因為fx='50%' fy='100%' ,此處是stop設為0%的顏色(白色),而範圍圓週邊是stop設為100%的顏色(黑色)<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball1.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball2.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball3.svg<br />
<br />
===8.♪柔焦濾鏡♪===<br />
*濾鏡標籤filter語法說明:<br />
*#其中的id屬性定出濾鏡名稱<br />
*#也可以設width,height,x,y去定濾鏡範圍和起點,如沒設以整個圖形為範圍<br />
*#高斯模糊濾鏡feGaussianBlur：濾鏡標籤包住數種不同效果的濾鏡,高斯模糊濾鏡是最簡單的濾鏡<br />
*#高斯模糊濾鏡主要只有一個參數：stdDeviation(標準差),用來控制模糊的程度,數字越大越模糊,數字為零則是圖片原本的狀態<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/sun.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/waterfall1.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/waterfall2.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/waterfall3.svg<br />
<br />
===9.♪path♪===<br />
*path<br />
*#參數大寫代表絕對座標,小寫代表與前一個座標的相對座標<br />
*#點與點之間&同點的x,y座標之間,用空白間開或用,間開兩者是等價的<br />
*http://www.oxxostudio.tw/articles/201406/svg-04-path-1.html<br />
*http://www.oxxostudio.tw/articles/201406/svg-05-path-2.html<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/path01.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/path02.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/path03.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/path04.svg<br />
<br />
===10.♪動畫♪===<br />
*四標籤：<br />
*#set(開關)<br />
*#animate(屬性連續改變)<br />
*#animateTransform(平移,旋轉,縮放)<br />
*#animateMotion(循跡運動)<br />
*共通語法：將母圖形分拆成開始和結束兩標籤,中間插入動畫標籤<br />
*共通屬性：<br />
*#attributeName：<br />
*##set,animate為某一個母圖形的屬性,from和to就是這個屬性的值將由多少變到多少<br />
*##animateTransform為'transform'另搭配type屬性<br />
*##animateMotion免設此屬性<br />
*#type屬性之值(animateTransform專用)：<br />
*##rotate旋轉,影響屬性from='起始角度,旋轉軸心x座標,旋轉軸心y座標'、to='結束角度,旋轉軸心x座標,旋轉軸心y座標'<br />
*##scale縮放,影響屬性from='x起始倍率,y起始倍率'、to='x結束倍率,y結束倍率'，倍率是自左上原點開始算,如果同組x,y倍率相同,可以只寫一個值<br />
*##translate平移,影響屬性from='起始原點x座標,起始原點y座標'、to='結束原點x座標,結束原點y座標'<br />
*##skewX X軸不動,X軸下方向右歪斜,影響屬性from='起始歪斜角度'、to='結束歪斜角度'<br />
*##skewY Y軸不動,Y軸右方向下歪斜,影響屬性from='起始歪斜角度'、to='結束歪斜角度'<br />
*#begin='幾s'：幾秒開始跑,通常設為0s<br />
*#dur='幾s'：跑一輪要幾秒,可以設為indefinite<br />
*#repeatCount='幾'：要跑幾輪,indefinite代表無限多輪,預設值為1<br />
*#from開始狀態(animate,animateTransform有)<br />
*#to結束狀態(set,animate,animateTransform有)<br />
*#path(animateMotion專用)屬性為移動路徑：由m開始<br />
*#rotate='auto'(animateMotion專用)圖形隨路徑曲度而轉折<br />
*http://jendo.org/~admin/path5.svg<br />
*http://jendo.org/~admin/path6.svg<br />
*https://msdn.microsoft.com/zh-tw/library/gg193979(v=vs.85).aspx<br />
<br />
==♡Inkscape♡==<br />
*inkscape下載,64位元：安裝版(62.7MB)|免安裝版(可攜式)(59.9MB)→下載對應的免安裝版→解壓縮<br />
*素材：<br />
*#org=公共利益用,源軟體（英語：open source software,英文縮寫：OSS，中文也稱：開放原始碼軟體）是一種原始碼可以任意取用的電腦軟體,這種軟體的版權持有人在軟體協定的規定之下保留一部分權利並允許用戶學習&修改&增進提高這款軟體的品質,開源協定通常符合開放原始碼的定義的要求,一些開源軟體被釋出到公有領域,開源軟體常被公開和合作地開發<br />
*#com=商業軟體（英語：Commercial software）是在電腦軟體中被作為商品進行交易的軟體,未必是商用軟體,至2000年代,大多數的軟體都屬於商業軟體,相對於商業軟體,有非商業的專有軟體（Proprietary Software）（但專有軟體中大部份都屬於商業軟體）,可供分享使用的自由軟體（Free Software）&共享軟體（Shareware）&免費軟體（Freeware）等<br />
*Vector/animals<br />
*#選一個圖→下載解壓縮(ai)→解散群組→取出圖檔→調整紙張→匯出點陣圖<br />
<br />
==♡GIS♡==<br />
*何謂 GIS ？<br />
*兩種主要的 GIS 。<br />
*基本框架。<br />
*marks<br />
*overlays<br />
*google 我的地圖<br />
*結合我的地圖與 GIS<br />
<br />
==♡圖形計算機♡==<br />
*取得 svgdraw.php<br />
*基本框架<br />
*繪製基本圖形<br />
*函式繪圖<br />
*google 圖形計算機</div>
蕭卉均
http://well-being-ng.net/wiki1231/index.php?title=%E8%A8%8E%E8%AB%96:%E8%B3%87%E8%A8%8A%E5%9F%BA%E7%A4%8E%E6%87%89%E7%94%A8/%E8%95%AD%E5%8D%89%E5%9D%87&diff=37920
討論:資訊基礎應用/蕭卉均
2018-01-16T11:07:12Z
<p>蕭卉均：/* ♡Inkscape♡ */</p>
<hr />
<div>=ღ完整筆記ღ=<br />
==♡環境&工具♡==<br />
===1.♪環境♪===<br />
*伺服器與域名,伺服器DS216,網址6years.jendo.org<br />
*wifi,區網wifi：jendod&jendoa,密碼:jendo19690929<br />
*網站空間,瀏覽器：firefox,優先於chrome,盡量不用IE<br />
*wiki上的個人頁,filezilla→開啟filezilla,並新增一個站台叫♕DS216+(共用)♕→主機設定:6years.jendo.org→協定:SFTP→使用者:共用→字碼集:UTF-8→連線,然後到♕home/www♕→建自己帳號的連線→可用的文字編輯器,如emeditor→連結filezilla&慣用的文字編輯器：♕編輯/設定/檔案編輯♕，選用♕使用自訂編輯器♕&♕總是使用預設的編輯器♕，並指定編輯器的路徑<br />
*課後重點筆記:<br />
*#table是開始,/table是結束<br />
*#IP:IP4,最多表達到255字,IPV4一般網頁使用,IP6,物聯網用<br />
*#物聯網:簡單說一切事物,得失相兼<br />
*#域名:域名伺服器(HOSTS)<br />
*#AI(人工智慧)<br />
*#big5,早期,只有繁體中文<br />
*#UTF-8,萬國碼<br />
<br />
===2.♪工具與設定♪===<br />
*firefox:Mozilla Firefox（簡稱Firefox）,中文俗稱火狐（中國大陸官方有使用但未註冊為商標）,是一個自由及開放原始碼的網頁瀏覽器,由Mozilla基金會及其子公司Mozilla公司開發<br />
*filezilla:ileZilla是一種快速&可信賴的FTP用戶端以及伺服器端開放原始碼程式,具有多種特色&直覺的介面,FileZilla在2003年11月獲選為SourceForge.net當月最佳推薦專案<br />
*EmEditor:EmEditor是江村軟體公司（Emurasoft,坐落於美國華盛頓州）所開發的一款在Windows平台上運行的文字編輯程式,EmEditor以運作輕巧&敏捷而又功能強大&豐富著稱而得到許多用戶的好評<br />
<br />
==♡HTML&HTTP♡==<br />
*發有者及發明年代:於西元1993年,W3C&WHATWG開發<br />
*HTML:超文件標示語言（英語：HyperText Markup Language,簡稱：HTML）是一種用於建立網頁的標準標示語言,HTML是一種基礎技術常與CSS&JavaScript一起被眾多網站用於設計令人賞心悅目的網頁&網頁應用程式以及行動應用程式的使用者介面<br />
*HTTP:超文本傳輸協定（英文：HyperText Transfer Protocol,縮寫：HTTP）是一種用於分佈式&協作式和超媒體資訊系統的應用層協議,HTTP是全球資訊網的資料通訊的基礎<br />
*xml:可延伸標記式語言（英語：Extensible Markup Language,簡稱：XML）是一種標記式語言,標記指電腦所能理解的資訊符號,通過此種標記,電腦之間可以處理包含各種資訊的文章等<br />
*課後筆記:<br />
*#筆記網頁建設:登入後搜尋{資訊基礎應用/蕭卉均}→點一下，開始編輯→編輯完點儲存頁面<br />
*#色碼表:https://www.toodoo.com/db/color.html<br />
*通訊錄:<br />
*<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
<table class='nicetable'><br />
<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
</table><br />
<br />
==♡ wiki ♡==<br />
*何謂wiki:Wiki是一種在全球資訊網上開放且可供多人協同創作的超文字系統,由沃德·坎寧安於1995年首先開發,沃德·坎寧安將wiki定義為「一種允許一群用戶用簡單的描述來建立和連線一組網頁的社會計算系統」<br />
*CC授權:創用CC授權條款（英語：Creative Commons license,簡稱CC授權）是一種公共版權授權條款,其允許分發受版權保護的作品,一個創用CC授權用於一個作者想給他人分享&使用&甚至創作衍生作品的權利<br />
*wiki語法:http://jendo.synology.me/wiki1231/index.php?title=Wiki_%E5%85%A5%E9%96%80%E8%AA%9E%E6%B3%95<br />
*wiki的word適應:履歷表<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E5%B1%A5%E6%AD%B7%E8%A1%A8.html<br />
==♡CSS♡==<br />
*何謂CSS:層疊樣式表（英語：Cascading Style Sheets,簡寫CSS）又稱串樣式列表&級聯樣式表&串接樣式表&層疊樣式表&階層式樣式表,一種用來為結構化文件（如HTML文件或XML應用）添加樣式（字型、間距和顏色等）的電腦語言,由W3C定義和維護,目前最新版本是CSS2.1，為W3C的推薦標準,CSS3現在已被大部分現代瀏覽器支援,而下一版的CSS4仍在開發中<br />
*用法:限制者才有標章,不限制者沒有標章<br />
*重要語法:<br />
*#Attribution(BY):姓名標示,您（使用者）可以複製&發行&展覽&表演&放映&廣播或通過資訊網路傳播本作品；您必須按照作者或者授權人指定的方式對作品進行姓名標示<br />
*#NonCommercial(NC):非商業性使用,您可以自由複製&散布&展示及演出本作品；您不得為商業目的而使用本作品<br />
*#NoDerivs(ND):禁止改作,您可以自由複製&散布&展示及演出本作品；您不得改變&轉變或更改本作品<br />
*#ShareAlike(SA):相同方式分享,您可以自由複製&散布&展示及演出本作品；若您改變&轉變或更改本作品,僅在遵守與本作品相同的授權條款下,您才能散布由本作品產生的衍生作品<br />
<br />
==♡SVG♡==<br />
===1.♪概述♪===<br />
*何謂SVG:可縮放向量圖形（英語：Scalable Vector Graphics,SVG）是一種基於可延伸標記式語言（XML）,用於描述二維向量圖形的圖形格式,SVG由W3C制定,是一個開放標準<br />
*點陣圖與向量圖的比較(含附檔名):<br />
*#SVG:又為向量圖,特色,放大不毛邊,https://upload.wikimedia.org/wikipedia/commons/5/53/Skull_and_crossbones.svg<br />
*#JPG:又名JEPG,失真,壓縮,http://wportfolio.wzu.edu.tw/blog/attach/995/27995/89/bf_51402_8868906_99219_2yzUdJnLy0AsZ9VdwaKNCA.jpg<br />
*#PNG:不失真,公開格式,https://s-media-cache-ak0.pinimg.com/originals/96/94/ef/9694ef6ecfd562c83e7a445ee9ee19ba.png<br />
*#GIF:可動畫,256色,https://2.bp.blogspot.com/-Ra6UuzwDGQg/WDfdq3X1GjI/AAAAAAAD0gc/MfVErIwBENYRH_DvvFsnThfYp-zVxugEgCLcB/s1600/AS000946_02.gif<br />
*SVG格式具有以下優點:<br />
*#圖檔可讀,易於修改和編輯（理論上如此,但實際上卻是因為各種不同的SVG檔編輯器而可能儲存成不易解讀的SVG檔案）<br />
*#與現有技術可以互動融合,例如,SVG技術本身的動態部分（包括時序控制和動畫）就是基於SMIL標準,另外,SVG檔案還可嵌入JavaScript（嚴格地說，應該是ECMAScript）指令碼來控制SVG物件<br />
*#SVG圖形格式可以方便的建立文字索引,從而實現基於內容的圖像搜尋<br />
*#SVG圖形格式支援多種濾鏡和特殊效果,在不改變圖像內容的前提下可以實現點陣圖格式中類似文字陰影的效果<br />
*#SVG圖形格式可以用來動態生成圖形,例如,可用SVG動態生成具有互動功能的地圖,嵌入網頁中,並顯示給終端用戶<br />
*SVG格式具有以下缺點：<br />
*#如何和已經占有重要市場份額的向量圖形格式Adobe Animate競爭的問題,事實上,Adobe Animate在Flash CC 2014版及以後的版本就都支援直接匯出SVG檔案了<br />
*#SVG的本地執行環境下的廠家支援程度<br />
*#由於原始的SVG檔是遵從XML語法,導致資料採用未壓縮的方式存放,因此相較於其他的向量圖形格式,同樣的檔案內容會比其他的檔案格式稍大,Adobe因此使用gzip壓縮開發出壓縮的SVG檔格式,附檔名為 .svgz, 但此種檔案格式除了Adobe旗下的軟體以外,未被廣泛支援使用<br />
*#舊版的SVG Viewer無法正確顯示出使用新版SVG格式的向量圖形<br />
<br />
===2.♪基本架構♪===<br />
*基本架構:SVG允許3種圖形物件類型：向量圖形,柵格圖像以及文字,圖形物件——包括PNG&JPEG這些柵格圖像——能夠被編組&設計&轉換及整合進先前的彩現物件中,文字可以在任何適用於應用程式的XML命名空間之內,從而提高SVG圖形的搜尋能力和無障礙性,SVG提供的功能集涵蓋了巢狀轉換&裁剪路徑&Alpha通道&濾鏡效果&模板物件以及可延伸性,SVG嚴格遵從XML語法,並用文字格式的描述性語言來描述圖像內容,因此是一種和圖像解析度無關的向量圖形格式,SVG可以實現動態和互動功能,在DOM模型的基礎上,SVG開發設計人員可以利用ECMAScript或者SMIL來進行時序控制或物件的操縱,SVG雖然是文字格式,但是SVG支援利用gzip壓縮演算法減少檔案尺寸,壓縮後的檔案通常用被稱為「SVGZ檔案」<br />
*SVG主要支援以下幾種顯示物件：<br />
*#向量顯示物件,基本向量顯示物件包括矩形&圓&橢圓&多邊形&直線&任意曲線等<br />
*#嵌入式外部圖像,包括PNG&JPEG&SVG等<br />
*#文字物件<br />
*基本樣式:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/arrow.svg<br />
*基本圖形:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/bearFace.svg<br />
<br />
===3.♪文字♪===<br />
*TEXT<br />
*#在「text」標籤開始與結束之間夾字,可用中英文,而使用「屬性」來規定文字的表現,所有的屬性都可以改用樣式來表達<br />
*#可用中文字形：<br />
*##屬性dx和dy基於前一個字的位置去做變化：值可為'10,20,30,40'，字的距離一個比一個更遠<br />
*##屬性x和y標示字的起點：值可為'10,20,30,40'，表示每個字的x或y座標<br />
*##屬性fill控制填入字的顏色,預設黑色<br />
*##屬性stroke控制字描框的顏色,預設 none<br />
*##屬性rotate='30'順時鐘轉30°。rotate='30,60,90,120,150,180,210'指定每個字的轉動角度<br />
*##用style控制字體&字形&尺寸,但顏色是用fill不是用color <br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/text.svg<br />
<br />
===4.♪位移&旋轉&縮放&歪斜♪===<br />
*相關屬性說明：<br />
*#平移變換(translate)：transform="translate(x,y)",即新坐標系的原點在原坐標系的(x,y)處,坐標軸的方向不變<br />
*#旋轉變換(rotate)：transform="rotate(angle cx,cy)",angle代表旋轉角度,預設單位是「度」,順時針為正,逆時針為負,(cx,cy)是旋轉中心所在的坐標,若省略旋轉中心坐標,則預設值是(0,0)<br />
*#伸縮變換(scale)：transform="scale(sx,sy)",sx,sy分別代表x軸方向和y方向拉伸或縮小的比例因子,拉伸：大於1；縮小：小於1,若省略sy，即sy=sx，作等比例縮放<br />
*#歪斜變換(skew)：transform='skewX(x-angle)'或transform='skewY(y-angle)',x-angle,y-angle分別代表沿x軸和y軸歪斜的角度<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/transform.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/bearFace.svg<br />
<br />
===5.♪群組♪===<br />
*步驟:<br />
*#先添加svg標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，其中才有href屬性的定義<br />
*#在defs段落中定義圖形，並賦予id<br />
*#用<use xlink:href='#某id'/>來引用既有的定義<br />
<br />
===6.♪定義一次,引用多次♪===<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/uses.svg<br />
<br />
===7.♪漸層♪===<br />
*漸層和濾鏡如果取中文名稱,瀏覽器還認得,但Inkscape和線上轉檔軟體就會不認得<br />
*「漸層」工具可以在多種顏色之間建立漸層混合,您可以從預設漸層填色中選擇,或是建立自己的漸層填色<br />
*線性漸層沿著直線從起點到終點建立陰影<br />
*放射性漸層沿著圓形圖樣從起點到終點建立陰影<br />
*尖角漸層繞著起點以逆時針掃射的方式建立陰影<br />
*反射性漸層在起點的一側建立相同的鏡像線性漸層<br />
*菱形漸層從菱形圖樣的中央往外建立陰影<br />
====(1)☆線性漸層☆====<br />
*步驟：<br />
*#不用添加svg標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，不會用到href屬性<br />
*#在defs段落中定義漸層,並賦予id<br />
*#用fill='url(#某id)'屬性來引用既有的漸層定義<br />
*linearGradient 線性漸層定義語法說明:<br />
*#漸層標籤中的 100%，指的是整個圖形<br />
*#其中的 id 屬性定出漸層名稱<br />
*#由x1,y1,x2,y2四個屬性決定漸層範圍,以及水平,垂直或角形漸層,四個屬性都以百分比表示：<br />
*##x1,y1,x2,y2屬性決定漸層開始和結束位置,x1,x2以圖形的寬度為準,y1,y2以圖形的高度為準<br />
*##當y1和y2相等,而x1和x2不同時,可創建水平漸層<br />
*##當x1和x2相等,而y1和y2不同時,可創建垂直漸層<br />
*##當x1和x2不同,且y1和y2不同時,可創建角形漸層<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/h.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/v.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/arrow.svg<br />
<br />
====(2)☆放射漸層☆====<br />
*radialGradient 放設漸層定義語法說明:<br />
*#漸層範圍：由cx,cy,r三個屬性決定,三個屬性都以百分比表示,漸層範圍是一個圓或橢圓<br />
*##cx表示範圍中心在圖寬百分之幾的位置<br />
*##cy表示範圍中心在圖高百分之幾的位置<br />
*##r如果圖形寬&高相等則範圍為圓,r代表範圍圓半俓除以圖形寬或高；如果圖形寬&高不相等則範圍為橢圓,r代表範圍橢圓的長短軸半長除以圖形寬或高；注意：r為50%,範圍圓直徑恰等於圖的寬或高<br />
*#設色中心：由fx,fy兩個屬性決定的位置,就是設色為0%的地方,兩個屬性都以百分比表示<br />
*##fx表示設色中心在圖寬百分之幾的位置<br />
*##fy表示設色中心在圖高百分之幾的位置<br />
*##設色100%的地方在範圍圓或範圍橢圓的圓周上<br />
*#設色標籤stop,漸層標籤包住數個stop標籤,每種顏色通過一個stop標籤來規定<br />
*##offset屬性用來定義漸層的開始和結束位置,其100%是指整個漸層範圍<br />
*##stop-color屬性用來定義顏色,也可以做為style的樣式<br />
*##stop-opacity屬性決定透明度,也可以做為style的樣式<br />
*#以ball3.svg為例：漸層範圍為整個圓,因為cx,cy,r都是50% ,而設色中心在中間下方,因為fx='50%' fy='100%' ,此處是stop設為0%的顏色(白色),而範圍圓週邊是stop設為100%的顏色(黑色)<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball1.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball2.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball3.svg<br />
<br />
===8.♪柔焦濾鏡♪===<br />
*濾鏡標籤filter語法說明:<br />
*#其中的id屬性定出濾鏡名稱<br />
*#也可以設width,height,x,y去定濾鏡範圍和起點,如沒設以整個圖形為範圍<br />
*#高斯模糊濾鏡feGaussianBlur：濾鏡標籤包住數種不同效果的濾鏡,高斯模糊濾鏡是最簡單的濾鏡<br />
*#高斯模糊濾鏡主要只有一個參數：stdDeviation(標準差),用來控制模糊的程度,數字越大越模糊,數字為零則是圖片原本的狀態<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/sun.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/waterfall1.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/waterfall2.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/waterfall3.svg<br />
<br />
===9.♪path♪===<br />
*path<br />
*#參數大寫代表絕對座標,小寫代表與前一個座標的相對座標<br />
*#點與點之間&同點的x,y座標之間,用空白間開或用,間開兩者是等價的<br />
*http://www.oxxostudio.tw/articles/201406/svg-04-path-1.html<br />
*http://www.oxxostudio.tw/articles/201406/svg-05-path-2.html<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/path01.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/path02.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/path03.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/path04.svg<br />
<br />
===10.♪動畫♪===<br />
*四標籤：<br />
*#set(開關)<br />
*#animate(屬性連續改變)<br />
*#animateTransform(平移,旋轉,縮放)<br />
*#animateMotion(循跡運動)<br />
*共通語法：將母圖形分拆成開始和結束兩標籤,中間插入動畫標籤<br />
*共通屬性：<br />
*#attributeName：<br />
*##set,animate為某一個母圖形的屬性,from和to就是這個屬性的值將由多少變到多少<br />
*##animateTransform為'transform'另搭配type屬性<br />
*##animateMotion免設此屬性<br />
*#type屬性之值(animateTransform專用)：<br />
*##rotate旋轉,影響屬性from='起始角度,旋轉軸心x座標,旋轉軸心y座標'、to='結束角度,旋轉軸心x座標,旋轉軸心y座標'<br />
*##scale縮放,影響屬性from='x起始倍率,y起始倍率'、to='x結束倍率,y結束倍率'，倍率是自左上原點開始算,如果同組x,y倍率相同,可以只寫一個值<br />
*##translate平移,影響屬性from='起始原點x座標,起始原點y座標'、to='結束原點x座標,結束原點y座標'<br />
*##skewX X軸不動,X軸下方向右歪斜,影響屬性from='起始歪斜角度'、to='結束歪斜角度'<br />
*##skewY Y軸不動,Y軸右方向下歪斜,影響屬性from='起始歪斜角度'、to='結束歪斜角度'<br />
*#begin='幾s'：幾秒開始跑,通常設為0s<br />
*#dur='幾s'：跑一輪要幾秒,可以設為indefinite<br />
*#repeatCount='幾'：要跑幾輪,indefinite代表無限多輪,預設值為1<br />
*#from開始狀態(animate,animateTransform有)<br />
*#to結束狀態(set,animate,animateTransform有)<br />
*#path(animateMotion專用)屬性為移動路徑：由m開始<br />
*#rotate='auto'(animateMotion專用)圖形隨路徑曲度而轉折<br />
*http://jendo.org/~admin/path5.svg<br />
*http://jendo.org/~admin/path6.svg<br />
*https://msdn.microsoft.com/zh-tw/library/gg193979(v=vs.85).aspx<br />
<br />
==♡Inkscape♡==<br />
*inkscape下載,64位元：安裝版(62.7MB)|免安裝版(可攜式)(59.9MB)→下載對應的免安裝版→解壓縮<br />
*素材：<br />
*#org=公共利益用,源軟體（英語：open source software,英文縮寫：OSS，中文也稱：開放原始碼軟體）是一種原始碼可以任意取用的電腦軟體,這種軟體的版權持有人在軟體協定的規定之下保留一部分權利並允許用戶學習&修改&增進提高這款軟體的品質,開源協定通常符合開放原始碼的定義的要求,一些開源軟體被釋出到公有領域,開源軟體常被公開和合作地開發<br />
*#com=商業軟體（英語：Commercial software）是在電腦軟體中被作為商品進行交易的軟體,未必是商用軟體,至2000年代,大多數的軟體都屬於商業軟體,相對於商業軟體,有非商業的專有軟體（Proprietary Software）（但專有軟體中大部份都屬於商業軟體）,可供分享使用的自由軟體（Free Software）&共享軟體（Shareware）&免費軟體（Freeware）等<br />
*Vector/animals<br />
*#選一個圖→下載解壓縮(ai)→解散群組→取出圖檔→調整紙張→匯出點陣圖<br />
*<br />
*<br />
*<br />
*<br />
*<br />
*<br />
*<br />
*<br />
*<br />
*<br />
*<br />
*<br />
<br />
==♡GIS♡==<br />
*何謂 GIS ？<br />
*兩種主要的 GIS 。<br />
*基本框架。<br />
*marks<br />
*overlays<br />
*google 我的地圖<br />
*結合我的地圖與 GIS<br />
<br />
==♡圖形計算機♡==<br />
*取得 svgdraw.php<br />
*基本框架<br />
*繪製基本圖形<br />
*函式繪圖<br />
*google 圖形計算機</div>
蕭卉均
http://well-being-ng.net/wiki1231/index.php?title=%E8%A8%8E%E8%AB%96:%E8%B3%87%E8%A8%8A%E5%9F%BA%E7%A4%8E%E6%87%89%E7%94%A8/%E8%95%AD%E5%8D%89%E5%9D%87&diff=37919
討論:資訊基礎應用/蕭卉均
2018-01-16T11:02:38Z
<p>蕭卉均：/* ♡Inkscape♡ */</p>
<hr />
<div>=ღ完整筆記ღ=<br />
==♡環境&工具♡==<br />
===1.♪環境♪===<br />
*伺服器與域名,伺服器DS216,網址6years.jendo.org<br />
*wifi,區網wifi：jendod&jendoa,密碼:jendo19690929<br />
*網站空間,瀏覽器：firefox,優先於chrome,盡量不用IE<br />
*wiki上的個人頁,filezilla→開啟filezilla,並新增一個站台叫♕DS216+(共用)♕→主機設定:6years.jendo.org→協定:SFTP→使用者:共用→字碼集:UTF-8→連線,然後到♕home/www♕→建自己帳號的連線→可用的文字編輯器,如emeditor→連結filezilla&慣用的文字編輯器：♕編輯/設定/檔案編輯♕，選用♕使用自訂編輯器♕&♕總是使用預設的編輯器♕，並指定編輯器的路徑<br />
*課後重點筆記:<br />
*#table是開始,/table是結束<br />
*#IP:IP4,最多表達到255字,IPV4一般網頁使用,IP6,物聯網用<br />
*#物聯網:簡單說一切事物,得失相兼<br />
*#域名:域名伺服器(HOSTS)<br />
*#AI(人工智慧)<br />
*#big5,早期,只有繁體中文<br />
*#UTF-8,萬國碼<br />
<br />
===2.♪工具與設定♪===<br />
*firefox:Mozilla Firefox（簡稱Firefox）,中文俗稱火狐（中國大陸官方有使用但未註冊為商標）,是一個自由及開放原始碼的網頁瀏覽器,由Mozilla基金會及其子公司Mozilla公司開發<br />
*filezilla:ileZilla是一種快速&可信賴的FTP用戶端以及伺服器端開放原始碼程式,具有多種特色&直覺的介面,FileZilla在2003年11月獲選為SourceForge.net當月最佳推薦專案<br />
*EmEditor:EmEditor是江村軟體公司（Emurasoft,坐落於美國華盛頓州）所開發的一款在Windows平台上運行的文字編輯程式,EmEditor以運作輕巧&敏捷而又功能強大&豐富著稱而得到許多用戶的好評<br />
<br />
==♡HTML&HTTP♡==<br />
*發有者及發明年代:於西元1993年,W3C&WHATWG開發<br />
*HTML:超文件標示語言（英語：HyperText Markup Language,簡稱：HTML）是一種用於建立網頁的標準標示語言,HTML是一種基礎技術常與CSS&JavaScript一起被眾多網站用於設計令人賞心悅目的網頁&網頁應用程式以及行動應用程式的使用者介面<br />
*HTTP:超文本傳輸協定（英文：HyperText Transfer Protocol,縮寫：HTTP）是一種用於分佈式&協作式和超媒體資訊系統的應用層協議,HTTP是全球資訊網的資料通訊的基礎<br />
*xml:可延伸標記式語言（英語：Extensible Markup Language,簡稱：XML）是一種標記式語言,標記指電腦所能理解的資訊符號,通過此種標記,電腦之間可以處理包含各種資訊的文章等<br />
*課後筆記:<br />
*#筆記網頁建設:登入後搜尋{資訊基礎應用/蕭卉均}→點一下，開始編輯→編輯完點儲存頁面<br />
*#色碼表:https://www.toodoo.com/db/color.html<br />
*通訊錄:<br />
*<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
<table class='nicetable'><br />
<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
</table><br />
<br />
==♡ wiki ♡==<br />
*何謂wiki:Wiki是一種在全球資訊網上開放且可供多人協同創作的超文字系統,由沃德·坎寧安於1995年首先開發,沃德·坎寧安將wiki定義為「一種允許一群用戶用簡單的描述來建立和連線一組網頁的社會計算系統」<br />
*CC授權:創用CC授權條款（英語：Creative Commons license,簡稱CC授權）是一種公共版權授權條款,其允許分發受版權保護的作品,一個創用CC授權用於一個作者想給他人分享&使用&甚至創作衍生作品的權利<br />
*wiki語法:http://jendo.synology.me/wiki1231/index.php?title=Wiki_%E5%85%A5%E9%96%80%E8%AA%9E%E6%B3%95<br />
*wiki的word適應:履歷表<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E5%B1%A5%E6%AD%B7%E8%A1%A8.html<br />
==♡CSS♡==<br />
*何謂CSS:層疊樣式表（英語：Cascading Style Sheets,簡寫CSS）又稱串樣式列表&級聯樣式表&串接樣式表&層疊樣式表&階層式樣式表,一種用來為結構化文件（如HTML文件或XML應用）添加樣式（字型、間距和顏色等）的電腦語言,由W3C定義和維護,目前最新版本是CSS2.1，為W3C的推薦標準,CSS3現在已被大部分現代瀏覽器支援,而下一版的CSS4仍在開發中<br />
*用法:限制者才有標章,不限制者沒有標章<br />
*重要語法:<br />
*#Attribution(BY):姓名標示,您（使用者）可以複製&發行&展覽&表演&放映&廣播或通過資訊網路傳播本作品；您必須按照作者或者授權人指定的方式對作品進行姓名標示<br />
*#NonCommercial(NC):非商業性使用,您可以自由複製&散布&展示及演出本作品；您不得為商業目的而使用本作品<br />
*#NoDerivs(ND):禁止改作,您可以自由複製&散布&展示及演出本作品；您不得改變&轉變或更改本作品<br />
*#ShareAlike(SA):相同方式分享,您可以自由複製&散布&展示及演出本作品；若您改變&轉變或更改本作品,僅在遵守與本作品相同的授權條款下,您才能散布由本作品產生的衍生作品<br />
<br />
==♡SVG♡==<br />
===1.♪概述♪===<br />
*何謂SVG:可縮放向量圖形（英語：Scalable Vector Graphics,SVG）是一種基於可延伸標記式語言（XML）,用於描述二維向量圖形的圖形格式,SVG由W3C制定,是一個開放標準<br />
*點陣圖與向量圖的比較(含附檔名):<br />
*#SVG:又為向量圖,特色,放大不毛邊,https://upload.wikimedia.org/wikipedia/commons/5/53/Skull_and_crossbones.svg<br />
*#JPG:又名JEPG,失真,壓縮,http://wportfolio.wzu.edu.tw/blog/attach/995/27995/89/bf_51402_8868906_99219_2yzUdJnLy0AsZ9VdwaKNCA.jpg<br />
*#PNG:不失真,公開格式,https://s-media-cache-ak0.pinimg.com/originals/96/94/ef/9694ef6ecfd562c83e7a445ee9ee19ba.png<br />
*#GIF:可動畫,256色,https://2.bp.blogspot.com/-Ra6UuzwDGQg/WDfdq3X1GjI/AAAAAAAD0gc/MfVErIwBENYRH_DvvFsnThfYp-zVxugEgCLcB/s1600/AS000946_02.gif<br />
*SVG格式具有以下優點:<br />
*#圖檔可讀,易於修改和編輯（理論上如此,但實際上卻是因為各種不同的SVG檔編輯器而可能儲存成不易解讀的SVG檔案）<br />
*#與現有技術可以互動融合,例如,SVG技術本身的動態部分（包括時序控制和動畫）就是基於SMIL標準,另外,SVG檔案還可嵌入JavaScript（嚴格地說，應該是ECMAScript）指令碼來控制SVG物件<br />
*#SVG圖形格式可以方便的建立文字索引,從而實現基於內容的圖像搜尋<br />
*#SVG圖形格式支援多種濾鏡和特殊效果,在不改變圖像內容的前提下可以實現點陣圖格式中類似文字陰影的效果<br />
*#SVG圖形格式可以用來動態生成圖形,例如,可用SVG動態生成具有互動功能的地圖,嵌入網頁中,並顯示給終端用戶<br />
*SVG格式具有以下缺點：<br />
*#如何和已經占有重要市場份額的向量圖形格式Adobe Animate競爭的問題,事實上,Adobe Animate在Flash CC 2014版及以後的版本就都支援直接匯出SVG檔案了<br />
*#SVG的本地執行環境下的廠家支援程度<br />
*#由於原始的SVG檔是遵從XML語法,導致資料採用未壓縮的方式存放,因此相較於其他的向量圖形格式,同樣的檔案內容會比其他的檔案格式稍大,Adobe因此使用gzip壓縮開發出壓縮的SVG檔格式,附檔名為 .svgz, 但此種檔案格式除了Adobe旗下的軟體以外,未被廣泛支援使用<br />
*#舊版的SVG Viewer無法正確顯示出使用新版SVG格式的向量圖形<br />
<br />
===2.♪基本架構♪===<br />
*基本架構:SVG允許3種圖形物件類型：向量圖形,柵格圖像以及文字,圖形物件——包括PNG&JPEG這些柵格圖像——能夠被編組&設計&轉換及整合進先前的彩現物件中,文字可以在任何適用於應用程式的XML命名空間之內,從而提高SVG圖形的搜尋能力和無障礙性,SVG提供的功能集涵蓋了巢狀轉換&裁剪路徑&Alpha通道&濾鏡效果&模板物件以及可延伸性,SVG嚴格遵從XML語法,並用文字格式的描述性語言來描述圖像內容,因此是一種和圖像解析度無關的向量圖形格式,SVG可以實現動態和互動功能,在DOM模型的基礎上,SVG開發設計人員可以利用ECMAScript或者SMIL來進行時序控制或物件的操縱,SVG雖然是文字格式,但是SVG支援利用gzip壓縮演算法減少檔案尺寸,壓縮後的檔案通常用被稱為「SVGZ檔案」<br />
*SVG主要支援以下幾種顯示物件：<br />
*#向量顯示物件,基本向量顯示物件包括矩形&圓&橢圓&多邊形&直線&任意曲線等<br />
*#嵌入式外部圖像,包括PNG&JPEG&SVG等<br />
*#文字物件<br />
*基本樣式:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/arrow.svg<br />
*基本圖形:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/bearFace.svg<br />
<br />
===3.♪文字♪===<br />
*TEXT<br />
*#在「text」標籤開始與結束之間夾字,可用中英文,而使用「屬性」來規定文字的表現,所有的屬性都可以改用樣式來表達<br />
*#可用中文字形：<br />
*##屬性dx和dy基於前一個字的位置去做變化：值可為'10,20,30,40'，字的距離一個比一個更遠<br />
*##屬性x和y標示字的起點：值可為'10,20,30,40'，表示每個字的x或y座標<br />
*##屬性fill控制填入字的顏色,預設黑色<br />
*##屬性stroke控制字描框的顏色,預設 none<br />
*##屬性rotate='30'順時鐘轉30°。rotate='30,60,90,120,150,180,210'指定每個字的轉動角度<br />
*##用style控制字體&字形&尺寸,但顏色是用fill不是用color <br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/text.svg<br />
<br />
===4.♪位移&旋轉&縮放&歪斜♪===<br />
*相關屬性說明：<br />
*#平移變換(translate)：transform="translate(x,y)",即新坐標系的原點在原坐標系的(x,y)處,坐標軸的方向不變<br />
*#旋轉變換(rotate)：transform="rotate(angle cx,cy)",angle代表旋轉角度,預設單位是「度」,順時針為正,逆時針為負,(cx,cy)是旋轉中心所在的坐標,若省略旋轉中心坐標,則預設值是(0,0)<br />
*#伸縮變換(scale)：transform="scale(sx,sy)",sx,sy分別代表x軸方向和y方向拉伸或縮小的比例因子,拉伸：大於1；縮小：小於1,若省略sy，即sy=sx，作等比例縮放<br />
*#歪斜變換(skew)：transform='skewX(x-angle)'或transform='skewY(y-angle)',x-angle,y-angle分別代表沿x軸和y軸歪斜的角度<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/transform.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/bearFace.svg<br />
<br />
===5.♪群組♪===<br />
*步驟:<br />
*#先添加svg標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，其中才有href屬性的定義<br />
*#在defs段落中定義圖形，並賦予id<br />
*#用<use xlink:href='#某id'/>來引用既有的定義<br />
<br />
===6.♪定義一次,引用多次♪===<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/uses.svg<br />
<br />
===7.♪漸層♪===<br />
*漸層和濾鏡如果取中文名稱,瀏覽器還認得,但Inkscape和線上轉檔軟體就會不認得<br />
*「漸層」工具可以在多種顏色之間建立漸層混合,您可以從預設漸層填色中選擇,或是建立自己的漸層填色<br />
*線性漸層沿著直線從起點到終點建立陰影<br />
*放射性漸層沿著圓形圖樣從起點到終點建立陰影<br />
*尖角漸層繞著起點以逆時針掃射的方式建立陰影<br />
*反射性漸層在起點的一側建立相同的鏡像線性漸層<br />
*菱形漸層從菱形圖樣的中央往外建立陰影<br />
====(1)☆線性漸層☆====<br />
*步驟：<br />
*#不用添加svg標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，不會用到href屬性<br />
*#在defs段落中定義漸層,並賦予id<br />
*#用fill='url(#某id)'屬性來引用既有的漸層定義<br />
*linearGradient 線性漸層定義語法說明:<br />
*#漸層標籤中的 100%，指的是整個圖形<br />
*#其中的 id 屬性定出漸層名稱<br />
*#由x1,y1,x2,y2四個屬性決定漸層範圍,以及水平,垂直或角形漸層,四個屬性都以百分比表示：<br />
*##x1,y1,x2,y2屬性決定漸層開始和結束位置,x1,x2以圖形的寬度為準,y1,y2以圖形的高度為準<br />
*##當y1和y2相等,而x1和x2不同時,可創建水平漸層<br />
*##當x1和x2相等,而y1和y2不同時,可創建垂直漸層<br />
*##當x1和x2不同,且y1和y2不同時,可創建角形漸層<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/h.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/v.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/arrow.svg<br />
<br />
====(2)☆放射漸層☆====<br />
*radialGradient 放設漸層定義語法說明:<br />
*#漸層範圍：由cx,cy,r三個屬性決定,三個屬性都以百分比表示,漸層範圍是一個圓或橢圓<br />
*##cx表示範圍中心在圖寬百分之幾的位置<br />
*##cy表示範圍中心在圖高百分之幾的位置<br />
*##r如果圖形寬&高相等則範圍為圓,r代表範圍圓半俓除以圖形寬或高；如果圖形寬&高不相等則範圍為橢圓,r代表範圍橢圓的長短軸半長除以圖形寬或高；注意：r為50%,範圍圓直徑恰等於圖的寬或高<br />
*#設色中心：由fx,fy兩個屬性決定的位置,就是設色為0%的地方,兩個屬性都以百分比表示<br />
*##fx表示設色中心在圖寬百分之幾的位置<br />
*##fy表示設色中心在圖高百分之幾的位置<br />
*##設色100%的地方在範圍圓或範圍橢圓的圓周上<br />
*#設色標籤stop,漸層標籤包住數個stop標籤,每種顏色通過一個stop標籤來規定<br />
*##offset屬性用來定義漸層的開始和結束位置,其100%是指整個漸層範圍<br />
*##stop-color屬性用來定義顏色,也可以做為style的樣式<br />
*##stop-opacity屬性決定透明度,也可以做為style的樣式<br />
*#以ball3.svg為例：漸層範圍為整個圓,因為cx,cy,r都是50% ,而設色中心在中間下方,因為fx='50%' fy='100%' ,此處是stop設為0%的顏色(白色),而範圍圓週邊是stop設為100%的顏色(黑色)<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball1.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball2.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball3.svg<br />
<br />
===8.♪柔焦濾鏡♪===<br />
*濾鏡標籤filter語法說明:<br />
*#其中的id屬性定出濾鏡名稱<br />
*#也可以設width,height,x,y去定濾鏡範圍和起點,如沒設以整個圖形為範圍<br />
*#高斯模糊濾鏡feGaussianBlur：濾鏡標籤包住數種不同效果的濾鏡,高斯模糊濾鏡是最簡單的濾鏡<br />
*#高斯模糊濾鏡主要只有一個參數：stdDeviation(標準差),用來控制模糊的程度,數字越大越模糊,數字為零則是圖片原本的狀態<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/sun.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/waterfall1.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/waterfall2.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/waterfall3.svg<br />
<br />
===9.♪path♪===<br />
*path<br />
*#參數大寫代表絕對座標,小寫代表與前一個座標的相對座標<br />
*#點與點之間&同點的x,y座標之間,用空白間開或用,間開兩者是等價的<br />
*http://www.oxxostudio.tw/articles/201406/svg-04-path-1.html<br />
*http://www.oxxostudio.tw/articles/201406/svg-05-path-2.html<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/path01.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/path02.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/path03.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/path04.svg<br />
<br />
===10.♪動畫♪===<br />
*四標籤：<br />
*#set(開關)<br />
*#animate(屬性連續改變)<br />
*#animateTransform(平移,旋轉,縮放)<br />
*#animateMotion(循跡運動)<br />
*共通語法：將母圖形分拆成開始和結束兩標籤,中間插入動畫標籤<br />
*共通屬性：<br />
*#attributeName：<br />
*##set,animate為某一個母圖形的屬性,from和to就是這個屬性的值將由多少變到多少<br />
*##animateTransform為'transform'另搭配type屬性<br />
*##animateMotion免設此屬性<br />
*#type屬性之值(animateTransform專用)：<br />
*##rotate旋轉,影響屬性from='起始角度,旋轉軸心x座標,旋轉軸心y座標'、to='結束角度,旋轉軸心x座標,旋轉軸心y座標'<br />
*##scale縮放,影響屬性from='x起始倍率,y起始倍率'、to='x結束倍率,y結束倍率'，倍率是自左上原點開始算,如果同組x,y倍率相同,可以只寫一個值<br />
*##translate平移,影響屬性from='起始原點x座標,起始原點y座標'、to='結束原點x座標,結束原點y座標'<br />
*##skewX X軸不動,X軸下方向右歪斜,影響屬性from='起始歪斜角度'、to='結束歪斜角度'<br />
*##skewY Y軸不動,Y軸右方向下歪斜,影響屬性from='起始歪斜角度'、to='結束歪斜角度'<br />
*#begin='幾s'：幾秒開始跑,通常設為0s<br />
*#dur='幾s'：跑一輪要幾秒,可以設為indefinite<br />
*#repeatCount='幾'：要跑幾輪,indefinite代表無限多輪,預設值為1<br />
*#from開始狀態(animate,animateTransform有)<br />
*#to結束狀態(set,animate,animateTransform有)<br />
*#path(animateMotion專用)屬性為移動路徑：由m開始<br />
*#rotate='auto'(animateMotion專用)圖形隨路徑曲度而轉折<br />
*http://jendo.org/~admin/path5.svg<br />
*http://jendo.org/~admin/path6.svg<br />
*https://msdn.microsoft.com/zh-tw/library/gg193979(v=vs.85).aspx<br />
<br />
==♡Inkscape♡==<br />
*inkscape下載,64位元：安裝版(62.7MB)|免安裝版(可攜式)(59.9MB)→下載對應的免安裝版→解壓縮<br />
*素材：<br />
*#org=公共利益用,源軟體（英語：open source software,英文縮寫：OSS，中文也稱：開放原始碼軟體）是一種原始碼可以任意取用的電腦軟體,這種軟體的版權持有人在軟體協定的規定之下保留一部分權利並允許用戶學習&修改&增進提高這款軟體的品質,開源協定通常符合開放原始碼的定義的要求,一些開源軟體被釋出到公有領域,開源軟體常被公開和合作地開發<br />
*#com=商業軟體（英語：Commercial software）是在電腦軟體中被作為商品進行交易的軟體,未必是商用軟體,至2000年代,大多數的軟體都屬於商業軟體,相對於商業軟體,有非商業的專有軟體（Proprietary Software）（但專有軟體中大部份都屬於商業軟體）,可供分享使用的自由軟體（Free Software）&共享軟體（Shareware）&免費軟體（Freeware）等<br />
*Vector/animals<br />
*#選一個圖→下載解壓縮(ai)→解散群組→取出圖檔→調整紙張→匯出點陣圖<br />
*file:///C:/Users/%E6%AD%BB%E4%BA%A1%E9%A8%8E%E5%A3%AB/Desktop/SVG/home.svg<br />
*<br />
*<br />
*<br />
*<br />
*<br />
*<br />
*<br />
*<br />
*<br />
*<br />
*<br />
<br />
==♡GIS♡==<br />
*何謂 GIS ？<br />
*兩種主要的 GIS 。<br />
*基本框架。<br />
*marks<br />
*overlays<br />
*google 我的地圖<br />
*結合我的地圖與 GIS<br />
<br />
==♡圖形計算機♡==<br />
*取得 svgdraw.php<br />
*基本框架<br />
*繪製基本圖形<br />
*函式繪圖<br />
*google 圖形計算機</div>
蕭卉均
http://well-being-ng.net/wiki1231/index.php?title=%E8%A8%8E%E8%AB%96:%E8%B3%87%E8%A8%8A%E5%9F%BA%E7%A4%8E%E6%87%89%E7%94%A8/%E8%95%AD%E5%8D%89%E5%9D%87&diff=37918
討論:資訊基礎應用/蕭卉均
2018-01-16T10:58:04Z
<p>蕭卉均：/* ♡Inkscape♡ */</p>
<hr />
<div>=ღ完整筆記ღ=<br />
==♡環境&工具♡==<br />
===1.♪環境♪===<br />
*伺服器與域名,伺服器DS216,網址6years.jendo.org<br />
*wifi,區網wifi：jendod&jendoa,密碼:jendo19690929<br />
*網站空間,瀏覽器：firefox,優先於chrome,盡量不用IE<br />
*wiki上的個人頁,filezilla→開啟filezilla,並新增一個站台叫♕DS216+(共用)♕→主機設定:6years.jendo.org→協定:SFTP→使用者:共用→字碼集:UTF-8→連線,然後到♕home/www♕→建自己帳號的連線→可用的文字編輯器,如emeditor→連結filezilla&慣用的文字編輯器：♕編輯/設定/檔案編輯♕，選用♕使用自訂編輯器♕&♕總是使用預設的編輯器♕，並指定編輯器的路徑<br />
*課後重點筆記:<br />
*#table是開始,/table是結束<br />
*#IP:IP4,最多表達到255字,IPV4一般網頁使用,IP6,物聯網用<br />
*#物聯網:簡單說一切事物,得失相兼<br />
*#域名:域名伺服器(HOSTS)<br />
*#AI(人工智慧)<br />
*#big5,早期,只有繁體中文<br />
*#UTF-8,萬國碼<br />
<br />
===2.♪工具與設定♪===<br />
*firefox:Mozilla Firefox（簡稱Firefox）,中文俗稱火狐（中國大陸官方有使用但未註冊為商標）,是一個自由及開放原始碼的網頁瀏覽器,由Mozilla基金會及其子公司Mozilla公司開發<br />
*filezilla:ileZilla是一種快速&可信賴的FTP用戶端以及伺服器端開放原始碼程式,具有多種特色&直覺的介面,FileZilla在2003年11月獲選為SourceForge.net當月最佳推薦專案<br />
*EmEditor:EmEditor是江村軟體公司（Emurasoft,坐落於美國華盛頓州）所開發的一款在Windows平台上運行的文字編輯程式,EmEditor以運作輕巧&敏捷而又功能強大&豐富著稱而得到許多用戶的好評<br />
<br />
==♡HTML&HTTP♡==<br />
*發有者及發明年代:於西元1993年,W3C&WHATWG開發<br />
*HTML:超文件標示語言（英語：HyperText Markup Language,簡稱：HTML）是一種用於建立網頁的標準標示語言,HTML是一種基礎技術常與CSS&JavaScript一起被眾多網站用於設計令人賞心悅目的網頁&網頁應用程式以及行動應用程式的使用者介面<br />
*HTTP:超文本傳輸協定（英文：HyperText Transfer Protocol,縮寫：HTTP）是一種用於分佈式&協作式和超媒體資訊系統的應用層協議,HTTP是全球資訊網的資料通訊的基礎<br />
*xml:可延伸標記式語言（英語：Extensible Markup Language,簡稱：XML）是一種標記式語言,標記指電腦所能理解的資訊符號,通過此種標記,電腦之間可以處理包含各種資訊的文章等<br />
*課後筆記:<br />
*#筆記網頁建設:登入後搜尋{資訊基礎應用/蕭卉均}→點一下，開始編輯→編輯完點儲存頁面<br />
*#色碼表:https://www.toodoo.com/db/color.html<br />
*通訊錄:<br />
*<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
<table class='nicetable'><br />
<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
</table><br />
<br />
==♡ wiki ♡==<br />
*何謂wiki:Wiki是一種在全球資訊網上開放且可供多人協同創作的超文字系統,由沃德·坎寧安於1995年首先開發,沃德·坎寧安將wiki定義為「一種允許一群用戶用簡單的描述來建立和連線一組網頁的社會計算系統」<br />
*CC授權:創用CC授權條款（英語：Creative Commons license,簡稱CC授權）是一種公共版權授權條款,其允許分發受版權保護的作品,一個創用CC授權用於一個作者想給他人分享&使用&甚至創作衍生作品的權利<br />
*wiki語法:http://jendo.synology.me/wiki1231/index.php?title=Wiki_%E5%85%A5%E9%96%80%E8%AA%9E%E6%B3%95<br />
*wiki的word適應:履歷表<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E5%B1%A5%E6%AD%B7%E8%A1%A8.html<br />
==♡CSS♡==<br />
*何謂CSS:層疊樣式表（英語：Cascading Style Sheets,簡寫CSS）又稱串樣式列表&級聯樣式表&串接樣式表&層疊樣式表&階層式樣式表,一種用來為結構化文件（如HTML文件或XML應用）添加樣式（字型、間距和顏色等）的電腦語言,由W3C定義和維護,目前最新版本是CSS2.1，為W3C的推薦標準,CSS3現在已被大部分現代瀏覽器支援,而下一版的CSS4仍在開發中<br />
*用法:限制者才有標章,不限制者沒有標章<br />
*重要語法:<br />
*#Attribution(BY):姓名標示,您（使用者）可以複製&發行&展覽&表演&放映&廣播或通過資訊網路傳播本作品；您必須按照作者或者授權人指定的方式對作品進行姓名標示<br />
*#NonCommercial(NC):非商業性使用,您可以自由複製&散布&展示及演出本作品；您不得為商業目的而使用本作品<br />
*#NoDerivs(ND):禁止改作,您可以自由複製&散布&展示及演出本作品；您不得改變&轉變或更改本作品<br />
*#ShareAlike(SA):相同方式分享,您可以自由複製&散布&展示及演出本作品；若您改變&轉變或更改本作品,僅在遵守與本作品相同的授權條款下,您才能散布由本作品產生的衍生作品<br />
<br />
==♡SVG♡==<br />
===1.♪概述♪===<br />
*何謂SVG:可縮放向量圖形（英語：Scalable Vector Graphics,SVG）是一種基於可延伸標記式語言（XML）,用於描述二維向量圖形的圖形格式,SVG由W3C制定,是一個開放標準<br />
*點陣圖與向量圖的比較(含附檔名):<br />
*#SVG:又為向量圖,特色,放大不毛邊,https://upload.wikimedia.org/wikipedia/commons/5/53/Skull_and_crossbones.svg<br />
*#JPG:又名JEPG,失真,壓縮,http://wportfolio.wzu.edu.tw/blog/attach/995/27995/89/bf_51402_8868906_99219_2yzUdJnLy0AsZ9VdwaKNCA.jpg<br />
*#PNG:不失真,公開格式,https://s-media-cache-ak0.pinimg.com/originals/96/94/ef/9694ef6ecfd562c83e7a445ee9ee19ba.png<br />
*#GIF:可動畫,256色,https://2.bp.blogspot.com/-Ra6UuzwDGQg/WDfdq3X1GjI/AAAAAAAD0gc/MfVErIwBENYRH_DvvFsnThfYp-zVxugEgCLcB/s1600/AS000946_02.gif<br />
*SVG格式具有以下優點:<br />
*#圖檔可讀,易於修改和編輯（理論上如此,但實際上卻是因為各種不同的SVG檔編輯器而可能儲存成不易解讀的SVG檔案）<br />
*#與現有技術可以互動融合,例如,SVG技術本身的動態部分（包括時序控制和動畫）就是基於SMIL標準,另外,SVG檔案還可嵌入JavaScript（嚴格地說，應該是ECMAScript）指令碼來控制SVG物件<br />
*#SVG圖形格式可以方便的建立文字索引,從而實現基於內容的圖像搜尋<br />
*#SVG圖形格式支援多種濾鏡和特殊效果,在不改變圖像內容的前提下可以實現點陣圖格式中類似文字陰影的效果<br />
*#SVG圖形格式可以用來動態生成圖形,例如,可用SVG動態生成具有互動功能的地圖,嵌入網頁中,並顯示給終端用戶<br />
*SVG格式具有以下缺點：<br />
*#如何和已經占有重要市場份額的向量圖形格式Adobe Animate競爭的問題,事實上,Adobe Animate在Flash CC 2014版及以後的版本就都支援直接匯出SVG檔案了<br />
*#SVG的本地執行環境下的廠家支援程度<br />
*#由於原始的SVG檔是遵從XML語法,導致資料採用未壓縮的方式存放,因此相較於其他的向量圖形格式,同樣的檔案內容會比其他的檔案格式稍大,Adobe因此使用gzip壓縮開發出壓縮的SVG檔格式,附檔名為 .svgz, 但此種檔案格式除了Adobe旗下的軟體以外,未被廣泛支援使用<br />
*#舊版的SVG Viewer無法正確顯示出使用新版SVG格式的向量圖形<br />
<br />
===2.♪基本架構♪===<br />
*基本架構:SVG允許3種圖形物件類型：向量圖形,柵格圖像以及文字,圖形物件——包括PNG&JPEG這些柵格圖像——能夠被編組&設計&轉換及整合進先前的彩現物件中,文字可以在任何適用於應用程式的XML命名空間之內,從而提高SVG圖形的搜尋能力和無障礙性,SVG提供的功能集涵蓋了巢狀轉換&裁剪路徑&Alpha通道&濾鏡效果&模板物件以及可延伸性,SVG嚴格遵從XML語法,並用文字格式的描述性語言來描述圖像內容,因此是一種和圖像解析度無關的向量圖形格式,SVG可以實現動態和互動功能,在DOM模型的基礎上,SVG開發設計人員可以利用ECMAScript或者SMIL來進行時序控制或物件的操縱,SVG雖然是文字格式,但是SVG支援利用gzip壓縮演算法減少檔案尺寸,壓縮後的檔案通常用被稱為「SVGZ檔案」<br />
*SVG主要支援以下幾種顯示物件：<br />
*#向量顯示物件,基本向量顯示物件包括矩形&圓&橢圓&多邊形&直線&任意曲線等<br />
*#嵌入式外部圖像,包括PNG&JPEG&SVG等<br />
*#文字物件<br />
*基本樣式:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/arrow.svg<br />
*基本圖形:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/bearFace.svg<br />
<br />
===3.♪文字♪===<br />
*TEXT<br />
*#在「text」標籤開始與結束之間夾字,可用中英文,而使用「屬性」來規定文字的表現,所有的屬性都可以改用樣式來表達<br />
*#可用中文字形：<br />
*##屬性dx和dy基於前一個字的位置去做變化：值可為'10,20,30,40'，字的距離一個比一個更遠<br />
*##屬性x和y標示字的起點：值可為'10,20,30,40'，表示每個字的x或y座標<br />
*##屬性fill控制填入字的顏色,預設黑色<br />
*##屬性stroke控制字描框的顏色,預設 none<br />
*##屬性rotate='30'順時鐘轉30°。rotate='30,60,90,120,150,180,210'指定每個字的轉動角度<br />
*##用style控制字體&字形&尺寸,但顏色是用fill不是用color <br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/text.svg<br />
<br />
===4.♪位移&旋轉&縮放&歪斜♪===<br />
*相關屬性說明：<br />
*#平移變換(translate)：transform="translate(x,y)",即新坐標系的原點在原坐標系的(x,y)處,坐標軸的方向不變<br />
*#旋轉變換(rotate)：transform="rotate(angle cx,cy)",angle代表旋轉角度,預設單位是「度」,順時針為正,逆時針為負,(cx,cy)是旋轉中心所在的坐標,若省略旋轉中心坐標,則預設值是(0,0)<br />
*#伸縮變換(scale)：transform="scale(sx,sy)",sx,sy分別代表x軸方向和y方向拉伸或縮小的比例因子,拉伸：大於1；縮小：小於1,若省略sy，即sy=sx，作等比例縮放<br />
*#歪斜變換(skew)：transform='skewX(x-angle)'或transform='skewY(y-angle)',x-angle,y-angle分別代表沿x軸和y軸歪斜的角度<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/transform.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/bearFace.svg<br />
<br />
===5.♪群組♪===<br />
*步驟:<br />
*#先添加svg標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，其中才有href屬性的定義<br />
*#在defs段落中定義圖形，並賦予id<br />
*#用<use xlink:href='#某id'/>來引用既有的定義<br />
<br />
===6.♪定義一次,引用多次♪===<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/uses.svg<br />
<br />
===7.♪漸層♪===<br />
*漸層和濾鏡如果取中文名稱,瀏覽器還認得,但Inkscape和線上轉檔軟體就會不認得<br />
*「漸層」工具可以在多種顏色之間建立漸層混合,您可以從預設漸層填色中選擇,或是建立自己的漸層填色<br />
*線性漸層沿著直線從起點到終點建立陰影<br />
*放射性漸層沿著圓形圖樣從起點到終點建立陰影<br />
*尖角漸層繞著起點以逆時針掃射的方式建立陰影<br />
*反射性漸層在起點的一側建立相同的鏡像線性漸層<br />
*菱形漸層從菱形圖樣的中央往外建立陰影<br />
====(1)☆線性漸層☆====<br />
*步驟：<br />
*#不用添加svg標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，不會用到href屬性<br />
*#在defs段落中定義漸層,並賦予id<br />
*#用fill='url(#某id)'屬性來引用既有的漸層定義<br />
*linearGradient 線性漸層定義語法說明:<br />
*#漸層標籤中的 100%，指的是整個圖形<br />
*#其中的 id 屬性定出漸層名稱<br />
*#由x1,y1,x2,y2四個屬性決定漸層範圍,以及水平,垂直或角形漸層,四個屬性都以百分比表示：<br />
*##x1,y1,x2,y2屬性決定漸層開始和結束位置,x1,x2以圖形的寬度為準,y1,y2以圖形的高度為準<br />
*##當y1和y2相等,而x1和x2不同時,可創建水平漸層<br />
*##當x1和x2相等,而y1和y2不同時,可創建垂直漸層<br />
*##當x1和x2不同,且y1和y2不同時,可創建角形漸層<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/h.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/v.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/arrow.svg<br />
<br />
====(2)☆放射漸層☆====<br />
*radialGradient 放設漸層定義語法說明:<br />
*#漸層範圍：由cx,cy,r三個屬性決定,三個屬性都以百分比表示,漸層範圍是一個圓或橢圓<br />
*##cx表示範圍中心在圖寬百分之幾的位置<br />
*##cy表示範圍中心在圖高百分之幾的位置<br />
*##r如果圖形寬&高相等則範圍為圓,r代表範圍圓半俓除以圖形寬或高；如果圖形寬&高不相等則範圍為橢圓,r代表範圍橢圓的長短軸半長除以圖形寬或高；注意：r為50%,範圍圓直徑恰等於圖的寬或高<br />
*#設色中心：由fx,fy兩個屬性決定的位置,就是設色為0%的地方,兩個屬性都以百分比表示<br />
*##fx表示設色中心在圖寬百分之幾的位置<br />
*##fy表示設色中心在圖高百分之幾的位置<br />
*##設色100%的地方在範圍圓或範圍橢圓的圓周上<br />
*#設色標籤stop,漸層標籤包住數個stop標籤,每種顏色通過一個stop標籤來規定<br />
*##offset屬性用來定義漸層的開始和結束位置,其100%是指整個漸層範圍<br />
*##stop-color屬性用來定義顏色,也可以做為style的樣式<br />
*##stop-opacity屬性決定透明度,也可以做為style的樣式<br />
*#以ball3.svg為例：漸層範圍為整個圓,因為cx,cy,r都是50% ,而設色中心在中間下方,因為fx='50%' fy='100%' ,此處是stop設為0%的顏色(白色),而範圍圓週邊是stop設為100%的顏色(黑色)<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball1.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball2.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball3.svg<br />
<br />
===8.♪柔焦濾鏡♪===<br />
*濾鏡標籤filter語法說明:<br />
*#其中的id屬性定出濾鏡名稱<br />
*#也可以設width,height,x,y去定濾鏡範圍和起點,如沒設以整個圖形為範圍<br />
*#高斯模糊濾鏡feGaussianBlur：濾鏡標籤包住數種不同效果的濾鏡,高斯模糊濾鏡是最簡單的濾鏡<br />
*#高斯模糊濾鏡主要只有一個參數：stdDeviation(標準差),用來控制模糊的程度,數字越大越模糊,數字為零則是圖片原本的狀態<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/sun.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/waterfall1.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/waterfall2.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/waterfall3.svg<br />
<br />
===9.♪path♪===<br />
*path<br />
*#參數大寫代表絕對座標,小寫代表與前一個座標的相對座標<br />
*#點與點之間&同點的x,y座標之間,用空白間開或用,間開兩者是等價的<br />
*http://www.oxxostudio.tw/articles/201406/svg-04-path-1.html<br />
*http://www.oxxostudio.tw/articles/201406/svg-05-path-2.html<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/path01.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/path02.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/path03.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/path04.svg<br />
<br />
===10.♪動畫♪===<br />
*四標籤：<br />
*#set(開關)<br />
*#animate(屬性連續改變)<br />
*#animateTransform(平移,旋轉,縮放)<br />
*#animateMotion(循跡運動)<br />
*共通語法：將母圖形分拆成開始和結束兩標籤,中間插入動畫標籤<br />
*共通屬性：<br />
*#attributeName：<br />
*##set,animate為某一個母圖形的屬性,from和to就是這個屬性的值將由多少變到多少<br />
*##animateTransform為'transform'另搭配type屬性<br />
*##animateMotion免設此屬性<br />
*#type屬性之值(animateTransform專用)：<br />
*##rotate旋轉,影響屬性from='起始角度,旋轉軸心x座標,旋轉軸心y座標'、to='結束角度,旋轉軸心x座標,旋轉軸心y座標'<br />
*##scale縮放,影響屬性from='x起始倍率,y起始倍率'、to='x結束倍率,y結束倍率'，倍率是自左上原點開始算,如果同組x,y倍率相同,可以只寫一個值<br />
*##translate平移,影響屬性from='起始原點x座標,起始原點y座標'、to='結束原點x座標,結束原點y座標'<br />
*##skewX X軸不動,X軸下方向右歪斜,影響屬性from='起始歪斜角度'、to='結束歪斜角度'<br />
*##skewY Y軸不動,Y軸右方向下歪斜,影響屬性from='起始歪斜角度'、to='結束歪斜角度'<br />
*#begin='幾s'：幾秒開始跑,通常設為0s<br />
*#dur='幾s'：跑一輪要幾秒,可以設為indefinite<br />
*#repeatCount='幾'：要跑幾輪,indefinite代表無限多輪,預設值為1<br />
*#from開始狀態(animate,animateTransform有)<br />
*#to結束狀態(set,animate,animateTransform有)<br />
*#path(animateMotion專用)屬性為移動路徑：由m開始<br />
*#rotate='auto'(animateMotion專用)圖形隨路徑曲度而轉折<br />
*http://jendo.org/~admin/path5.svg<br />
*http://jendo.org/~admin/path6.svg<br />
*https://msdn.microsoft.com/zh-tw/library/gg193979(v=vs.85).aspx<br />
<br />
==♡Inkscape♡==<br />
*inkscape下載,64位元：安裝版(62.7MB)|免安裝版(可攜式)(59.9MB)→下載對應的免安裝版→解壓縮<br />
*素材：<br />
*#org=公共利益用,源軟體（英語：open source software,英文縮寫：OSS，中文也稱：開放原始碼軟體）是一種原始碼可以任意取用的電腦軟體,這種軟體的版權持有人在軟體協定的規定之下保留一部分權利並允許用戶學習&修改&增進提高這款軟體的品質,開源協定通常符合開放原始碼的定義的要求,一些開源軟體被釋出到公有領域,開源軟體常被公開和合作地開發<br />
*#com=商業軟體（英語：Commercial software）是在電腦軟體中被作為商品進行交易的軟體,未必是商用軟體,至2000年代,大多數的軟體都屬於商業軟體,相對於商業軟體,有非商業的專有軟體（Proprietary Software）（但專有軟體中大部份都屬於商業軟體）,可供分享使用的自由軟體（Free Software）&共享軟體（Shareware）&免費軟體（Freeware）等<br />
<br />
==♡GIS♡==<br />
*何謂 GIS ？<br />
*兩種主要的 GIS 。<br />
*基本框架。<br />
*marks<br />
*overlays<br />
*google 我的地圖<br />
*結合我的地圖與 GIS<br />
<br />
==♡圖形計算機♡==<br />
*取得 svgdraw.php<br />
*基本框架<br />
*繪製基本圖形<br />
*函式繪圖<br />
*google 圖形計算機</div>
蕭卉均
http://well-being-ng.net/wiki1231/index.php?title=%E8%A8%8E%E8%AB%96:%E8%B3%87%E8%A8%8A%E5%9F%BA%E7%A4%8E%E6%87%89%E7%94%A8/%E8%95%AD%E5%8D%89%E5%9D%87&diff=37917
討論:資訊基礎應用/蕭卉均
2018-01-16T10:57:39Z
<p>蕭卉均：/* ♡Inkscape♡ */</p>
<hr />
<div>=ღ完整筆記ღ=<br />
==♡環境&工具♡==<br />
===1.♪環境♪===<br />
*伺服器與域名,伺服器DS216,網址6years.jendo.org<br />
*wifi,區網wifi：jendod&jendoa,密碼:jendo19690929<br />
*網站空間,瀏覽器：firefox,優先於chrome,盡量不用IE<br />
*wiki上的個人頁,filezilla→開啟filezilla,並新增一個站台叫♕DS216+(共用)♕→主機設定:6years.jendo.org→協定:SFTP→使用者:共用→字碼集:UTF-8→連線,然後到♕home/www♕→建自己帳號的連線→可用的文字編輯器,如emeditor→連結filezilla&慣用的文字編輯器：♕編輯/設定/檔案編輯♕，選用♕使用自訂編輯器♕&♕總是使用預設的編輯器♕，並指定編輯器的路徑<br />
*課後重點筆記:<br />
*#table是開始,/table是結束<br />
*#IP:IP4,最多表達到255字,IPV4一般網頁使用,IP6,物聯網用<br />
*#物聯網:簡單說一切事物,得失相兼<br />
*#域名:域名伺服器(HOSTS)<br />
*#AI(人工智慧)<br />
*#big5,早期,只有繁體中文<br />
*#UTF-8,萬國碼<br />
<br />
===2.♪工具與設定♪===<br />
*firefox:Mozilla Firefox（簡稱Firefox）,中文俗稱火狐（中國大陸官方有使用但未註冊為商標）,是一個自由及開放原始碼的網頁瀏覽器,由Mozilla基金會及其子公司Mozilla公司開發<br />
*filezilla:ileZilla是一種快速&可信賴的FTP用戶端以及伺服器端開放原始碼程式,具有多種特色&直覺的介面,FileZilla在2003年11月獲選為SourceForge.net當月最佳推薦專案<br />
*EmEditor:EmEditor是江村軟體公司（Emurasoft,坐落於美國華盛頓州）所開發的一款在Windows平台上運行的文字編輯程式,EmEditor以運作輕巧&敏捷而又功能強大&豐富著稱而得到許多用戶的好評<br />
<br />
==♡HTML&HTTP♡==<br />
*發有者及發明年代:於西元1993年,W3C&WHATWG開發<br />
*HTML:超文件標示語言（英語：HyperText Markup Language,簡稱：HTML）是一種用於建立網頁的標準標示語言,HTML是一種基礎技術常與CSS&JavaScript一起被眾多網站用於設計令人賞心悅目的網頁&網頁應用程式以及行動應用程式的使用者介面<br />
*HTTP:超文本傳輸協定（英文：HyperText Transfer Protocol,縮寫：HTTP）是一種用於分佈式&協作式和超媒體資訊系統的應用層協議,HTTP是全球資訊網的資料通訊的基礎<br />
*xml:可延伸標記式語言（英語：Extensible Markup Language,簡稱：XML）是一種標記式語言,標記指電腦所能理解的資訊符號,通過此種標記,電腦之間可以處理包含各種資訊的文章等<br />
*課後筆記:<br />
*#筆記網頁建設:登入後搜尋{資訊基礎應用/蕭卉均}→點一下，開始編輯→編輯完點儲存頁面<br />
*#色碼表:https://www.toodoo.com/db/color.html<br />
*通訊錄:<br />
*<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
<table class='nicetable'><br />
<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
</table><br />
<br />
==♡ wiki ♡==<br />
*何謂wiki:Wiki是一種在全球資訊網上開放且可供多人協同創作的超文字系統,由沃德·坎寧安於1995年首先開發,沃德·坎寧安將wiki定義為「一種允許一群用戶用簡單的描述來建立和連線一組網頁的社會計算系統」<br />
*CC授權:創用CC授權條款（英語：Creative Commons license,簡稱CC授權）是一種公共版權授權條款,其允許分發受版權保護的作品,一個創用CC授權用於一個作者想給他人分享&使用&甚至創作衍生作品的權利<br />
*wiki語法:http://jendo.synology.me/wiki1231/index.php?title=Wiki_%E5%85%A5%E9%96%80%E8%AA%9E%E6%B3%95<br />
*wiki的word適應:履歷表<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E5%B1%A5%E6%AD%B7%E8%A1%A8.html<br />
==♡CSS♡==<br />
*何謂CSS:層疊樣式表（英語：Cascading Style Sheets,簡寫CSS）又稱串樣式列表&級聯樣式表&串接樣式表&層疊樣式表&階層式樣式表,一種用來為結構化文件（如HTML文件或XML應用）添加樣式（字型、間距和顏色等）的電腦語言,由W3C定義和維護,目前最新版本是CSS2.1，為W3C的推薦標準,CSS3現在已被大部分現代瀏覽器支援,而下一版的CSS4仍在開發中<br />
*用法:限制者才有標章,不限制者沒有標章<br />
*重要語法:<br />
*#Attribution(BY):姓名標示,您（使用者）可以複製&發行&展覽&表演&放映&廣播或通過資訊網路傳播本作品；您必須按照作者或者授權人指定的方式對作品進行姓名標示<br />
*#NonCommercial(NC):非商業性使用,您可以自由複製&散布&展示及演出本作品；您不得為商業目的而使用本作品<br />
*#NoDerivs(ND):禁止改作,您可以自由複製&散布&展示及演出本作品；您不得改變&轉變或更改本作品<br />
*#ShareAlike(SA):相同方式分享,您可以自由複製&散布&展示及演出本作品；若您改變&轉變或更改本作品,僅在遵守與本作品相同的授權條款下,您才能散布由本作品產生的衍生作品<br />
<br />
==♡SVG♡==<br />
===1.♪概述♪===<br />
*何謂SVG:可縮放向量圖形（英語：Scalable Vector Graphics,SVG）是一種基於可延伸標記式語言（XML）,用於描述二維向量圖形的圖形格式,SVG由W3C制定,是一個開放標準<br />
*點陣圖與向量圖的比較(含附檔名):<br />
*#SVG:又為向量圖,特色,放大不毛邊,https://upload.wikimedia.org/wikipedia/commons/5/53/Skull_and_crossbones.svg<br />
*#JPG:又名JEPG,失真,壓縮,http://wportfolio.wzu.edu.tw/blog/attach/995/27995/89/bf_51402_8868906_99219_2yzUdJnLy0AsZ9VdwaKNCA.jpg<br />
*#PNG:不失真,公開格式,https://s-media-cache-ak0.pinimg.com/originals/96/94/ef/9694ef6ecfd562c83e7a445ee9ee19ba.png<br />
*#GIF:可動畫,256色,https://2.bp.blogspot.com/-Ra6UuzwDGQg/WDfdq3X1GjI/AAAAAAAD0gc/MfVErIwBENYRH_DvvFsnThfYp-zVxugEgCLcB/s1600/AS000946_02.gif<br />
*SVG格式具有以下優點:<br />
*#圖檔可讀,易於修改和編輯（理論上如此,但實際上卻是因為各種不同的SVG檔編輯器而可能儲存成不易解讀的SVG檔案）<br />
*#與現有技術可以互動融合,例如,SVG技術本身的動態部分（包括時序控制和動畫）就是基於SMIL標準,另外,SVG檔案還可嵌入JavaScript（嚴格地說，應該是ECMAScript）指令碼來控制SVG物件<br />
*#SVG圖形格式可以方便的建立文字索引,從而實現基於內容的圖像搜尋<br />
*#SVG圖形格式支援多種濾鏡和特殊效果,在不改變圖像內容的前提下可以實現點陣圖格式中類似文字陰影的效果<br />
*#SVG圖形格式可以用來動態生成圖形,例如,可用SVG動態生成具有互動功能的地圖,嵌入網頁中,並顯示給終端用戶<br />
*SVG格式具有以下缺點：<br />
*#如何和已經占有重要市場份額的向量圖形格式Adobe Animate競爭的問題,事實上,Adobe Animate在Flash CC 2014版及以後的版本就都支援直接匯出SVG檔案了<br />
*#SVG的本地執行環境下的廠家支援程度<br />
*#由於原始的SVG檔是遵從XML語法,導致資料採用未壓縮的方式存放,因此相較於其他的向量圖形格式,同樣的檔案內容會比其他的檔案格式稍大,Adobe因此使用gzip壓縮開發出壓縮的SVG檔格式,附檔名為 .svgz, 但此種檔案格式除了Adobe旗下的軟體以外,未被廣泛支援使用<br />
*#舊版的SVG Viewer無法正確顯示出使用新版SVG格式的向量圖形<br />
<br />
===2.♪基本架構♪===<br />
*基本架構:SVG允許3種圖形物件類型：向量圖形,柵格圖像以及文字,圖形物件——包括PNG&JPEG這些柵格圖像——能夠被編組&設計&轉換及整合進先前的彩現物件中,文字可以在任何適用於應用程式的XML命名空間之內,從而提高SVG圖形的搜尋能力和無障礙性,SVG提供的功能集涵蓋了巢狀轉換&裁剪路徑&Alpha通道&濾鏡效果&模板物件以及可延伸性,SVG嚴格遵從XML語法,並用文字格式的描述性語言來描述圖像內容,因此是一種和圖像解析度無關的向量圖形格式,SVG可以實現動態和互動功能,在DOM模型的基礎上,SVG開發設計人員可以利用ECMAScript或者SMIL來進行時序控制或物件的操縱,SVG雖然是文字格式,但是SVG支援利用gzip壓縮演算法減少檔案尺寸,壓縮後的檔案通常用被稱為「SVGZ檔案」<br />
*SVG主要支援以下幾種顯示物件：<br />
*#向量顯示物件,基本向量顯示物件包括矩形&圓&橢圓&多邊形&直線&任意曲線等<br />
*#嵌入式外部圖像,包括PNG&JPEG&SVG等<br />
*#文字物件<br />
*基本樣式:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/arrow.svg<br />
*基本圖形:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/bearFace.svg<br />
<br />
===3.♪文字♪===<br />
*TEXT<br />
*#在「text」標籤開始與結束之間夾字,可用中英文,而使用「屬性」來規定文字的表現,所有的屬性都可以改用樣式來表達<br />
*#可用中文字形：<br />
*##屬性dx和dy基於前一個字的位置去做變化：值可為'10,20,30,40'，字的距離一個比一個更遠<br />
*##屬性x和y標示字的起點：值可為'10,20,30,40'，表示每個字的x或y座標<br />
*##屬性fill控制填入字的顏色,預設黑色<br />
*##屬性stroke控制字描框的顏色,預設 none<br />
*##屬性rotate='30'順時鐘轉30°。rotate='30,60,90,120,150,180,210'指定每個字的轉動角度<br />
*##用style控制字體&字形&尺寸,但顏色是用fill不是用color <br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/text.svg<br />
<br />
===4.♪位移&旋轉&縮放&歪斜♪===<br />
*相關屬性說明：<br />
*#平移變換(translate)：transform="translate(x,y)",即新坐標系的原點在原坐標系的(x,y)處,坐標軸的方向不變<br />
*#旋轉變換(rotate)：transform="rotate(angle cx,cy)",angle代表旋轉角度,預設單位是「度」,順時針為正,逆時針為負,(cx,cy)是旋轉中心所在的坐標,若省略旋轉中心坐標,則預設值是(0,0)<br />
*#伸縮變換(scale)：transform="scale(sx,sy)",sx,sy分別代表x軸方向和y方向拉伸或縮小的比例因子,拉伸：大於1；縮小：小於1,若省略sy，即sy=sx，作等比例縮放<br />
*#歪斜變換(skew)：transform='skewX(x-angle)'或transform='skewY(y-angle)',x-angle,y-angle分別代表沿x軸和y軸歪斜的角度<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/transform.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/bearFace.svg<br />
<br />
===5.♪群組♪===<br />
*步驟:<br />
*#先添加svg標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，其中才有href屬性的定義<br />
*#在defs段落中定義圖形，並賦予id<br />
*#用<use xlink:href='#某id'/>來引用既有的定義<br />
<br />
===6.♪定義一次,引用多次♪===<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/uses.svg<br />
<br />
===7.♪漸層♪===<br />
*漸層和濾鏡如果取中文名稱,瀏覽器還認得,但Inkscape和線上轉檔軟體就會不認得<br />
*「漸層」工具可以在多種顏色之間建立漸層混合,您可以從預設漸層填色中選擇,或是建立自己的漸層填色<br />
*線性漸層沿著直線從起點到終點建立陰影<br />
*放射性漸層沿著圓形圖樣從起點到終點建立陰影<br />
*尖角漸層繞著起點以逆時針掃射的方式建立陰影<br />
*反射性漸層在起點的一側建立相同的鏡像線性漸層<br />
*菱形漸層從菱形圖樣的中央往外建立陰影<br />
====(1)☆線性漸層☆====<br />
*步驟：<br />
*#不用添加svg標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，不會用到href屬性<br />
*#在defs段落中定義漸層,並賦予id<br />
*#用fill='url(#某id)'屬性來引用既有的漸層定義<br />
*linearGradient 線性漸層定義語法說明:<br />
*#漸層標籤中的 100%，指的是整個圖形<br />
*#其中的 id 屬性定出漸層名稱<br />
*#由x1,y1,x2,y2四個屬性決定漸層範圍,以及水平,垂直或角形漸層,四個屬性都以百分比表示：<br />
*##x1,y1,x2,y2屬性決定漸層開始和結束位置,x1,x2以圖形的寬度為準,y1,y2以圖形的高度為準<br />
*##當y1和y2相等,而x1和x2不同時,可創建水平漸層<br />
*##當x1和x2相等,而y1和y2不同時,可創建垂直漸層<br />
*##當x1和x2不同,且y1和y2不同時,可創建角形漸層<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/h.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/v.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/arrow.svg<br />
<br />
====(2)☆放射漸層☆====<br />
*radialGradient 放設漸層定義語法說明:<br />
*#漸層範圍：由cx,cy,r三個屬性決定,三個屬性都以百分比表示,漸層範圍是一個圓或橢圓<br />
*##cx表示範圍中心在圖寬百分之幾的位置<br />
*##cy表示範圍中心在圖高百分之幾的位置<br />
*##r如果圖形寬&高相等則範圍為圓,r代表範圍圓半俓除以圖形寬或高；如果圖形寬&高不相等則範圍為橢圓,r代表範圍橢圓的長短軸半長除以圖形寬或高；注意：r為50%,範圍圓直徑恰等於圖的寬或高<br />
*#設色中心：由fx,fy兩個屬性決定的位置,就是設色為0%的地方,兩個屬性都以百分比表示<br />
*##fx表示設色中心在圖寬百分之幾的位置<br />
*##fy表示設色中心在圖高百分之幾的位置<br />
*##設色100%的地方在範圍圓或範圍橢圓的圓周上<br />
*#設色標籤stop,漸層標籤包住數個stop標籤,每種顏色通過一個stop標籤來規定<br />
*##offset屬性用來定義漸層的開始和結束位置,其100%是指整個漸層範圍<br />
*##stop-color屬性用來定義顏色,也可以做為style的樣式<br />
*##stop-opacity屬性決定透明度,也可以做為style的樣式<br />
*#以ball3.svg為例：漸層範圍為整個圓,因為cx,cy,r都是50% ,而設色中心在中間下方,因為fx='50%' fy='100%' ,此處是stop設為0%的顏色(白色),而範圍圓週邊是stop設為100%的顏色(黑色)<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball1.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball2.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball3.svg<br />
<br />
===8.♪柔焦濾鏡♪===<br />
*濾鏡標籤filter語法說明:<br />
*#其中的id屬性定出濾鏡名稱<br />
*#也可以設width,height,x,y去定濾鏡範圍和起點,如沒設以整個圖形為範圍<br />
*#高斯模糊濾鏡feGaussianBlur：濾鏡標籤包住數種不同效果的濾鏡,高斯模糊濾鏡是最簡單的濾鏡<br />
*#高斯模糊濾鏡主要只有一個參數：stdDeviation(標準差),用來控制模糊的程度,數字越大越模糊,數字為零則是圖片原本的狀態<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/sun.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/waterfall1.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/waterfall2.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/waterfall3.svg<br />
<br />
===9.♪path♪===<br />
*path<br />
*#參數大寫代表絕對座標,小寫代表與前一個座標的相對座標<br />
*#點與點之間&同點的x,y座標之間,用空白間開或用,間開兩者是等價的<br />
*http://www.oxxostudio.tw/articles/201406/svg-04-path-1.html<br />
*http://www.oxxostudio.tw/articles/201406/svg-05-path-2.html<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/path01.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/path02.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/path03.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/path04.svg<br />
<br />
===10.♪動畫♪===<br />
*四標籤：<br />
*#set(開關)<br />
*#animate(屬性連續改變)<br />
*#animateTransform(平移,旋轉,縮放)<br />
*#animateMotion(循跡運動)<br />
*共通語法：將母圖形分拆成開始和結束兩標籤,中間插入動畫標籤<br />
*共通屬性：<br />
*#attributeName：<br />
*##set,animate為某一個母圖形的屬性,from和to就是這個屬性的值將由多少變到多少<br />
*##animateTransform為'transform'另搭配type屬性<br />
*##animateMotion免設此屬性<br />
*#type屬性之值(animateTransform專用)：<br />
*##rotate旋轉,影響屬性from='起始角度,旋轉軸心x座標,旋轉軸心y座標'、to='結束角度,旋轉軸心x座標,旋轉軸心y座標'<br />
*##scale縮放,影響屬性from='x起始倍率,y起始倍率'、to='x結束倍率,y結束倍率'，倍率是自左上原點開始算,如果同組x,y倍率相同,可以只寫一個值<br />
*##translate平移,影響屬性from='起始原點x座標,起始原點y座標'、to='結束原點x座標,結束原點y座標'<br />
*##skewX X軸不動,X軸下方向右歪斜,影響屬性from='起始歪斜角度'、to='結束歪斜角度'<br />
*##skewY Y軸不動,Y軸右方向下歪斜,影響屬性from='起始歪斜角度'、to='結束歪斜角度'<br />
*#begin='幾s'：幾秒開始跑,通常設為0s<br />
*#dur='幾s'：跑一輪要幾秒,可以設為indefinite<br />
*#repeatCount='幾'：要跑幾輪,indefinite代表無限多輪,預設值為1<br />
*#from開始狀態(animate,animateTransform有)<br />
*#to結束狀態(set,animate,animateTransform有)<br />
*#path(animateMotion專用)屬性為移動路徑：由m開始<br />
*#rotate='auto'(animateMotion專用)圖形隨路徑曲度而轉折<br />
*http://jendo.org/~admin/path5.svg<br />
*http://jendo.org/~admin/path6.svg<br />
*https://msdn.microsoft.com/zh-tw/library/gg193979(v=vs.85).aspx<br />
<br />
==♡Inkscape♡==<br />
*inkscape下載,64位元：安裝版(62.7MB)|免安裝版(可攜式)(59.9MB)→下載對應的免安裝版→解壓縮<br />
*素材：<br />
*#org=公共利益用,源軟體（英語：open source software,英文縮寫：OSS，中文也稱：開放原始碼軟體）是一種原始碼可以任意取用的電腦軟體,這種軟體的版權持有人在軟體協定的規定之下保留一部分權利並允許用戶學習&修改&增進提高這款軟體的品質,開源協定通常符合開放原始碼的定義的要求,一些開源軟體被釋出到公有領域,開源軟體常被公開和合作地開發<br />
*com=商業軟體（英語：Commercial software）是在電腦軟體中被作為商品進行交易的軟體,未必是商用軟體,至2000年代,大多數的軟體都屬於商業軟體,相對於商業軟體,有非商業的專有軟體（Proprietary Software）（但專有軟體中大部份都屬於商業軟體）,可供分享使用的自由軟體（Free Software）&共享軟體（Shareware）&免費軟體（Freeware）等<br />
<br />
==♡GIS♡==<br />
*何謂 GIS ？<br />
*兩種主要的 GIS 。<br />
*基本框架。<br />
*marks<br />
*overlays<br />
*google 我的地圖<br />
*結合我的地圖與 GIS<br />
<br />
==♡圖形計算機♡==<br />
*取得 svgdraw.php<br />
*基本框架<br />
*繪製基本圖形<br />
*函式繪圖<br />
*google 圖形計算機</div>
蕭卉均
http://well-being-ng.net/wiki1231/index.php?title=%E8%A8%8E%E8%AB%96:%E8%B3%87%E8%A8%8A%E5%9F%BA%E7%A4%8E%E6%87%89%E7%94%A8/%E8%95%AD%E5%8D%89%E5%9D%87&diff=37916
討論:資訊基礎應用/蕭卉均
2018-01-16T10:55:11Z
<p>蕭卉均：/* ♡Inkscape♡ */</p>
<hr />
<div>=ღ完整筆記ღ=<br />
==♡環境&工具♡==<br />
===1.♪環境♪===<br />
*伺服器與域名,伺服器DS216,網址6years.jendo.org<br />
*wifi,區網wifi：jendod&jendoa,密碼:jendo19690929<br />
*網站空間,瀏覽器：firefox,優先於chrome,盡量不用IE<br />
*wiki上的個人頁,filezilla→開啟filezilla,並新增一個站台叫♕DS216+(共用)♕→主機設定:6years.jendo.org→協定:SFTP→使用者:共用→字碼集:UTF-8→連線,然後到♕home/www♕→建自己帳號的連線→可用的文字編輯器,如emeditor→連結filezilla&慣用的文字編輯器：♕編輯/設定/檔案編輯♕，選用♕使用自訂編輯器♕&♕總是使用預設的編輯器♕，並指定編輯器的路徑<br />
*課後重點筆記:<br />
*#table是開始,/table是結束<br />
*#IP:IP4,最多表達到255字,IPV4一般網頁使用,IP6,物聯網用<br />
*#物聯網:簡單說一切事物,得失相兼<br />
*#域名:域名伺服器(HOSTS)<br />
*#AI(人工智慧)<br />
*#big5,早期,只有繁體中文<br />
*#UTF-8,萬國碼<br />
<br />
===2.♪工具與設定♪===<br />
*firefox:Mozilla Firefox（簡稱Firefox）,中文俗稱火狐（中國大陸官方有使用但未註冊為商標）,是一個自由及開放原始碼的網頁瀏覽器,由Mozilla基金會及其子公司Mozilla公司開發<br />
*filezilla:ileZilla是一種快速&可信賴的FTP用戶端以及伺服器端開放原始碼程式,具有多種特色&直覺的介面,FileZilla在2003年11月獲選為SourceForge.net當月最佳推薦專案<br />
*EmEditor:EmEditor是江村軟體公司（Emurasoft,坐落於美國華盛頓州）所開發的一款在Windows平台上運行的文字編輯程式,EmEditor以運作輕巧&敏捷而又功能強大&豐富著稱而得到許多用戶的好評<br />
<br />
==♡HTML&HTTP♡==<br />
*發有者及發明年代:於西元1993年,W3C&WHATWG開發<br />
*HTML:超文件標示語言（英語：HyperText Markup Language,簡稱：HTML）是一種用於建立網頁的標準標示語言,HTML是一種基礎技術常與CSS&JavaScript一起被眾多網站用於設計令人賞心悅目的網頁&網頁應用程式以及行動應用程式的使用者介面<br />
*HTTP:超文本傳輸協定（英文：HyperText Transfer Protocol,縮寫：HTTP）是一種用於分佈式&協作式和超媒體資訊系統的應用層協議,HTTP是全球資訊網的資料通訊的基礎<br />
*xml:可延伸標記式語言（英語：Extensible Markup Language,簡稱：XML）是一種標記式語言,標記指電腦所能理解的資訊符號,通過此種標記,電腦之間可以處理包含各種資訊的文章等<br />
*課後筆記:<br />
*#筆記網頁建設:登入後搜尋{資訊基礎應用/蕭卉均}→點一下，開始編輯→編輯完點儲存頁面<br />
*#色碼表:https://www.toodoo.com/db/color.html<br />
*通訊錄:<br />
*<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
<table class='nicetable'><br />
<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
</table><br />
<br />
==♡ wiki ♡==<br />
*何謂wiki:Wiki是一種在全球資訊網上開放且可供多人協同創作的超文字系統,由沃德·坎寧安於1995年首先開發,沃德·坎寧安將wiki定義為「一種允許一群用戶用簡單的描述來建立和連線一組網頁的社會計算系統」<br />
*CC授權:創用CC授權條款（英語：Creative Commons license,簡稱CC授權）是一種公共版權授權條款,其允許分發受版權保護的作品,一個創用CC授權用於一個作者想給他人分享&使用&甚至創作衍生作品的權利<br />
*wiki語法:http://jendo.synology.me/wiki1231/index.php?title=Wiki_%E5%85%A5%E9%96%80%E8%AA%9E%E6%B3%95<br />
*wiki的word適應:履歷表<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E5%B1%A5%E6%AD%B7%E8%A1%A8.html<br />
==♡CSS♡==<br />
*何謂CSS:層疊樣式表（英語：Cascading Style Sheets,簡寫CSS）又稱串樣式列表&級聯樣式表&串接樣式表&層疊樣式表&階層式樣式表,一種用來為結構化文件（如HTML文件或XML應用）添加樣式（字型、間距和顏色等）的電腦語言,由W3C定義和維護,目前最新版本是CSS2.1，為W3C的推薦標準,CSS3現在已被大部分現代瀏覽器支援,而下一版的CSS4仍在開發中<br />
*用法:限制者才有標章,不限制者沒有標章<br />
*重要語法:<br />
*#Attribution(BY):姓名標示,您（使用者）可以複製&發行&展覽&表演&放映&廣播或通過資訊網路傳播本作品；您必須按照作者或者授權人指定的方式對作品進行姓名標示<br />
*#NonCommercial(NC):非商業性使用,您可以自由複製&散布&展示及演出本作品；您不得為商業目的而使用本作品<br />
*#NoDerivs(ND):禁止改作,您可以自由複製&散布&展示及演出本作品；您不得改變&轉變或更改本作品<br />
*#ShareAlike(SA):相同方式分享,您可以自由複製&散布&展示及演出本作品；若您改變&轉變或更改本作品,僅在遵守與本作品相同的授權條款下,您才能散布由本作品產生的衍生作品<br />
<br />
==♡SVG♡==<br />
===1.♪概述♪===<br />
*何謂SVG:可縮放向量圖形（英語：Scalable Vector Graphics,SVG）是一種基於可延伸標記式語言（XML）,用於描述二維向量圖形的圖形格式,SVG由W3C制定,是一個開放標準<br />
*點陣圖與向量圖的比較(含附檔名):<br />
*#SVG:又為向量圖,特色,放大不毛邊,https://upload.wikimedia.org/wikipedia/commons/5/53/Skull_and_crossbones.svg<br />
*#JPG:又名JEPG,失真,壓縮,http://wportfolio.wzu.edu.tw/blog/attach/995/27995/89/bf_51402_8868906_99219_2yzUdJnLy0AsZ9VdwaKNCA.jpg<br />
*#PNG:不失真,公開格式,https://s-media-cache-ak0.pinimg.com/originals/96/94/ef/9694ef6ecfd562c83e7a445ee9ee19ba.png<br />
*#GIF:可動畫,256色,https://2.bp.blogspot.com/-Ra6UuzwDGQg/WDfdq3X1GjI/AAAAAAAD0gc/MfVErIwBENYRH_DvvFsnThfYp-zVxugEgCLcB/s1600/AS000946_02.gif<br />
*SVG格式具有以下優點:<br />
*#圖檔可讀,易於修改和編輯（理論上如此,但實際上卻是因為各種不同的SVG檔編輯器而可能儲存成不易解讀的SVG檔案）<br />
*#與現有技術可以互動融合,例如,SVG技術本身的動態部分（包括時序控制和動畫）就是基於SMIL標準,另外,SVG檔案還可嵌入JavaScript（嚴格地說，應該是ECMAScript）指令碼來控制SVG物件<br />
*#SVG圖形格式可以方便的建立文字索引,從而實現基於內容的圖像搜尋<br />
*#SVG圖形格式支援多種濾鏡和特殊效果,在不改變圖像內容的前提下可以實現點陣圖格式中類似文字陰影的效果<br />
*#SVG圖形格式可以用來動態生成圖形,例如,可用SVG動態生成具有互動功能的地圖,嵌入網頁中,並顯示給終端用戶<br />
*SVG格式具有以下缺點：<br />
*#如何和已經占有重要市場份額的向量圖形格式Adobe Animate競爭的問題,事實上,Adobe Animate在Flash CC 2014版及以後的版本就都支援直接匯出SVG檔案了<br />
*#SVG的本地執行環境下的廠家支援程度<br />
*#由於原始的SVG檔是遵從XML語法,導致資料採用未壓縮的方式存放,因此相較於其他的向量圖形格式,同樣的檔案內容會比其他的檔案格式稍大,Adobe因此使用gzip壓縮開發出壓縮的SVG檔格式,附檔名為 .svgz, 但此種檔案格式除了Adobe旗下的軟體以外,未被廣泛支援使用<br />
*#舊版的SVG Viewer無法正確顯示出使用新版SVG格式的向量圖形<br />
<br />
===2.♪基本架構♪===<br />
*基本架構:SVG允許3種圖形物件類型：向量圖形,柵格圖像以及文字,圖形物件——包括PNG&JPEG這些柵格圖像——能夠被編組&設計&轉換及整合進先前的彩現物件中,文字可以在任何適用於應用程式的XML命名空間之內,從而提高SVG圖形的搜尋能力和無障礙性,SVG提供的功能集涵蓋了巢狀轉換&裁剪路徑&Alpha通道&濾鏡效果&模板物件以及可延伸性,SVG嚴格遵從XML語法,並用文字格式的描述性語言來描述圖像內容,因此是一種和圖像解析度無關的向量圖形格式,SVG可以實現動態和互動功能,在DOM模型的基礎上,SVG開發設計人員可以利用ECMAScript或者SMIL來進行時序控制或物件的操縱,SVG雖然是文字格式,但是SVG支援利用gzip壓縮演算法減少檔案尺寸,壓縮後的檔案通常用被稱為「SVGZ檔案」<br />
*SVG主要支援以下幾種顯示物件：<br />
*#向量顯示物件,基本向量顯示物件包括矩形&圓&橢圓&多邊形&直線&任意曲線等<br />
*#嵌入式外部圖像,包括PNG&JPEG&SVG等<br />
*#文字物件<br />
*基本樣式:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/arrow.svg<br />
*基本圖形:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/bearFace.svg<br />
<br />
===3.♪文字♪===<br />
*TEXT<br />
*#在「text」標籤開始與結束之間夾字,可用中英文,而使用「屬性」來規定文字的表現,所有的屬性都可以改用樣式來表達<br />
*#可用中文字形：<br />
*##屬性dx和dy基於前一個字的位置去做變化：值可為'10,20,30,40'，字的距離一個比一個更遠<br />
*##屬性x和y標示字的起點：值可為'10,20,30,40'，表示每個字的x或y座標<br />
*##屬性fill控制填入字的顏色,預設黑色<br />
*##屬性stroke控制字描框的顏色,預設 none<br />
*##屬性rotate='30'順時鐘轉30°。rotate='30,60,90,120,150,180,210'指定每個字的轉動角度<br />
*##用style控制字體&字形&尺寸,但顏色是用fill不是用color <br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/text.svg<br />
<br />
===4.♪位移&旋轉&縮放&歪斜♪===<br />
*相關屬性說明：<br />
*#平移變換(translate)：transform="translate(x,y)",即新坐標系的原點在原坐標系的(x,y)處,坐標軸的方向不變<br />
*#旋轉變換(rotate)：transform="rotate(angle cx,cy)",angle代表旋轉角度,預設單位是「度」,順時針為正,逆時針為負,(cx,cy)是旋轉中心所在的坐標,若省略旋轉中心坐標,則預設值是(0,0)<br />
*#伸縮變換(scale)：transform="scale(sx,sy)",sx,sy分別代表x軸方向和y方向拉伸或縮小的比例因子,拉伸：大於1；縮小：小於1,若省略sy，即sy=sx，作等比例縮放<br />
*#歪斜變換(skew)：transform='skewX(x-angle)'或transform='skewY(y-angle)',x-angle,y-angle分別代表沿x軸和y軸歪斜的角度<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/transform.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/bearFace.svg<br />
<br />
===5.♪群組♪===<br />
*步驟:<br />
*#先添加svg標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，其中才有href屬性的定義<br />
*#在defs段落中定義圖形，並賦予id<br />
*#用<use xlink:href='#某id'/>來引用既有的定義<br />
<br />
===6.♪定義一次,引用多次♪===<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/uses.svg<br />
<br />
===7.♪漸層♪===<br />
*漸層和濾鏡如果取中文名稱,瀏覽器還認得,但Inkscape和線上轉檔軟體就會不認得<br />
*「漸層」工具可以在多種顏色之間建立漸層混合,您可以從預設漸層填色中選擇,或是建立自己的漸層填色<br />
*線性漸層沿著直線從起點到終點建立陰影<br />
*放射性漸層沿著圓形圖樣從起點到終點建立陰影<br />
*尖角漸層繞著起點以逆時針掃射的方式建立陰影<br />
*反射性漸層在起點的一側建立相同的鏡像線性漸層<br />
*菱形漸層從菱形圖樣的中央往外建立陰影<br />
====(1)☆線性漸層☆====<br />
*步驟：<br />
*#不用添加svg標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，不會用到href屬性<br />
*#在defs段落中定義漸層,並賦予id<br />
*#用fill='url(#某id)'屬性來引用既有的漸層定義<br />
*linearGradient 線性漸層定義語法說明:<br />
*#漸層標籤中的 100%，指的是整個圖形<br />
*#其中的 id 屬性定出漸層名稱<br />
*#由x1,y1,x2,y2四個屬性決定漸層範圍,以及水平,垂直或角形漸層,四個屬性都以百分比表示：<br />
*##x1,y1,x2,y2屬性決定漸層開始和結束位置,x1,x2以圖形的寬度為準,y1,y2以圖形的高度為準<br />
*##當y1和y2相等,而x1和x2不同時,可創建水平漸層<br />
*##當x1和x2相等,而y1和y2不同時,可創建垂直漸層<br />
*##當x1和x2不同,且y1和y2不同時,可創建角形漸層<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/h.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/v.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/arrow.svg<br />
<br />
====(2)☆放射漸層☆====<br />
*radialGradient 放設漸層定義語法說明:<br />
*#漸層範圍：由cx,cy,r三個屬性決定,三個屬性都以百分比表示,漸層範圍是一個圓或橢圓<br />
*##cx表示範圍中心在圖寬百分之幾的位置<br />
*##cy表示範圍中心在圖高百分之幾的位置<br />
*##r如果圖形寬&高相等則範圍為圓,r代表範圍圓半俓除以圖形寬或高；如果圖形寬&高不相等則範圍為橢圓,r代表範圍橢圓的長短軸半長除以圖形寬或高；注意：r為50%,範圍圓直徑恰等於圖的寬或高<br />
*#設色中心：由fx,fy兩個屬性決定的位置,就是設色為0%的地方,兩個屬性都以百分比表示<br />
*##fx表示設色中心在圖寬百分之幾的位置<br />
*##fy表示設色中心在圖高百分之幾的位置<br />
*##設色100%的地方在範圍圓或範圍橢圓的圓周上<br />
*#設色標籤stop,漸層標籤包住數個stop標籤,每種顏色通過一個stop標籤來規定<br />
*##offset屬性用來定義漸層的開始和結束位置,其100%是指整個漸層範圍<br />
*##stop-color屬性用來定義顏色,也可以做為style的樣式<br />
*##stop-opacity屬性決定透明度,也可以做為style的樣式<br />
*#以ball3.svg為例：漸層範圍為整個圓,因為cx,cy,r都是50% ,而設色中心在中間下方,因為fx='50%' fy='100%' ,此處是stop設為0%的顏色(白色),而範圍圓週邊是stop設為100%的顏色(黑色)<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball1.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball2.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball3.svg<br />
<br />
===8.♪柔焦濾鏡♪===<br />
*濾鏡標籤filter語法說明:<br />
*#其中的id屬性定出濾鏡名稱<br />
*#也可以設width,height,x,y去定濾鏡範圍和起點,如沒設以整個圖形為範圍<br />
*#高斯模糊濾鏡feGaussianBlur：濾鏡標籤包住數種不同效果的濾鏡,高斯模糊濾鏡是最簡單的濾鏡<br />
*#高斯模糊濾鏡主要只有一個參數：stdDeviation(標準差),用來控制模糊的程度,數字越大越模糊,數字為零則是圖片原本的狀態<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/sun.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/waterfall1.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/waterfall2.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/waterfall3.svg<br />
<br />
===9.♪path♪===<br />
*path<br />
*#參數大寫代表絕對座標,小寫代表與前一個座標的相對座標<br />
*#點與點之間&同點的x,y座標之間,用空白間開或用,間開兩者是等價的<br />
*http://www.oxxostudio.tw/articles/201406/svg-04-path-1.html<br />
*http://www.oxxostudio.tw/articles/201406/svg-05-path-2.html<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/path01.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/path02.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/path03.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/path04.svg<br />
<br />
===10.♪動畫♪===<br />
*四標籤：<br />
*#set(開關)<br />
*#animate(屬性連續改變)<br />
*#animateTransform(平移,旋轉,縮放)<br />
*#animateMotion(循跡運動)<br />
*共通語法：將母圖形分拆成開始和結束兩標籤,中間插入動畫標籤<br />
*共通屬性：<br />
*#attributeName：<br />
*##set,animate為某一個母圖形的屬性,from和to就是這個屬性的值將由多少變到多少<br />
*##animateTransform為'transform'另搭配type屬性<br />
*##animateMotion免設此屬性<br />
*#type屬性之值(animateTransform專用)：<br />
*##rotate旋轉,影響屬性from='起始角度,旋轉軸心x座標,旋轉軸心y座標'、to='結束角度,旋轉軸心x座標,旋轉軸心y座標'<br />
*##scale縮放,影響屬性from='x起始倍率,y起始倍率'、to='x結束倍率,y結束倍率'，倍率是自左上原點開始算,如果同組x,y倍率相同,可以只寫一個值<br />
*##translate平移,影響屬性from='起始原點x座標,起始原點y座標'、to='結束原點x座標,結束原點y座標'<br />
*##skewX X軸不動,X軸下方向右歪斜,影響屬性from='起始歪斜角度'、to='結束歪斜角度'<br />
*##skewY Y軸不動,Y軸右方向下歪斜,影響屬性from='起始歪斜角度'、to='結束歪斜角度'<br />
*#begin='幾s'：幾秒開始跑,通常設為0s<br />
*#dur='幾s'：跑一輪要幾秒,可以設為indefinite<br />
*#repeatCount='幾'：要跑幾輪,indefinite代表無限多輪,預設值為1<br />
*#from開始狀態(animate,animateTransform有)<br />
*#to結束狀態(set,animate,animateTransform有)<br />
*#path(animateMotion專用)屬性為移動路徑：由m開始<br />
*#rotate='auto'(animateMotion專用)圖形隨路徑曲度而轉折<br />
*http://jendo.org/~admin/path5.svg<br />
*http://jendo.org/~admin/path6.svg<br />
*https://msdn.microsoft.com/zh-tw/library/gg193979(v=vs.85).aspx<br />
<br />
==♡Inkscape♡==<br />
*inkscape下載,64位元：安裝版(62.7MB)|免安裝版(可攜式)(59.9MB)→下載對應的免安裝版→解壓縮<br />
*素材：<br />
*#.org=公共利益用,.com為工商適用,opensource,源軟體（英語：open source software,英文縮寫：OSS，中文也稱：開放原始碼軟體）是一種原始碼可以任意取用的電腦軟體,這種軟體的版權持有人在軟體協定的規定之下保留一部分權利並允許用戶學習&修改&增進提高這款軟體的品質,開源協定通常符合開放原始碼的定義的要求,一些開源軟體被釋出到公有領域,開源軟體常被公開和合作地開發,商業軟體,（英語：Commercial software）是在電腦軟體中被作為商品進行交易的軟體,未必是商用軟體,至2000年代,大多數的軟體都屬於商業軟體,相對於商業軟體,有非商業的專有軟體（Proprietary Software）（但專有軟體中大部份都屬於商業軟體）,可供分享使用的自由軟體（Free Software）&共享軟體（Shareware）&免費軟體（Freeware）等<br />
<br />
==♡GIS♡==<br />
*何謂 GIS ？<br />
*兩種主要的 GIS 。<br />
*基本框架。<br />
*marks<br />
*overlays<br />
*google 我的地圖<br />
*結合我的地圖與 GIS<br />
<br />
==♡圖形計算機♡==<br />
*取得 svgdraw.php<br />
*基本框架<br />
*繪製基本圖形<br />
*函式繪圖<br />
*google 圖形計算機</div>
蕭卉均
http://well-being-ng.net/wiki1231/index.php?title=%E8%A8%8E%E8%AB%96:%E8%B3%87%E8%A8%8A%E5%9F%BA%E7%A4%8E%E6%87%89%E7%94%A8/%E8%95%AD%E5%8D%89%E5%9D%87&diff=37914
討論:資訊基礎應用/蕭卉均
2018-01-16T10:44:16Z
<p>蕭卉均：/* 10.♪動畫♪ */</p>
<hr />
<div>=ღ完整筆記ღ=<br />
==♡環境&工具♡==<br />
===1.♪環境♪===<br />
*伺服器與域名,伺服器DS216,網址6years.jendo.org<br />
*wifi,區網wifi：jendod&jendoa,密碼:jendo19690929<br />
*網站空間,瀏覽器：firefox,優先於chrome,盡量不用IE<br />
*wiki上的個人頁,filezilla→開啟filezilla,並新增一個站台叫♕DS216+(共用)♕→主機設定:6years.jendo.org→協定:SFTP→使用者:共用→字碼集:UTF-8→連線,然後到♕home/www♕→建自己帳號的連線→可用的文字編輯器,如emeditor→連結filezilla&慣用的文字編輯器：♕編輯/設定/檔案編輯♕，選用♕使用自訂編輯器♕&♕總是使用預設的編輯器♕，並指定編輯器的路徑<br />
*課後重點筆記:<br />
*#table是開始,/table是結束<br />
*#IP:IP4,最多表達到255字,IPV4一般網頁使用,IP6,物聯網用<br />
*#物聯網:簡單說一切事物,得失相兼<br />
*#域名:域名伺服器(HOSTS)<br />
*#AI(人工智慧)<br />
*#big5,早期,只有繁體中文<br />
*#UTF-8,萬國碼<br />
<br />
===2.♪工具與設定♪===<br />
*firefox:Mozilla Firefox（簡稱Firefox）,中文俗稱火狐（中國大陸官方有使用但未註冊為商標）,是一個自由及開放原始碼的網頁瀏覽器,由Mozilla基金會及其子公司Mozilla公司開發<br />
*filezilla:ileZilla是一種快速&可信賴的FTP用戶端以及伺服器端開放原始碼程式,具有多種特色&直覺的介面,FileZilla在2003年11月獲選為SourceForge.net當月最佳推薦專案<br />
*EmEditor:EmEditor是江村軟體公司（Emurasoft,坐落於美國華盛頓州）所開發的一款在Windows平台上運行的文字編輯程式,EmEditor以運作輕巧&敏捷而又功能強大&豐富著稱而得到許多用戶的好評<br />
<br />
==♡HTML&HTTP♡==<br />
*發有者及發明年代:於西元1993年,W3C&WHATWG開發<br />
*HTML:超文件標示語言（英語：HyperText Markup Language,簡稱：HTML）是一種用於建立網頁的標準標示語言,HTML是一種基礎技術常與CSS&JavaScript一起被眾多網站用於設計令人賞心悅目的網頁&網頁應用程式以及行動應用程式的使用者介面<br />
*HTTP:超文本傳輸協定（英文：HyperText Transfer Protocol,縮寫：HTTP）是一種用於分佈式&協作式和超媒體資訊系統的應用層協議,HTTP是全球資訊網的資料通訊的基礎<br />
*xml:可延伸標記式語言（英語：Extensible Markup Language,簡稱：XML）是一種標記式語言,標記指電腦所能理解的資訊符號,通過此種標記,電腦之間可以處理包含各種資訊的文章等<br />
*課後筆記:<br />
*#筆記網頁建設:登入後搜尋{資訊基礎應用/蕭卉均}→點一下，開始編輯→編輯完點儲存頁面<br />
*#色碼表:https://www.toodoo.com/db/color.html<br />
*通訊錄:<br />
*<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
<table class='nicetable'><br />
<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
</table><br />
<br />
==♡ wiki ♡==<br />
*何謂wiki:Wiki是一種在全球資訊網上開放且可供多人協同創作的超文字系統,由沃德·坎寧安於1995年首先開發,沃德·坎寧安將wiki定義為「一種允許一群用戶用簡單的描述來建立和連線一組網頁的社會計算系統」<br />
*CC授權:創用CC授權條款（英語：Creative Commons license,簡稱CC授權）是一種公共版權授權條款,其允許分發受版權保護的作品,一個創用CC授權用於一個作者想給他人分享&使用&甚至創作衍生作品的權利<br />
*wiki語法:http://jendo.synology.me/wiki1231/index.php?title=Wiki_%E5%85%A5%E9%96%80%E8%AA%9E%E6%B3%95<br />
*wiki的word適應:履歷表<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E5%B1%A5%E6%AD%B7%E8%A1%A8.html<br />
==♡CSS♡==<br />
*何謂CSS:層疊樣式表（英語：Cascading Style Sheets,簡寫CSS）又稱串樣式列表&級聯樣式表&串接樣式表&層疊樣式表&階層式樣式表,一種用來為結構化文件（如HTML文件或XML應用）添加樣式（字型、間距和顏色等）的電腦語言,由W3C定義和維護,目前最新版本是CSS2.1，為W3C的推薦標準,CSS3現在已被大部分現代瀏覽器支援,而下一版的CSS4仍在開發中<br />
*用法:限制者才有標章,不限制者沒有標章<br />
*重要語法:<br />
*#Attribution(BY):姓名標示,您（使用者）可以複製&發行&展覽&表演&放映&廣播或通過資訊網路傳播本作品；您必須按照作者或者授權人指定的方式對作品進行姓名標示<br />
*#NonCommercial(NC):非商業性使用,您可以自由複製&散布&展示及演出本作品；您不得為商業目的而使用本作品<br />
*#NoDerivs(ND):禁止改作,您可以自由複製&散布&展示及演出本作品；您不得改變&轉變或更改本作品<br />
*#ShareAlike(SA):相同方式分享,您可以自由複製&散布&展示及演出本作品；若您改變&轉變或更改本作品,僅在遵守與本作品相同的授權條款下,您才能散布由本作品產生的衍生作品<br />
<br />
==♡SVG♡==<br />
===1.♪概述♪===<br />
*何謂SVG:可縮放向量圖形（英語：Scalable Vector Graphics,SVG）是一種基於可延伸標記式語言（XML）,用於描述二維向量圖形的圖形格式,SVG由W3C制定,是一個開放標準<br />
*點陣圖與向量圖的比較(含附檔名):<br />
*#SVG:又為向量圖,特色,放大不毛邊,https://upload.wikimedia.org/wikipedia/commons/5/53/Skull_and_crossbones.svg<br />
*#JPG:又名JEPG,失真,壓縮,http://wportfolio.wzu.edu.tw/blog/attach/995/27995/89/bf_51402_8868906_99219_2yzUdJnLy0AsZ9VdwaKNCA.jpg<br />
*#PNG:不失真,公開格式,https://s-media-cache-ak0.pinimg.com/originals/96/94/ef/9694ef6ecfd562c83e7a445ee9ee19ba.png<br />
*#GIF:可動畫,256色,https://2.bp.blogspot.com/-Ra6UuzwDGQg/WDfdq3X1GjI/AAAAAAAD0gc/MfVErIwBENYRH_DvvFsnThfYp-zVxugEgCLcB/s1600/AS000946_02.gif<br />
*SVG格式具有以下優點:<br />
*#圖檔可讀,易於修改和編輯（理論上如此,但實際上卻是因為各種不同的SVG檔編輯器而可能儲存成不易解讀的SVG檔案）<br />
*#與現有技術可以互動融合,例如,SVG技術本身的動態部分（包括時序控制和動畫）就是基於SMIL標準,另外,SVG檔案還可嵌入JavaScript（嚴格地說，應該是ECMAScript）指令碼來控制SVG物件<br />
*#SVG圖形格式可以方便的建立文字索引,從而實現基於內容的圖像搜尋<br />
*#SVG圖形格式支援多種濾鏡和特殊效果,在不改變圖像內容的前提下可以實現點陣圖格式中類似文字陰影的效果<br />
*#SVG圖形格式可以用來動態生成圖形,例如,可用SVG動態生成具有互動功能的地圖,嵌入網頁中,並顯示給終端用戶<br />
*SVG格式具有以下缺點：<br />
*#如何和已經占有重要市場份額的向量圖形格式Adobe Animate競爭的問題,事實上,Adobe Animate在Flash CC 2014版及以後的版本就都支援直接匯出SVG檔案了<br />
*#SVG的本地執行環境下的廠家支援程度<br />
*#由於原始的SVG檔是遵從XML語法,導致資料採用未壓縮的方式存放,因此相較於其他的向量圖形格式,同樣的檔案內容會比其他的檔案格式稍大,Adobe因此使用gzip壓縮開發出壓縮的SVG檔格式,附檔名為 .svgz, 但此種檔案格式除了Adobe旗下的軟體以外,未被廣泛支援使用<br />
*#舊版的SVG Viewer無法正確顯示出使用新版SVG格式的向量圖形<br />
<br />
===2.♪基本架構♪===<br />
*基本架構:SVG允許3種圖形物件類型：向量圖形,柵格圖像以及文字,圖形物件——包括PNG&JPEG這些柵格圖像——能夠被編組&設計&轉換及整合進先前的彩現物件中,文字可以在任何適用於應用程式的XML命名空間之內,從而提高SVG圖形的搜尋能力和無障礙性,SVG提供的功能集涵蓋了巢狀轉換&裁剪路徑&Alpha通道&濾鏡效果&模板物件以及可延伸性,SVG嚴格遵從XML語法,並用文字格式的描述性語言來描述圖像內容,因此是一種和圖像解析度無關的向量圖形格式,SVG可以實現動態和互動功能,在DOM模型的基礎上,SVG開發設計人員可以利用ECMAScript或者SMIL來進行時序控制或物件的操縱,SVG雖然是文字格式,但是SVG支援利用gzip壓縮演算法減少檔案尺寸,壓縮後的檔案通常用被稱為「SVGZ檔案」<br />
*SVG主要支援以下幾種顯示物件：<br />
*#向量顯示物件,基本向量顯示物件包括矩形&圓&橢圓&多邊形&直線&任意曲線等<br />
*#嵌入式外部圖像,包括PNG&JPEG&SVG等<br />
*#文字物件<br />
*基本樣式:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/arrow.svg<br />
*基本圖形:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/bearFace.svg<br />
<br />
===3.♪文字♪===<br />
*TEXT<br />
*#在「text」標籤開始與結束之間夾字,可用中英文,而使用「屬性」來規定文字的表現,所有的屬性都可以改用樣式來表達<br />
*#可用中文字形：<br />
*##屬性dx和dy基於前一個字的位置去做變化：值可為'10,20,30,40'，字的距離一個比一個更遠<br />
*##屬性x和y標示字的起點：值可為'10,20,30,40'，表示每個字的x或y座標<br />
*##屬性fill控制填入字的顏色,預設黑色<br />
*##屬性stroke控制字描框的顏色,預設 none<br />
*##屬性rotate='30'順時鐘轉30°。rotate='30,60,90,120,150,180,210'指定每個字的轉動角度<br />
*##用style控制字體&字形&尺寸,但顏色是用fill不是用color <br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/text.svg<br />
<br />
===4.♪位移&旋轉&縮放&歪斜♪===<br />
*相關屬性說明：<br />
*#平移變換(translate)：transform="translate(x,y)",即新坐標系的原點在原坐標系的(x,y)處,坐標軸的方向不變<br />
*#旋轉變換(rotate)：transform="rotate(angle cx,cy)",angle代表旋轉角度,預設單位是「度」,順時針為正,逆時針為負,(cx,cy)是旋轉中心所在的坐標,若省略旋轉中心坐標,則預設值是(0,0)<br />
*#伸縮變換(scale)：transform="scale(sx,sy)",sx,sy分別代表x軸方向和y方向拉伸或縮小的比例因子,拉伸：大於1；縮小：小於1,若省略sy，即sy=sx，作等比例縮放<br />
*#歪斜變換(skew)：transform='skewX(x-angle)'或transform='skewY(y-angle)',x-angle,y-angle分別代表沿x軸和y軸歪斜的角度<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/transform.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/bearFace.svg<br />
<br />
===5.♪群組♪===<br />
*步驟:<br />
*#先添加svg標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，其中才有href屬性的定義<br />
*#在defs段落中定義圖形，並賦予id<br />
*#用<use xlink:href='#某id'/>來引用既有的定義<br />
<br />
===6.♪定義一次,引用多次♪===<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/uses.svg<br />
<br />
===7.♪漸層♪===<br />
*漸層和濾鏡如果取中文名稱,瀏覽器還認得,但Inkscape和線上轉檔軟體就會不認得<br />
*「漸層」工具可以在多種顏色之間建立漸層混合,您可以從預設漸層填色中選擇,或是建立自己的漸層填色<br />
*線性漸層沿著直線從起點到終點建立陰影<br />
*放射性漸層沿著圓形圖樣從起點到終點建立陰影<br />
*尖角漸層繞著起點以逆時針掃射的方式建立陰影<br />
*反射性漸層在起點的一側建立相同的鏡像線性漸層<br />
*菱形漸層從菱形圖樣的中央往外建立陰影<br />
====(1)☆線性漸層☆====<br />
*步驟：<br />
*#不用添加svg標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，不會用到href屬性<br />
*#在defs段落中定義漸層,並賦予id<br />
*#用fill='url(#某id)'屬性來引用既有的漸層定義<br />
*linearGradient 線性漸層定義語法說明:<br />
*#漸層標籤中的 100%，指的是整個圖形<br />
*#其中的 id 屬性定出漸層名稱<br />
*#由x1,y1,x2,y2四個屬性決定漸層範圍,以及水平,垂直或角形漸層,四個屬性都以百分比表示：<br />
*##x1,y1,x2,y2屬性決定漸層開始和結束位置,x1,x2以圖形的寬度為準,y1,y2以圖形的高度為準<br />
*##當y1和y2相等,而x1和x2不同時,可創建水平漸層<br />
*##當x1和x2相等,而y1和y2不同時,可創建垂直漸層<br />
*##當x1和x2不同,且y1和y2不同時,可創建角形漸層<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/h.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/v.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/arrow.svg<br />
<br />
====(2)☆放射漸層☆====<br />
*radialGradient 放設漸層定義語法說明:<br />
*#漸層範圍：由cx,cy,r三個屬性決定,三個屬性都以百分比表示,漸層範圍是一個圓或橢圓<br />
*##cx表示範圍中心在圖寬百分之幾的位置<br />
*##cy表示範圍中心在圖高百分之幾的位置<br />
*##r如果圖形寬&高相等則範圍為圓,r代表範圍圓半俓除以圖形寬或高；如果圖形寬&高不相等則範圍為橢圓,r代表範圍橢圓的長短軸半長除以圖形寬或高；注意：r為50%,範圍圓直徑恰等於圖的寬或高<br />
*#設色中心：由fx,fy兩個屬性決定的位置,就是設色為0%的地方,兩個屬性都以百分比表示<br />
*##fx表示設色中心在圖寬百分之幾的位置<br />
*##fy表示設色中心在圖高百分之幾的位置<br />
*##設色100%的地方在範圍圓或範圍橢圓的圓周上<br />
*#設色標籤stop,漸層標籤包住數個stop標籤,每種顏色通過一個stop標籤來規定<br />
*##offset屬性用來定義漸層的開始和結束位置,其100%是指整個漸層範圍<br />
*##stop-color屬性用來定義顏色,也可以做為style的樣式<br />
*##stop-opacity屬性決定透明度,也可以做為style的樣式<br />
*#以ball3.svg為例：漸層範圍為整個圓,因為cx,cy,r都是50% ,而設色中心在中間下方,因為fx='50%' fy='100%' ,此處是stop設為0%的顏色(白色),而範圍圓週邊是stop設為100%的顏色(黑色)<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball1.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball2.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball3.svg<br />
<br />
===8.♪柔焦濾鏡♪===<br />
*濾鏡標籤filter語法說明:<br />
*#其中的id屬性定出濾鏡名稱<br />
*#也可以設width,height,x,y去定濾鏡範圍和起點,如沒設以整個圖形為範圍<br />
*#高斯模糊濾鏡feGaussianBlur：濾鏡標籤包住數種不同效果的濾鏡,高斯模糊濾鏡是最簡單的濾鏡<br />
*#高斯模糊濾鏡主要只有一個參數：stdDeviation(標準差),用來控制模糊的程度,數字越大越模糊,數字為零則是圖片原本的狀態<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/sun.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/waterfall1.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/waterfall2.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/waterfall3.svg<br />
<br />
===9.♪path♪===<br />
*path<br />
*#參數大寫代表絕對座標,小寫代表與前一個座標的相對座標<br />
*#點與點之間&同點的x,y座標之間,用空白間開或用,間開兩者是等價的<br />
*http://www.oxxostudio.tw/articles/201406/svg-04-path-1.html<br />
*http://www.oxxostudio.tw/articles/201406/svg-05-path-2.html<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/path01.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/path02.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/path03.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/path04.svg<br />
<br />
===10.♪動畫♪===<br />
*四標籤：<br />
*#set(開關)<br />
*#animate(屬性連續改變)<br />
*#animateTransform(平移,旋轉,縮放)<br />
*#animateMotion(循跡運動)<br />
*共通語法：將母圖形分拆成開始和結束兩標籤,中間插入動畫標籤<br />
*共通屬性：<br />
*#attributeName：<br />
*##set,animate為某一個母圖形的屬性,from和to就是這個屬性的值將由多少變到多少<br />
*##animateTransform為'transform'另搭配type屬性<br />
*##animateMotion免設此屬性<br />
*#type屬性之值(animateTransform專用)：<br />
*##rotate旋轉,影響屬性from='起始角度,旋轉軸心x座標,旋轉軸心y座標'、to='結束角度,旋轉軸心x座標,旋轉軸心y座標'<br />
*##scale縮放,影響屬性from='x起始倍率,y起始倍率'、to='x結束倍率,y結束倍率'，倍率是自左上原點開始算,如果同組x,y倍率相同,可以只寫一個值<br />
*##translate平移,影響屬性from='起始原點x座標,起始原點y座標'、to='結束原點x座標,結束原點y座標'<br />
*##skewX X軸不動,X軸下方向右歪斜,影響屬性from='起始歪斜角度'、to='結束歪斜角度'<br />
*##skewY Y軸不動,Y軸右方向下歪斜,影響屬性from='起始歪斜角度'、to='結束歪斜角度'<br />
*#begin='幾s'：幾秒開始跑,通常設為0s<br />
*#dur='幾s'：跑一輪要幾秒,可以設為indefinite<br />
*#repeatCount='幾'：要跑幾輪,indefinite代表無限多輪,預設值為1<br />
*#from開始狀態(animate,animateTransform有)<br />
*#to結束狀態(set,animate,animateTransform有)<br />
*#path(animateMotion專用)屬性為移動路徑：由m開始<br />
*#rotate='auto'(animateMotion專用)圖形隨路徑曲度而轉折<br />
*http://jendo.org/~admin/path5.svg<br />
*http://jendo.org/~admin/path6.svg<br />
*https://msdn.microsoft.com/zh-tw/library/gg193979(v=vs.85).aspx<br />
<br />
==♡Inkscape♡==<br />
<br />
==♡GIS♡==<br />
*何謂 GIS ？<br />
*兩種主要的 GIS 。<br />
*基本框架。<br />
*marks<br />
*overlays<br />
*google 我的地圖<br />
*結合我的地圖與 GIS<br />
<br />
==♡圖形計算機♡==<br />
*取得 svgdraw.php<br />
*基本框架<br />
*繪製基本圖形<br />
*函式繪圖<br />
*google 圖形計算機</div>
蕭卉均
http://well-being-ng.net/wiki1231/index.php?title=%E8%A8%8E%E8%AB%96:%E8%B3%87%E8%A8%8A%E5%9F%BA%E7%A4%8E%E6%87%89%E7%94%A8/%E8%95%AD%E5%8D%89%E5%9D%87&diff=37913
討論:資訊基礎應用/蕭卉均
2018-01-16T10:02:59Z
<p>蕭卉均：/* 10.♪動畫♪ */</p>
<hr />
<div>=ღ完整筆記ღ=<br />
==♡環境&工具♡==<br />
===1.♪環境♪===<br />
*伺服器與域名,伺服器DS216,網址6years.jendo.org<br />
*wifi,區網wifi：jendod&jendoa,密碼:jendo19690929<br />
*網站空間,瀏覽器：firefox,優先於chrome,盡量不用IE<br />
*wiki上的個人頁,filezilla→開啟filezilla,並新增一個站台叫♕DS216+(共用)♕→主機設定:6years.jendo.org→協定:SFTP→使用者:共用→字碼集:UTF-8→連線,然後到♕home/www♕→建自己帳號的連線→可用的文字編輯器,如emeditor→連結filezilla&慣用的文字編輯器：♕編輯/設定/檔案編輯♕，選用♕使用自訂編輯器♕&♕總是使用預設的編輯器♕，並指定編輯器的路徑<br />
*課後重點筆記:<br />
*#table是開始,/table是結束<br />
*#IP:IP4,最多表達到255字,IPV4一般網頁使用,IP6,物聯網用<br />
*#物聯網:簡單說一切事物,得失相兼<br />
*#域名:域名伺服器(HOSTS)<br />
*#AI(人工智慧)<br />
*#big5,早期,只有繁體中文<br />
*#UTF-8,萬國碼<br />
<br />
===2.♪工具與設定♪===<br />
*firefox:Mozilla Firefox（簡稱Firefox）,中文俗稱火狐（中國大陸官方有使用但未註冊為商標）,是一個自由及開放原始碼的網頁瀏覽器,由Mozilla基金會及其子公司Mozilla公司開發<br />
*filezilla:ileZilla是一種快速&可信賴的FTP用戶端以及伺服器端開放原始碼程式,具有多種特色&直覺的介面,FileZilla在2003年11月獲選為SourceForge.net當月最佳推薦專案<br />
*EmEditor:EmEditor是江村軟體公司（Emurasoft,坐落於美國華盛頓州）所開發的一款在Windows平台上運行的文字編輯程式,EmEditor以運作輕巧&敏捷而又功能強大&豐富著稱而得到許多用戶的好評<br />
<br />
==♡HTML&HTTP♡==<br />
*發有者及發明年代:於西元1993年,W3C&WHATWG開發<br />
*HTML:超文件標示語言（英語：HyperText Markup Language,簡稱：HTML）是一種用於建立網頁的標準標示語言,HTML是一種基礎技術常與CSS&JavaScript一起被眾多網站用於設計令人賞心悅目的網頁&網頁應用程式以及行動應用程式的使用者介面<br />
*HTTP:超文本傳輸協定（英文：HyperText Transfer Protocol,縮寫：HTTP）是一種用於分佈式&協作式和超媒體資訊系統的應用層協議,HTTP是全球資訊網的資料通訊的基礎<br />
*xml:可延伸標記式語言（英語：Extensible Markup Language,簡稱：XML）是一種標記式語言,標記指電腦所能理解的資訊符號,通過此種標記,電腦之間可以處理包含各種資訊的文章等<br />
*課後筆記:<br />
*#筆記網頁建設:登入後搜尋{資訊基礎應用/蕭卉均}→點一下，開始編輯→編輯完點儲存頁面<br />
*#色碼表:https://www.toodoo.com/db/color.html<br />
*通訊錄:<br />
*<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
<table class='nicetable'><br />
<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
</table><br />
<br />
==♡ wiki ♡==<br />
*何謂wiki:Wiki是一種在全球資訊網上開放且可供多人協同創作的超文字系統,由沃德·坎寧安於1995年首先開發,沃德·坎寧安將wiki定義為「一種允許一群用戶用簡單的描述來建立和連線一組網頁的社會計算系統」<br />
*CC授權:創用CC授權條款（英語：Creative Commons license,簡稱CC授權）是一種公共版權授權條款,其允許分發受版權保護的作品,一個創用CC授權用於一個作者想給他人分享&使用&甚至創作衍生作品的權利<br />
*wiki語法:http://jendo.synology.me/wiki1231/index.php?title=Wiki_%E5%85%A5%E9%96%80%E8%AA%9E%E6%B3%95<br />
*wiki的word適應:履歷表<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E5%B1%A5%E6%AD%B7%E8%A1%A8.html<br />
==♡CSS♡==<br />
*何謂CSS:層疊樣式表（英語：Cascading Style Sheets,簡寫CSS）又稱串樣式列表&級聯樣式表&串接樣式表&層疊樣式表&階層式樣式表,一種用來為結構化文件（如HTML文件或XML應用）添加樣式（字型、間距和顏色等）的電腦語言,由W3C定義和維護,目前最新版本是CSS2.1，為W3C的推薦標準,CSS3現在已被大部分現代瀏覽器支援,而下一版的CSS4仍在開發中<br />
*用法:限制者才有標章,不限制者沒有標章<br />
*重要語法:<br />
*#Attribution(BY):姓名標示,您（使用者）可以複製&發行&展覽&表演&放映&廣播或通過資訊網路傳播本作品；您必須按照作者或者授權人指定的方式對作品進行姓名標示<br />
*#NonCommercial(NC):非商業性使用,您可以自由複製&散布&展示及演出本作品；您不得為商業目的而使用本作品<br />
*#NoDerivs(ND):禁止改作,您可以自由複製&散布&展示及演出本作品；您不得改變&轉變或更改本作品<br />
*#ShareAlike(SA):相同方式分享,您可以自由複製&散布&展示及演出本作品；若您改變&轉變或更改本作品,僅在遵守與本作品相同的授權條款下,您才能散布由本作品產生的衍生作品<br />
<br />
==♡SVG♡==<br />
===1.♪概述♪===<br />
*何謂SVG:可縮放向量圖形（英語：Scalable Vector Graphics,SVG）是一種基於可延伸標記式語言（XML）,用於描述二維向量圖形的圖形格式,SVG由W3C制定,是一個開放標準<br />
*點陣圖與向量圖的比較(含附檔名):<br />
*#SVG:又為向量圖,特色,放大不毛邊,https://upload.wikimedia.org/wikipedia/commons/5/53/Skull_and_crossbones.svg<br />
*#JPG:又名JEPG,失真,壓縮,http://wportfolio.wzu.edu.tw/blog/attach/995/27995/89/bf_51402_8868906_99219_2yzUdJnLy0AsZ9VdwaKNCA.jpg<br />
*#PNG:不失真,公開格式,https://s-media-cache-ak0.pinimg.com/originals/96/94/ef/9694ef6ecfd562c83e7a445ee9ee19ba.png<br />
*#GIF:可動畫,256色,https://2.bp.blogspot.com/-Ra6UuzwDGQg/WDfdq3X1GjI/AAAAAAAD0gc/MfVErIwBENYRH_DvvFsnThfYp-zVxugEgCLcB/s1600/AS000946_02.gif<br />
*SVG格式具有以下優點:<br />
*#圖檔可讀,易於修改和編輯（理論上如此,但實際上卻是因為各種不同的SVG檔編輯器而可能儲存成不易解讀的SVG檔案）<br />
*#與現有技術可以互動融合,例如,SVG技術本身的動態部分（包括時序控制和動畫）就是基於SMIL標準,另外,SVG檔案還可嵌入JavaScript（嚴格地說，應該是ECMAScript）指令碼來控制SVG物件<br />
*#SVG圖形格式可以方便的建立文字索引,從而實現基於內容的圖像搜尋<br />
*#SVG圖形格式支援多種濾鏡和特殊效果,在不改變圖像內容的前提下可以實現點陣圖格式中類似文字陰影的效果<br />
*#SVG圖形格式可以用來動態生成圖形,例如,可用SVG動態生成具有互動功能的地圖,嵌入網頁中,並顯示給終端用戶<br />
*SVG格式具有以下缺點：<br />
*#如何和已經占有重要市場份額的向量圖形格式Adobe Animate競爭的問題,事實上,Adobe Animate在Flash CC 2014版及以後的版本就都支援直接匯出SVG檔案了<br />
*#SVG的本地執行環境下的廠家支援程度<br />
*#由於原始的SVG檔是遵從XML語法,導致資料採用未壓縮的方式存放,因此相較於其他的向量圖形格式,同樣的檔案內容會比其他的檔案格式稍大,Adobe因此使用gzip壓縮開發出壓縮的SVG檔格式,附檔名為 .svgz, 但此種檔案格式除了Adobe旗下的軟體以外,未被廣泛支援使用<br />
*#舊版的SVG Viewer無法正確顯示出使用新版SVG格式的向量圖形<br />
<br />
===2.♪基本架構♪===<br />
*基本架構:SVG允許3種圖形物件類型：向量圖形,柵格圖像以及文字,圖形物件——包括PNG&JPEG這些柵格圖像——能夠被編組&設計&轉換及整合進先前的彩現物件中,文字可以在任何適用於應用程式的XML命名空間之內,從而提高SVG圖形的搜尋能力和無障礙性,SVG提供的功能集涵蓋了巢狀轉換&裁剪路徑&Alpha通道&濾鏡效果&模板物件以及可延伸性,SVG嚴格遵從XML語法,並用文字格式的描述性語言來描述圖像內容,因此是一種和圖像解析度無關的向量圖形格式,SVG可以實現動態和互動功能,在DOM模型的基礎上,SVG開發設計人員可以利用ECMAScript或者SMIL來進行時序控制或物件的操縱,SVG雖然是文字格式,但是SVG支援利用gzip壓縮演算法減少檔案尺寸,壓縮後的檔案通常用被稱為「SVGZ檔案」<br />
*SVG主要支援以下幾種顯示物件：<br />
*#向量顯示物件,基本向量顯示物件包括矩形&圓&橢圓&多邊形&直線&任意曲線等<br />
*#嵌入式外部圖像,包括PNG&JPEG&SVG等<br />
*#文字物件<br />
*基本樣式:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/arrow.svg<br />
*基本圖形:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/bearFace.svg<br />
<br />
===3.♪文字♪===<br />
*TEXT<br />
*#在「text」標籤開始與結束之間夾字,可用中英文,而使用「屬性」來規定文字的表現,所有的屬性都可以改用樣式來表達<br />
*#可用中文字形：<br />
*##屬性dx和dy基於前一個字的位置去做變化：值可為'10,20,30,40'，字的距離一個比一個更遠<br />
*##屬性x和y標示字的起點：值可為'10,20,30,40'，表示每個字的x或y座標<br />
*##屬性fill控制填入字的顏色,預設黑色<br />
*##屬性stroke控制字描框的顏色,預設 none<br />
*##屬性rotate='30'順時鐘轉30°。rotate='30,60,90,120,150,180,210'指定每個字的轉動角度<br />
*##用style控制字體&字形&尺寸,但顏色是用fill不是用color <br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/text.svg<br />
<br />
===4.♪位移&旋轉&縮放&歪斜♪===<br />
*相關屬性說明：<br />
*#平移變換(translate)：transform="translate(x,y)",即新坐標系的原點在原坐標系的(x,y)處,坐標軸的方向不變<br />
*#旋轉變換(rotate)：transform="rotate(angle cx,cy)",angle代表旋轉角度,預設單位是「度」,順時針為正,逆時針為負,(cx,cy)是旋轉中心所在的坐標,若省略旋轉中心坐標,則預設值是(0,0)<br />
*#伸縮變換(scale)：transform="scale(sx,sy)",sx,sy分別代表x軸方向和y方向拉伸或縮小的比例因子,拉伸：大於1；縮小：小於1,若省略sy，即sy=sx，作等比例縮放<br />
*#歪斜變換(skew)：transform='skewX(x-angle)'或transform='skewY(y-angle)',x-angle,y-angle分別代表沿x軸和y軸歪斜的角度<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/transform.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/bearFace.svg<br />
<br />
===5.♪群組♪===<br />
*步驟:<br />
*#先添加svg標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，其中才有href屬性的定義<br />
*#在defs段落中定義圖形，並賦予id<br />
*#用<use xlink:href='#某id'/>來引用既有的定義<br />
<br />
===6.♪定義一次,引用多次♪===<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/uses.svg<br />
<br />
===7.♪漸層♪===<br />
*漸層和濾鏡如果取中文名稱,瀏覽器還認得,但Inkscape和線上轉檔軟體就會不認得<br />
*「漸層」工具可以在多種顏色之間建立漸層混合,您可以從預設漸層填色中選擇,或是建立自己的漸層填色<br />
*線性漸層沿著直線從起點到終點建立陰影<br />
*放射性漸層沿著圓形圖樣從起點到終點建立陰影<br />
*尖角漸層繞著起點以逆時針掃射的方式建立陰影<br />
*反射性漸層在起點的一側建立相同的鏡像線性漸層<br />
*菱形漸層從菱形圖樣的中央往外建立陰影<br />
====(1)☆線性漸層☆====<br />
*步驟：<br />
*#不用添加svg標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，不會用到href屬性<br />
*#在defs段落中定義漸層,並賦予id<br />
*#用fill='url(#某id)'屬性來引用既有的漸層定義<br />
*linearGradient 線性漸層定義語法說明:<br />
*#漸層標籤中的 100%，指的是整個圖形<br />
*#其中的 id 屬性定出漸層名稱<br />
*#由x1,y1,x2,y2四個屬性決定漸層範圍,以及水平,垂直或角形漸層,四個屬性都以百分比表示：<br />
*##x1,y1,x2,y2屬性決定漸層開始和結束位置,x1,x2以圖形的寬度為準,y1,y2以圖形的高度為準<br />
*##當y1和y2相等,而x1和x2不同時,可創建水平漸層<br />
*##當x1和x2相等,而y1和y2不同時,可創建垂直漸層<br />
*##當x1和x2不同,且y1和y2不同時,可創建角形漸層<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/h.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/v.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/arrow.svg<br />
<br />
====(2)☆放射漸層☆====<br />
*radialGradient 放設漸層定義語法說明:<br />
*#漸層範圍：由cx,cy,r三個屬性決定,三個屬性都以百分比表示,漸層範圍是一個圓或橢圓<br />
*##cx表示範圍中心在圖寬百分之幾的位置<br />
*##cy表示範圍中心在圖高百分之幾的位置<br />
*##r如果圖形寬&高相等則範圍為圓,r代表範圍圓半俓除以圖形寬或高；如果圖形寬&高不相等則範圍為橢圓,r代表範圍橢圓的長短軸半長除以圖形寬或高；注意：r為50%,範圍圓直徑恰等於圖的寬或高<br />
*#設色中心：由fx,fy兩個屬性決定的位置,就是設色為0%的地方,兩個屬性都以百分比表示<br />
*##fx表示設色中心在圖寬百分之幾的位置<br />
*##fy表示設色中心在圖高百分之幾的位置<br />
*##設色100%的地方在範圍圓或範圍橢圓的圓周上<br />
*#設色標籤stop,漸層標籤包住數個stop標籤,每種顏色通過一個stop標籤來規定<br />
*##offset屬性用來定義漸層的開始和結束位置,其100%是指整個漸層範圍<br />
*##stop-color屬性用來定義顏色,也可以做為style的樣式<br />
*##stop-opacity屬性決定透明度,也可以做為style的樣式<br />
*#以ball3.svg為例：漸層範圍為整個圓,因為cx,cy,r都是50% ,而設色中心在中間下方,因為fx='50%' fy='100%' ,此處是stop設為0%的顏色(白色),而範圍圓週邊是stop設為100%的顏色(黑色)<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball1.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball2.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball3.svg<br />
<br />
===8.♪柔焦濾鏡♪===<br />
*濾鏡標籤filter語法說明:<br />
*#其中的id屬性定出濾鏡名稱<br />
*#也可以設width,height,x,y去定濾鏡範圍和起點,如沒設以整個圖形為範圍<br />
*#高斯模糊濾鏡feGaussianBlur：濾鏡標籤包住數種不同效果的濾鏡,高斯模糊濾鏡是最簡單的濾鏡<br />
*#高斯模糊濾鏡主要只有一個參數：stdDeviation(標準差),用來控制模糊的程度,數字越大越模糊,數字為零則是圖片原本的狀態<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/sun.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/waterfall1.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/waterfall2.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/waterfall3.svg<br />
<br />
===9.♪path♪===<br />
*path<br />
*#參數大寫代表絕對座標,小寫代表與前一個座標的相對座標<br />
*#點與點之間&同點的x,y座標之間,用空白間開或用,間開兩者是等價的<br />
*http://www.oxxostudio.tw/articles/201406/svg-04-path-1.html<br />
*http://www.oxxostudio.tw/articles/201406/svg-05-path-2.html<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/path01.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/path02.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/path03.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/path04.svg<br />
<br />
===10.♪動畫♪===<br />
*四標籤：<br />
*#set(開關)<br />
*#animate(屬性連續改變)<br />
*#animateTransform(平移,旋轉,縮放)<br />
*#animateMotion(循跡運動)<br />
*共通語法：將母圖形分拆成開始和結束兩標籤,中間插入動畫標籤<br />
*共通屬性：<br />
*#attributeName：<br />
*##set,animate為某一個母圖形的屬性,from和to就是這個屬性的值將由多少變到多少<br />
*##animateTransform為'transform'另搭配type屬性<br />
*##animateMotion免設此屬性<br />
*#type屬性之值(animateTransform專用)：<br />
*##rotate旋轉,影響屬性from='起始角度,旋轉軸心x座標,旋轉軸心y座標'、to='結束角度,旋轉軸心x座標,旋轉軸心y座標'<br />
*##scale縮放,影響屬性from='x起始倍率,y起始倍率'、to='x結束倍率,y結束倍率'，倍率是自左上原點開始算,如果同組x,y倍率相同,可以只寫一個值<br />
*##translate平移,影響屬性from='起始原點x座標,起始原點y座標'、to='結束原點x座標,結束原點y座標'<br />
*##skewX X軸不動,X軸下方向右歪斜,影響屬性from='起始歪斜角度'、to='結束歪斜角度'<br />
*##skewY Y軸不動,Y軸右方向下歪斜,影響屬性from='起始歪斜角度'、to='結束歪斜角度'<br />
*#begin='幾s'：幾秒開始跑,通常設為0s<br />
*#dur='幾s'：跑一輪要幾秒,可以設為indefinite<br />
*#repeatCount='幾'：要跑幾輪,indefinite代表無限多輪,預設值為1<br />
*#from開始狀態(animate,animateTransform有)<br />
*#to結束狀態(set,animate,animateTransform有)<br />
*#path(animateMotion專用)屬性為移動路徑：由m開始<br />
*#rotate='auto'(animateMotion專用)圖形隨路徑曲度而轉折<br />
*http://jendo.org/~admin/path5.svg<br />
*http://jendo.org/~admin/path6.svg<br />
<br />
==♡Inkscape♡==<br />
<br />
==♡GIS♡==<br />
*何謂 GIS ？<br />
*兩種主要的 GIS 。<br />
*基本框架。<br />
*marks<br />
*overlays<br />
*google 我的地圖<br />
*結合我的地圖與 GIS<br />
<br />
==♡圖形計算機♡==<br />
*取得 svgdraw.php<br />
*基本框架<br />
*繪製基本圖形<br />
*函式繪圖<br />
*google 圖形計算機</div>
蕭卉均
http://well-being-ng.net/wiki1231/index.php?title=%E8%A8%8E%E8%AB%96:%E8%B3%87%E8%A8%8A%E5%9F%BA%E7%A4%8E%E6%87%89%E7%94%A8/%E8%95%AD%E5%8D%89%E5%9D%87&diff=37912
討論:資訊基礎應用/蕭卉均
2018-01-16T09:53:59Z
<p>蕭卉均：/* 10.♪動畫♪ */</p>
<hr />
<div>=ღ完整筆記ღ=<br />
==♡環境&工具♡==<br />
===1.♪環境♪===<br />
*伺服器與域名,伺服器DS216,網址6years.jendo.org<br />
*wifi,區網wifi：jendod&jendoa,密碼:jendo19690929<br />
*網站空間,瀏覽器：firefox,優先於chrome,盡量不用IE<br />
*wiki上的個人頁,filezilla→開啟filezilla,並新增一個站台叫♕DS216+(共用)♕→主機設定:6years.jendo.org→協定:SFTP→使用者:共用→字碼集:UTF-8→連線,然後到♕home/www♕→建自己帳號的連線→可用的文字編輯器,如emeditor→連結filezilla&慣用的文字編輯器：♕編輯/設定/檔案編輯♕，選用♕使用自訂編輯器♕&♕總是使用預設的編輯器♕，並指定編輯器的路徑<br />
*課後重點筆記:<br />
*#table是開始,/table是結束<br />
*#IP:IP4,最多表達到255字,IPV4一般網頁使用,IP6,物聯網用<br />
*#物聯網:簡單說一切事物,得失相兼<br />
*#域名:域名伺服器(HOSTS)<br />
*#AI(人工智慧)<br />
*#big5,早期,只有繁體中文<br />
*#UTF-8,萬國碼<br />
<br />
===2.♪工具與設定♪===<br />
*firefox:Mozilla Firefox（簡稱Firefox）,中文俗稱火狐（中國大陸官方有使用但未註冊為商標）,是一個自由及開放原始碼的網頁瀏覽器,由Mozilla基金會及其子公司Mozilla公司開發<br />
*filezilla:ileZilla是一種快速&可信賴的FTP用戶端以及伺服器端開放原始碼程式,具有多種特色&直覺的介面,FileZilla在2003年11月獲選為SourceForge.net當月最佳推薦專案<br />
*EmEditor:EmEditor是江村軟體公司（Emurasoft,坐落於美國華盛頓州）所開發的一款在Windows平台上運行的文字編輯程式,EmEditor以運作輕巧&敏捷而又功能強大&豐富著稱而得到許多用戶的好評<br />
<br />
==♡HTML&HTTP♡==<br />
*發有者及發明年代:於西元1993年,W3C&WHATWG開發<br />
*HTML:超文件標示語言（英語：HyperText Markup Language,簡稱：HTML）是一種用於建立網頁的標準標示語言,HTML是一種基礎技術常與CSS&JavaScript一起被眾多網站用於設計令人賞心悅目的網頁&網頁應用程式以及行動應用程式的使用者介面<br />
*HTTP:超文本傳輸協定（英文：HyperText Transfer Protocol,縮寫：HTTP）是一種用於分佈式&協作式和超媒體資訊系統的應用層協議,HTTP是全球資訊網的資料通訊的基礎<br />
*xml:可延伸標記式語言（英語：Extensible Markup Language,簡稱：XML）是一種標記式語言,標記指電腦所能理解的資訊符號,通過此種標記,電腦之間可以處理包含各種資訊的文章等<br />
*課後筆記:<br />
*#筆記網頁建設:登入後搜尋{資訊基礎應用/蕭卉均}→點一下，開始編輯→編輯完點儲存頁面<br />
*#色碼表:https://www.toodoo.com/db/color.html<br />
*通訊錄:<br />
*<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
<table class='nicetable'><br />
<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
</table><br />
<br />
==♡ wiki ♡==<br />
*何謂wiki:Wiki是一種在全球資訊網上開放且可供多人協同創作的超文字系統,由沃德·坎寧安於1995年首先開發,沃德·坎寧安將wiki定義為「一種允許一群用戶用簡單的描述來建立和連線一組網頁的社會計算系統」<br />
*CC授權:創用CC授權條款（英語：Creative Commons license,簡稱CC授權）是一種公共版權授權條款,其允許分發受版權保護的作品,一個創用CC授權用於一個作者想給他人分享&使用&甚至創作衍生作品的權利<br />
*wiki語法:http://jendo.synology.me/wiki1231/index.php?title=Wiki_%E5%85%A5%E9%96%80%E8%AA%9E%E6%B3%95<br />
*wiki的word適應:履歷表<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E5%B1%A5%E6%AD%B7%E8%A1%A8.html<br />
==♡CSS♡==<br />
*何謂CSS:層疊樣式表（英語：Cascading Style Sheets,簡寫CSS）又稱串樣式列表&級聯樣式表&串接樣式表&層疊樣式表&階層式樣式表,一種用來為結構化文件（如HTML文件或XML應用）添加樣式（字型、間距和顏色等）的電腦語言,由W3C定義和維護,目前最新版本是CSS2.1，為W3C的推薦標準,CSS3現在已被大部分現代瀏覽器支援,而下一版的CSS4仍在開發中<br />
*用法:限制者才有標章,不限制者沒有標章<br />
*重要語法:<br />
*#Attribution(BY):姓名標示,您（使用者）可以複製&發行&展覽&表演&放映&廣播或通過資訊網路傳播本作品；您必須按照作者或者授權人指定的方式對作品進行姓名標示<br />
*#NonCommercial(NC):非商業性使用,您可以自由複製&散布&展示及演出本作品；您不得為商業目的而使用本作品<br />
*#NoDerivs(ND):禁止改作,您可以自由複製&散布&展示及演出本作品；您不得改變&轉變或更改本作品<br />
*#ShareAlike(SA):相同方式分享,您可以自由複製&散布&展示及演出本作品；若您改變&轉變或更改本作品,僅在遵守與本作品相同的授權條款下,您才能散布由本作品產生的衍生作品<br />
<br />
==♡SVG♡==<br />
===1.♪概述♪===<br />
*何謂SVG:可縮放向量圖形（英語：Scalable Vector Graphics,SVG）是一種基於可延伸標記式語言（XML）,用於描述二維向量圖形的圖形格式,SVG由W3C制定,是一個開放標準<br />
*點陣圖與向量圖的比較(含附檔名):<br />
*#SVG:又為向量圖,特色,放大不毛邊,https://upload.wikimedia.org/wikipedia/commons/5/53/Skull_and_crossbones.svg<br />
*#JPG:又名JEPG,失真,壓縮,http://wportfolio.wzu.edu.tw/blog/attach/995/27995/89/bf_51402_8868906_99219_2yzUdJnLy0AsZ9VdwaKNCA.jpg<br />
*#PNG:不失真,公開格式,https://s-media-cache-ak0.pinimg.com/originals/96/94/ef/9694ef6ecfd562c83e7a445ee9ee19ba.png<br />
*#GIF:可動畫,256色,https://2.bp.blogspot.com/-Ra6UuzwDGQg/WDfdq3X1GjI/AAAAAAAD0gc/MfVErIwBENYRH_DvvFsnThfYp-zVxugEgCLcB/s1600/AS000946_02.gif<br />
*SVG格式具有以下優點:<br />
*#圖檔可讀,易於修改和編輯（理論上如此,但實際上卻是因為各種不同的SVG檔編輯器而可能儲存成不易解讀的SVG檔案）<br />
*#與現有技術可以互動融合,例如,SVG技術本身的動態部分（包括時序控制和動畫）就是基於SMIL標準,另外,SVG檔案還可嵌入JavaScript（嚴格地說，應該是ECMAScript）指令碼來控制SVG物件<br />
*#SVG圖形格式可以方便的建立文字索引,從而實現基於內容的圖像搜尋<br />
*#SVG圖形格式支援多種濾鏡和特殊效果,在不改變圖像內容的前提下可以實現點陣圖格式中類似文字陰影的效果<br />
*#SVG圖形格式可以用來動態生成圖形,例如,可用SVG動態生成具有互動功能的地圖,嵌入網頁中,並顯示給終端用戶<br />
*SVG格式具有以下缺點：<br />
*#如何和已經占有重要市場份額的向量圖形格式Adobe Animate競爭的問題,事實上,Adobe Animate在Flash CC 2014版及以後的版本就都支援直接匯出SVG檔案了<br />
*#SVG的本地執行環境下的廠家支援程度<br />
*#由於原始的SVG檔是遵從XML語法,導致資料採用未壓縮的方式存放,因此相較於其他的向量圖形格式,同樣的檔案內容會比其他的檔案格式稍大,Adobe因此使用gzip壓縮開發出壓縮的SVG檔格式,附檔名為 .svgz, 但此種檔案格式除了Adobe旗下的軟體以外,未被廣泛支援使用<br />
*#舊版的SVG Viewer無法正確顯示出使用新版SVG格式的向量圖形<br />
<br />
===2.♪基本架構♪===<br />
*基本架構:SVG允許3種圖形物件類型：向量圖形,柵格圖像以及文字,圖形物件——包括PNG&JPEG這些柵格圖像——能夠被編組&設計&轉換及整合進先前的彩現物件中,文字可以在任何適用於應用程式的XML命名空間之內,從而提高SVG圖形的搜尋能力和無障礙性,SVG提供的功能集涵蓋了巢狀轉換&裁剪路徑&Alpha通道&濾鏡效果&模板物件以及可延伸性,SVG嚴格遵從XML語法,並用文字格式的描述性語言來描述圖像內容,因此是一種和圖像解析度無關的向量圖形格式,SVG可以實現動態和互動功能,在DOM模型的基礎上,SVG開發設計人員可以利用ECMAScript或者SMIL來進行時序控制或物件的操縱,SVG雖然是文字格式,但是SVG支援利用gzip壓縮演算法減少檔案尺寸,壓縮後的檔案通常用被稱為「SVGZ檔案」<br />
*SVG主要支援以下幾種顯示物件：<br />
*#向量顯示物件,基本向量顯示物件包括矩形&圓&橢圓&多邊形&直線&任意曲線等<br />
*#嵌入式外部圖像,包括PNG&JPEG&SVG等<br />
*#文字物件<br />
*基本樣式:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/arrow.svg<br />
*基本圖形:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/bearFace.svg<br />
<br />
===3.♪文字♪===<br />
*TEXT<br />
*#在「text」標籤開始與結束之間夾字,可用中英文,而使用「屬性」來規定文字的表現,所有的屬性都可以改用樣式來表達<br />
*#可用中文字形：<br />
*##屬性dx和dy基於前一個字的位置去做變化：值可為'10,20,30,40'，字的距離一個比一個更遠<br />
*##屬性x和y標示字的起點：值可為'10,20,30,40'，表示每個字的x或y座標<br />
*##屬性fill控制填入字的顏色,預設黑色<br />
*##屬性stroke控制字描框的顏色,預設 none<br />
*##屬性rotate='30'順時鐘轉30°。rotate='30,60,90,120,150,180,210'指定每個字的轉動角度<br />
*##用style控制字體&字形&尺寸,但顏色是用fill不是用color <br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/text.svg<br />
<br />
===4.♪位移&旋轉&縮放&歪斜♪===<br />
*相關屬性說明：<br />
*#平移變換(translate)：transform="translate(x,y)",即新坐標系的原點在原坐標系的(x,y)處,坐標軸的方向不變<br />
*#旋轉變換(rotate)：transform="rotate(angle cx,cy)",angle代表旋轉角度,預設單位是「度」,順時針為正,逆時針為負,(cx,cy)是旋轉中心所在的坐標,若省略旋轉中心坐標,則預設值是(0,0)<br />
*#伸縮變換(scale)：transform="scale(sx,sy)",sx,sy分別代表x軸方向和y方向拉伸或縮小的比例因子,拉伸：大於1；縮小：小於1,若省略sy，即sy=sx，作等比例縮放<br />
*#歪斜變換(skew)：transform='skewX(x-angle)'或transform='skewY(y-angle)',x-angle,y-angle分別代表沿x軸和y軸歪斜的角度<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/transform.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/bearFace.svg<br />
<br />
===5.♪群組♪===<br />
*步驟:<br />
*#先添加svg標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，其中才有href屬性的定義<br />
*#在defs段落中定義圖形，並賦予id<br />
*#用<use xlink:href='#某id'/>來引用既有的定義<br />
<br />
===6.♪定義一次,引用多次♪===<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/uses.svg<br />
<br />
===7.♪漸層♪===<br />
*漸層和濾鏡如果取中文名稱,瀏覽器還認得,但Inkscape和線上轉檔軟體就會不認得<br />
*「漸層」工具可以在多種顏色之間建立漸層混合,您可以從預設漸層填色中選擇,或是建立自己的漸層填色<br />
*線性漸層沿著直線從起點到終點建立陰影<br />
*放射性漸層沿著圓形圖樣從起點到終點建立陰影<br />
*尖角漸層繞著起點以逆時針掃射的方式建立陰影<br />
*反射性漸層在起點的一側建立相同的鏡像線性漸層<br />
*菱形漸層從菱形圖樣的中央往外建立陰影<br />
====(1)☆線性漸層☆====<br />
*步驟：<br />
*#不用添加svg標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，不會用到href屬性<br />
*#在defs段落中定義漸層,並賦予id<br />
*#用fill='url(#某id)'屬性來引用既有的漸層定義<br />
*linearGradient 線性漸層定義語法說明:<br />
*#漸層標籤中的 100%，指的是整個圖形<br />
*#其中的 id 屬性定出漸層名稱<br />
*#由x1,y1,x2,y2四個屬性決定漸層範圍,以及水平,垂直或角形漸層,四個屬性都以百分比表示：<br />
*##x1,y1,x2,y2屬性決定漸層開始和結束位置,x1,x2以圖形的寬度為準,y1,y2以圖形的高度為準<br />
*##當y1和y2相等,而x1和x2不同時,可創建水平漸層<br />
*##當x1和x2相等,而y1和y2不同時,可創建垂直漸層<br />
*##當x1和x2不同,且y1和y2不同時,可創建角形漸層<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/h.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/v.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/arrow.svg<br />
<br />
====(2)☆放射漸層☆====<br />
*radialGradient 放設漸層定義語法說明:<br />
*#漸層範圍：由cx,cy,r三個屬性決定,三個屬性都以百分比表示,漸層範圍是一個圓或橢圓<br />
*##cx表示範圍中心在圖寬百分之幾的位置<br />
*##cy表示範圍中心在圖高百分之幾的位置<br />
*##r如果圖形寬&高相等則範圍為圓,r代表範圍圓半俓除以圖形寬或高；如果圖形寬&高不相等則範圍為橢圓,r代表範圍橢圓的長短軸半長除以圖形寬或高；注意：r為50%,範圍圓直徑恰等於圖的寬或高<br />
*#設色中心：由fx,fy兩個屬性決定的位置,就是設色為0%的地方,兩個屬性都以百分比表示<br />
*##fx表示設色中心在圖寬百分之幾的位置<br />
*##fy表示設色中心在圖高百分之幾的位置<br />
*##設色100%的地方在範圍圓或範圍橢圓的圓周上<br />
*#設色標籤stop,漸層標籤包住數個stop標籤,每種顏色通過一個stop標籤來規定<br />
*##offset屬性用來定義漸層的開始和結束位置,其100%是指整個漸層範圍<br />
*##stop-color屬性用來定義顏色,也可以做為style的樣式<br />
*##stop-opacity屬性決定透明度,也可以做為style的樣式<br />
*#以ball3.svg為例：漸層範圍為整個圓,因為cx,cy,r都是50% ,而設色中心在中間下方,因為fx='50%' fy='100%' ,此處是stop設為0%的顏色(白色),而範圍圓週邊是stop設為100%的顏色(黑色)<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball1.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball2.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball3.svg<br />
<br />
===8.♪柔焦濾鏡♪===<br />
*濾鏡標籤filter語法說明:<br />
*#其中的id屬性定出濾鏡名稱<br />
*#也可以設width,height,x,y去定濾鏡範圍和起點,如沒設以整個圖形為範圍<br />
*#高斯模糊濾鏡feGaussianBlur：濾鏡標籤包住數種不同效果的濾鏡,高斯模糊濾鏡是最簡單的濾鏡<br />
*#高斯模糊濾鏡主要只有一個參數：stdDeviation(標準差),用來控制模糊的程度,數字越大越模糊,數字為零則是圖片原本的狀態<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/sun.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/waterfall1.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/waterfall2.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/waterfall3.svg<br />
<br />
===9.♪path♪===<br />
*path<br />
*#參數大寫代表絕對座標,小寫代表與前一個座標的相對座標<br />
*#點與點之間&同點的x,y座標之間,用空白間開或用,間開兩者是等價的<br />
*http://www.oxxostudio.tw/articles/201406/svg-04-path-1.html<br />
*http://www.oxxostudio.tw/articles/201406/svg-05-path-2.html<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/path01.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/path02.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/path03.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/path04.svg<br />
<br />
===10.♪動畫♪===<br />
*四標籤：<br />
*#set(開關)<br />
*http://jendo.org/~admin/path5.svg<br />
*http://jendo.org/~admin/path6.svg<br />
<br />
==♡Inkscape♡==<br />
<br />
==♡GIS♡==<br />
*何謂 GIS ？<br />
*兩種主要的 GIS 。<br />
*基本框架。<br />
*marks<br />
*overlays<br />
*google 我的地圖<br />
*結合我的地圖與 GIS<br />
<br />
==♡圖形計算機♡==<br />
*取得 svgdraw.php<br />
*基本框架<br />
*繪製基本圖形<br />
*函式繪圖<br />
*google 圖形計算機</div>
蕭卉均
http://well-being-ng.net/wiki1231/index.php?title=%E8%A8%8E%E8%AB%96:%E8%B3%87%E8%A8%8A%E5%9F%BA%E7%A4%8E%E6%87%89%E7%94%A8/%E8%95%AD%E5%8D%89%E5%9D%87&diff=37911
討論:資訊基礎應用/蕭卉均
2018-01-16T09:52:39Z
<p>蕭卉均：/* 十、♪動畫♪ */</p>
<hr />
<div>=ღ完整筆記ღ=<br />
==♡環境&工具♡==<br />
===1.♪環境♪===<br />
*伺服器與域名,伺服器DS216,網址6years.jendo.org<br />
*wifi,區網wifi：jendod&jendoa,密碼:jendo19690929<br />
*網站空間,瀏覽器：firefox,優先於chrome,盡量不用IE<br />
*wiki上的個人頁,filezilla→開啟filezilla,並新增一個站台叫♕DS216+(共用)♕→主機設定:6years.jendo.org→協定:SFTP→使用者:共用→字碼集:UTF-8→連線,然後到♕home/www♕→建自己帳號的連線→可用的文字編輯器,如emeditor→連結filezilla&慣用的文字編輯器：♕編輯/設定/檔案編輯♕，選用♕使用自訂編輯器♕&♕總是使用預設的編輯器♕，並指定編輯器的路徑<br />
*課後重點筆記:<br />
*#table是開始,/table是結束<br />
*#IP:IP4,最多表達到255字,IPV4一般網頁使用,IP6,物聯網用<br />
*#物聯網:簡單說一切事物,得失相兼<br />
*#域名:域名伺服器(HOSTS)<br />
*#AI(人工智慧)<br />
*#big5,早期,只有繁體中文<br />
*#UTF-8,萬國碼<br />
<br />
===2.♪工具與設定♪===<br />
*firefox:Mozilla Firefox（簡稱Firefox）,中文俗稱火狐（中國大陸官方有使用但未註冊為商標）,是一個自由及開放原始碼的網頁瀏覽器,由Mozilla基金會及其子公司Mozilla公司開發<br />
*filezilla:ileZilla是一種快速&可信賴的FTP用戶端以及伺服器端開放原始碼程式,具有多種特色&直覺的介面,FileZilla在2003年11月獲選為SourceForge.net當月最佳推薦專案<br />
*EmEditor:EmEditor是江村軟體公司（Emurasoft,坐落於美國華盛頓州）所開發的一款在Windows平台上運行的文字編輯程式,EmEditor以運作輕巧&敏捷而又功能強大&豐富著稱而得到許多用戶的好評<br />
<br />
==♡HTML&HTTP♡==<br />
*發有者及發明年代:於西元1993年,W3C&WHATWG開發<br />
*HTML:超文件標示語言（英語：HyperText Markup Language,簡稱：HTML）是一種用於建立網頁的標準標示語言,HTML是一種基礎技術常與CSS&JavaScript一起被眾多網站用於設計令人賞心悅目的網頁&網頁應用程式以及行動應用程式的使用者介面<br />
*HTTP:超文本傳輸協定（英文：HyperText Transfer Protocol,縮寫：HTTP）是一種用於分佈式&協作式和超媒體資訊系統的應用層協議,HTTP是全球資訊網的資料通訊的基礎<br />
*xml:可延伸標記式語言（英語：Extensible Markup Language,簡稱：XML）是一種標記式語言,標記指電腦所能理解的資訊符號,通過此種標記,電腦之間可以處理包含各種資訊的文章等<br />
*課後筆記:<br />
*#筆記網頁建設:登入後搜尋{資訊基礎應用/蕭卉均}→點一下，開始編輯→編輯完點儲存頁面<br />
*#色碼表:https://www.toodoo.com/db/color.html<br />
*通訊錄:<br />
*<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
<table class='nicetable'><br />
<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
</table><br />
<br />
==♡ wiki ♡==<br />
*何謂wiki:Wiki是一種在全球資訊網上開放且可供多人協同創作的超文字系統,由沃德·坎寧安於1995年首先開發,沃德·坎寧安將wiki定義為「一種允許一群用戶用簡單的描述來建立和連線一組網頁的社會計算系統」<br />
*CC授權:創用CC授權條款（英語：Creative Commons license,簡稱CC授權）是一種公共版權授權條款,其允許分發受版權保護的作品,一個創用CC授權用於一個作者想給他人分享&使用&甚至創作衍生作品的權利<br />
*wiki語法:http://jendo.synology.me/wiki1231/index.php?title=Wiki_%E5%85%A5%E9%96%80%E8%AA%9E%E6%B3%95<br />
*wiki的word適應:履歷表<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E5%B1%A5%E6%AD%B7%E8%A1%A8.html<br />
==♡CSS♡==<br />
*何謂CSS:層疊樣式表（英語：Cascading Style Sheets,簡寫CSS）又稱串樣式列表&級聯樣式表&串接樣式表&層疊樣式表&階層式樣式表,一種用來為結構化文件（如HTML文件或XML應用）添加樣式（字型、間距和顏色等）的電腦語言,由W3C定義和維護,目前最新版本是CSS2.1，為W3C的推薦標準,CSS3現在已被大部分現代瀏覽器支援,而下一版的CSS4仍在開發中<br />
*用法:限制者才有標章,不限制者沒有標章<br />
*重要語法:<br />
*#Attribution(BY):姓名標示,您（使用者）可以複製&發行&展覽&表演&放映&廣播或通過資訊網路傳播本作品；您必須按照作者或者授權人指定的方式對作品進行姓名標示<br />
*#NonCommercial(NC):非商業性使用,您可以自由複製&散布&展示及演出本作品；您不得為商業目的而使用本作品<br />
*#NoDerivs(ND):禁止改作,您可以自由複製&散布&展示及演出本作品；您不得改變&轉變或更改本作品<br />
*#ShareAlike(SA):相同方式分享,您可以自由複製&散布&展示及演出本作品；若您改變&轉變或更改本作品,僅在遵守與本作品相同的授權條款下,您才能散布由本作品產生的衍生作品<br />
<br />
==♡SVG♡==<br />
===1.♪概述♪===<br />
*何謂SVG:可縮放向量圖形（英語：Scalable Vector Graphics,SVG）是一種基於可延伸標記式語言（XML）,用於描述二維向量圖形的圖形格式,SVG由W3C制定,是一個開放標準<br />
*點陣圖與向量圖的比較(含附檔名):<br />
*#SVG:又為向量圖,特色,放大不毛邊,https://upload.wikimedia.org/wikipedia/commons/5/53/Skull_and_crossbones.svg<br />
*#JPG:又名JEPG,失真,壓縮,http://wportfolio.wzu.edu.tw/blog/attach/995/27995/89/bf_51402_8868906_99219_2yzUdJnLy0AsZ9VdwaKNCA.jpg<br />
*#PNG:不失真,公開格式,https://s-media-cache-ak0.pinimg.com/originals/96/94/ef/9694ef6ecfd562c83e7a445ee9ee19ba.png<br />
*#GIF:可動畫,256色,https://2.bp.blogspot.com/-Ra6UuzwDGQg/WDfdq3X1GjI/AAAAAAAD0gc/MfVErIwBENYRH_DvvFsnThfYp-zVxugEgCLcB/s1600/AS000946_02.gif<br />
*SVG格式具有以下優點:<br />
*#圖檔可讀,易於修改和編輯（理論上如此,但實際上卻是因為各種不同的SVG檔編輯器而可能儲存成不易解讀的SVG檔案）<br />
*#與現有技術可以互動融合,例如,SVG技術本身的動態部分（包括時序控制和動畫）就是基於SMIL標準,另外,SVG檔案還可嵌入JavaScript（嚴格地說，應該是ECMAScript）指令碼來控制SVG物件<br />
*#SVG圖形格式可以方便的建立文字索引,從而實現基於內容的圖像搜尋<br />
*#SVG圖形格式支援多種濾鏡和特殊效果,在不改變圖像內容的前提下可以實現點陣圖格式中類似文字陰影的效果<br />
*#SVG圖形格式可以用來動態生成圖形,例如,可用SVG動態生成具有互動功能的地圖,嵌入網頁中,並顯示給終端用戶<br />
*SVG格式具有以下缺點：<br />
*#如何和已經占有重要市場份額的向量圖形格式Adobe Animate競爭的問題,事實上,Adobe Animate在Flash CC 2014版及以後的版本就都支援直接匯出SVG檔案了<br />
*#SVG的本地執行環境下的廠家支援程度<br />
*#由於原始的SVG檔是遵從XML語法,導致資料採用未壓縮的方式存放,因此相較於其他的向量圖形格式,同樣的檔案內容會比其他的檔案格式稍大,Adobe因此使用gzip壓縮開發出壓縮的SVG檔格式,附檔名為 .svgz, 但此種檔案格式除了Adobe旗下的軟體以外,未被廣泛支援使用<br />
*#舊版的SVG Viewer無法正確顯示出使用新版SVG格式的向量圖形<br />
<br />
===2.♪基本架構♪===<br />
*基本架構:SVG允許3種圖形物件類型：向量圖形,柵格圖像以及文字,圖形物件——包括PNG&JPEG這些柵格圖像——能夠被編組&設計&轉換及整合進先前的彩現物件中,文字可以在任何適用於應用程式的XML命名空間之內,從而提高SVG圖形的搜尋能力和無障礙性,SVG提供的功能集涵蓋了巢狀轉換&裁剪路徑&Alpha通道&濾鏡效果&模板物件以及可延伸性,SVG嚴格遵從XML語法,並用文字格式的描述性語言來描述圖像內容,因此是一種和圖像解析度無關的向量圖形格式,SVG可以實現動態和互動功能,在DOM模型的基礎上,SVG開發設計人員可以利用ECMAScript或者SMIL來進行時序控制或物件的操縱,SVG雖然是文字格式,但是SVG支援利用gzip壓縮演算法減少檔案尺寸,壓縮後的檔案通常用被稱為「SVGZ檔案」<br />
*SVG主要支援以下幾種顯示物件：<br />
*#向量顯示物件,基本向量顯示物件包括矩形&圓&橢圓&多邊形&直線&任意曲線等<br />
*#嵌入式外部圖像,包括PNG&JPEG&SVG等<br />
*#文字物件<br />
*基本樣式:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/arrow.svg<br />
*基本圖形:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/bearFace.svg<br />
<br />
===3.♪文字♪===<br />
*TEXT<br />
*#在「text」標籤開始與結束之間夾字,可用中英文,而使用「屬性」來規定文字的表現,所有的屬性都可以改用樣式來表達<br />
*#可用中文字形：<br />
*##屬性dx和dy基於前一個字的位置去做變化：值可為'10,20,30,40'，字的距離一個比一個更遠<br />
*##屬性x和y標示字的起點：值可為'10,20,30,40'，表示每個字的x或y座標<br />
*##屬性fill控制填入字的顏色,預設黑色<br />
*##屬性stroke控制字描框的顏色,預設 none<br />
*##屬性rotate='30'順時鐘轉30°。rotate='30,60,90,120,150,180,210'指定每個字的轉動角度<br />
*##用style控制字體&字形&尺寸,但顏色是用fill不是用color <br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/text.svg<br />
<br />
===4.♪位移&旋轉&縮放&歪斜♪===<br />
*相關屬性說明：<br />
*#平移變換(translate)：transform="translate(x,y)",即新坐標系的原點在原坐標系的(x,y)處,坐標軸的方向不變<br />
*#旋轉變換(rotate)：transform="rotate(angle cx,cy)",angle代表旋轉角度,預設單位是「度」,順時針為正,逆時針為負,(cx,cy)是旋轉中心所在的坐標,若省略旋轉中心坐標,則預設值是(0,0)<br />
*#伸縮變換(scale)：transform="scale(sx,sy)",sx,sy分別代表x軸方向和y方向拉伸或縮小的比例因子,拉伸：大於1；縮小：小於1,若省略sy，即sy=sx，作等比例縮放<br />
*#歪斜變換(skew)：transform='skewX(x-angle)'或transform='skewY(y-angle)',x-angle,y-angle分別代表沿x軸和y軸歪斜的角度<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/transform.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/bearFace.svg<br />
<br />
===5.♪群組♪===<br />
*步驟:<br />
*#先添加svg標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，其中才有href屬性的定義<br />
*#在defs段落中定義圖形，並賦予id<br />
*#用<use xlink:href='#某id'/>來引用既有的定義<br />
<br />
===6.♪定義一次,引用多次♪===<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/uses.svg<br />
<br />
===7.♪漸層♪===<br />
*漸層和濾鏡如果取中文名稱,瀏覽器還認得,但Inkscape和線上轉檔軟體就會不認得<br />
*「漸層」工具可以在多種顏色之間建立漸層混合,您可以從預設漸層填色中選擇,或是建立自己的漸層填色<br />
*線性漸層沿著直線從起點到終點建立陰影<br />
*放射性漸層沿著圓形圖樣從起點到終點建立陰影<br />
*尖角漸層繞著起點以逆時針掃射的方式建立陰影<br />
*反射性漸層在起點的一側建立相同的鏡像線性漸層<br />
*菱形漸層從菱形圖樣的中央往外建立陰影<br />
====(1)☆線性漸層☆====<br />
*步驟：<br />
*#不用添加svg標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，不會用到href屬性<br />
*#在defs段落中定義漸層,並賦予id<br />
*#用fill='url(#某id)'屬性來引用既有的漸層定義<br />
*linearGradient 線性漸層定義語法說明:<br />
*#漸層標籤中的 100%，指的是整個圖形<br />
*#其中的 id 屬性定出漸層名稱<br />
*#由x1,y1,x2,y2四個屬性決定漸層範圍,以及水平,垂直或角形漸層,四個屬性都以百分比表示：<br />
*##x1,y1,x2,y2屬性決定漸層開始和結束位置,x1,x2以圖形的寬度為準,y1,y2以圖形的高度為準<br />
*##當y1和y2相等,而x1和x2不同時,可創建水平漸層<br />
*##當x1和x2相等,而y1和y2不同時,可創建垂直漸層<br />
*##當x1和x2不同,且y1和y2不同時,可創建角形漸層<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/h.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/v.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/arrow.svg<br />
<br />
====(2)☆放射漸層☆====<br />
*radialGradient 放設漸層定義語法說明:<br />
*#漸層範圍：由cx,cy,r三個屬性決定,三個屬性都以百分比表示,漸層範圍是一個圓或橢圓<br />
*##cx表示範圍中心在圖寬百分之幾的位置<br />
*##cy表示範圍中心在圖高百分之幾的位置<br />
*##r如果圖形寬&高相等則範圍為圓,r代表範圍圓半俓除以圖形寬或高；如果圖形寬&高不相等則範圍為橢圓,r代表範圍橢圓的長短軸半長除以圖形寬或高；注意：r為50%,範圍圓直徑恰等於圖的寬或高<br />
*#設色中心：由fx,fy兩個屬性決定的位置,就是設色為0%的地方,兩個屬性都以百分比表示<br />
*##fx表示設色中心在圖寬百分之幾的位置<br />
*##fy表示設色中心在圖高百分之幾的位置<br />
*##設色100%的地方在範圍圓或範圍橢圓的圓周上<br />
*#設色標籤stop,漸層標籤包住數個stop標籤,每種顏色通過一個stop標籤來規定<br />
*##offset屬性用來定義漸層的開始和結束位置,其100%是指整個漸層範圍<br />
*##stop-color屬性用來定義顏色,也可以做為style的樣式<br />
*##stop-opacity屬性決定透明度,也可以做為style的樣式<br />
*#以ball3.svg為例：漸層範圍為整個圓,因為cx,cy,r都是50% ,而設色中心在中間下方,因為fx='50%' fy='100%' ,此處是stop設為0%的顏色(白色),而範圍圓週邊是stop設為100%的顏色(黑色)<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball1.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball2.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball3.svg<br />
<br />
===8.♪柔焦濾鏡♪===<br />
*濾鏡標籤filter語法說明:<br />
*#其中的id屬性定出濾鏡名稱<br />
*#也可以設width,height,x,y去定濾鏡範圍和起點,如沒設以整個圖形為範圍<br />
*#高斯模糊濾鏡feGaussianBlur：濾鏡標籤包住數種不同效果的濾鏡,高斯模糊濾鏡是最簡單的濾鏡<br />
*#高斯模糊濾鏡主要只有一個參數：stdDeviation(標準差),用來控制模糊的程度,數字越大越模糊,數字為零則是圖片原本的狀態<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/sun.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/waterfall1.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/waterfall2.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/waterfall3.svg<br />
<br />
===9.♪path♪===<br />
*path<br />
*#參數大寫代表絕對座標,小寫代表與前一個座標的相對座標<br />
*#點與點之間&同點的x,y座標之間,用空白間開或用,間開兩者是等價的<br />
*http://www.oxxostudio.tw/articles/201406/svg-04-path-1.html<br />
*http://www.oxxostudio.tw/articles/201406/svg-05-path-2.html<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/path01.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/path02.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/path03.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/path04.svg<br />
<br />
===10.♪動畫♪===<br />
*http://jendo.org/~admin/path5.svg<br />
*http://jendo.org/~admin/path6.svg<br />
<br />
==♡Inkscape♡==<br />
<br />
==♡GIS♡==<br />
*何謂 GIS ？<br />
*兩種主要的 GIS 。<br />
*基本框架。<br />
*marks<br />
*overlays<br />
*google 我的地圖<br />
*結合我的地圖與 GIS<br />
<br />
==♡圖形計算機♡==<br />
*取得 svgdraw.php<br />
*基本框架<br />
*繪製基本圖形<br />
*函式繪圖<br />
*google 圖形計算機</div>
蕭卉均
http://well-being-ng.net/wiki1231/index.php?title=%E8%A8%8E%E8%AB%96:%E8%B3%87%E8%A8%8A%E5%9F%BA%E7%A4%8E%E6%87%89%E7%94%A8/%E8%95%AD%E5%8D%89%E5%9D%87&diff=37910
討論:資訊基礎應用/蕭卉均
2018-01-16T09:52:15Z
<p>蕭卉均：/* 9.♪path♪ */</p>
<hr />
<div>=ღ完整筆記ღ=<br />
==♡環境&工具♡==<br />
===1.♪環境♪===<br />
*伺服器與域名,伺服器DS216,網址6years.jendo.org<br />
*wifi,區網wifi：jendod&jendoa,密碼:jendo19690929<br />
*網站空間,瀏覽器：firefox,優先於chrome,盡量不用IE<br />
*wiki上的個人頁,filezilla→開啟filezilla,並新增一個站台叫♕DS216+(共用)♕→主機設定:6years.jendo.org→協定:SFTP→使用者:共用→字碼集:UTF-8→連線,然後到♕home/www♕→建自己帳號的連線→可用的文字編輯器,如emeditor→連結filezilla&慣用的文字編輯器：♕編輯/設定/檔案編輯♕，選用♕使用自訂編輯器♕&♕總是使用預設的編輯器♕，並指定編輯器的路徑<br />
*課後重點筆記:<br />
*#table是開始,/table是結束<br />
*#IP:IP4,最多表達到255字,IPV4一般網頁使用,IP6,物聯網用<br />
*#物聯網:簡單說一切事物,得失相兼<br />
*#域名:域名伺服器(HOSTS)<br />
*#AI(人工智慧)<br />
*#big5,早期,只有繁體中文<br />
*#UTF-8,萬國碼<br />
<br />
===2.♪工具與設定♪===<br />
*firefox:Mozilla Firefox（簡稱Firefox）,中文俗稱火狐（中國大陸官方有使用但未註冊為商標）,是一個自由及開放原始碼的網頁瀏覽器,由Mozilla基金會及其子公司Mozilla公司開發<br />
*filezilla:ileZilla是一種快速&可信賴的FTP用戶端以及伺服器端開放原始碼程式,具有多種特色&直覺的介面,FileZilla在2003年11月獲選為SourceForge.net當月最佳推薦專案<br />
*EmEditor:EmEditor是江村軟體公司（Emurasoft,坐落於美國華盛頓州）所開發的一款在Windows平台上運行的文字編輯程式,EmEditor以運作輕巧&敏捷而又功能強大&豐富著稱而得到許多用戶的好評<br />
<br />
==♡HTML&HTTP♡==<br />
*發有者及發明年代:於西元1993年,W3C&WHATWG開發<br />
*HTML:超文件標示語言（英語：HyperText Markup Language,簡稱：HTML）是一種用於建立網頁的標準標示語言,HTML是一種基礎技術常與CSS&JavaScript一起被眾多網站用於設計令人賞心悅目的網頁&網頁應用程式以及行動應用程式的使用者介面<br />
*HTTP:超文本傳輸協定（英文：HyperText Transfer Protocol,縮寫：HTTP）是一種用於分佈式&協作式和超媒體資訊系統的應用層協議,HTTP是全球資訊網的資料通訊的基礎<br />
*xml:可延伸標記式語言（英語：Extensible Markup Language,簡稱：XML）是一種標記式語言,標記指電腦所能理解的資訊符號,通過此種標記,電腦之間可以處理包含各種資訊的文章等<br />
*課後筆記:<br />
*#筆記網頁建設:登入後搜尋{資訊基礎應用/蕭卉均}→點一下，開始編輯→編輯完點儲存頁面<br />
*#色碼表:https://www.toodoo.com/db/color.html<br />
*通訊錄:<br />
*<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
<table class='nicetable'><br />
<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
</table><br />
<br />
==♡ wiki ♡==<br />
*何謂wiki:Wiki是一種在全球資訊網上開放且可供多人協同創作的超文字系統,由沃德·坎寧安於1995年首先開發,沃德·坎寧安將wiki定義為「一種允許一群用戶用簡單的描述來建立和連線一組網頁的社會計算系統」<br />
*CC授權:創用CC授權條款（英語：Creative Commons license,簡稱CC授權）是一種公共版權授權條款,其允許分發受版權保護的作品,一個創用CC授權用於一個作者想給他人分享&使用&甚至創作衍生作品的權利<br />
*wiki語法:http://jendo.synology.me/wiki1231/index.php?title=Wiki_%E5%85%A5%E9%96%80%E8%AA%9E%E6%B3%95<br />
*wiki的word適應:履歷表<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E5%B1%A5%E6%AD%B7%E8%A1%A8.html<br />
==♡CSS♡==<br />
*何謂CSS:層疊樣式表（英語：Cascading Style Sheets,簡寫CSS）又稱串樣式列表&級聯樣式表&串接樣式表&層疊樣式表&階層式樣式表,一種用來為結構化文件（如HTML文件或XML應用）添加樣式（字型、間距和顏色等）的電腦語言,由W3C定義和維護,目前最新版本是CSS2.1，為W3C的推薦標準,CSS3現在已被大部分現代瀏覽器支援,而下一版的CSS4仍在開發中<br />
*用法:限制者才有標章,不限制者沒有標章<br />
*重要語法:<br />
*#Attribution(BY):姓名標示,您（使用者）可以複製&發行&展覽&表演&放映&廣播或通過資訊網路傳播本作品；您必須按照作者或者授權人指定的方式對作品進行姓名標示<br />
*#NonCommercial(NC):非商業性使用,您可以自由複製&散布&展示及演出本作品；您不得為商業目的而使用本作品<br />
*#NoDerivs(ND):禁止改作,您可以自由複製&散布&展示及演出本作品；您不得改變&轉變或更改本作品<br />
*#ShareAlike(SA):相同方式分享,您可以自由複製&散布&展示及演出本作品；若您改變&轉變或更改本作品,僅在遵守與本作品相同的授權條款下,您才能散布由本作品產生的衍生作品<br />
<br />
==♡SVG♡==<br />
===1.♪概述♪===<br />
*何謂SVG:可縮放向量圖形（英語：Scalable Vector Graphics,SVG）是一種基於可延伸標記式語言（XML）,用於描述二維向量圖形的圖形格式,SVG由W3C制定,是一個開放標準<br />
*點陣圖與向量圖的比較(含附檔名):<br />
*#SVG:又為向量圖,特色,放大不毛邊,https://upload.wikimedia.org/wikipedia/commons/5/53/Skull_and_crossbones.svg<br />
*#JPG:又名JEPG,失真,壓縮,http://wportfolio.wzu.edu.tw/blog/attach/995/27995/89/bf_51402_8868906_99219_2yzUdJnLy0AsZ9VdwaKNCA.jpg<br />
*#PNG:不失真,公開格式,https://s-media-cache-ak0.pinimg.com/originals/96/94/ef/9694ef6ecfd562c83e7a445ee9ee19ba.png<br />
*#GIF:可動畫,256色,https://2.bp.blogspot.com/-Ra6UuzwDGQg/WDfdq3X1GjI/AAAAAAAD0gc/MfVErIwBENYRH_DvvFsnThfYp-zVxugEgCLcB/s1600/AS000946_02.gif<br />
*SVG格式具有以下優點:<br />
*#圖檔可讀,易於修改和編輯（理論上如此,但實際上卻是因為各種不同的SVG檔編輯器而可能儲存成不易解讀的SVG檔案）<br />
*#與現有技術可以互動融合,例如,SVG技術本身的動態部分（包括時序控制和動畫）就是基於SMIL標準,另外,SVG檔案還可嵌入JavaScript（嚴格地說，應該是ECMAScript）指令碼來控制SVG物件<br />
*#SVG圖形格式可以方便的建立文字索引,從而實現基於內容的圖像搜尋<br />
*#SVG圖形格式支援多種濾鏡和特殊效果,在不改變圖像內容的前提下可以實現點陣圖格式中類似文字陰影的效果<br />
*#SVG圖形格式可以用來動態生成圖形,例如,可用SVG動態生成具有互動功能的地圖,嵌入網頁中,並顯示給終端用戶<br />
*SVG格式具有以下缺點：<br />
*#如何和已經占有重要市場份額的向量圖形格式Adobe Animate競爭的問題,事實上,Adobe Animate在Flash CC 2014版及以後的版本就都支援直接匯出SVG檔案了<br />
*#SVG的本地執行環境下的廠家支援程度<br />
*#由於原始的SVG檔是遵從XML語法,導致資料採用未壓縮的方式存放,因此相較於其他的向量圖形格式,同樣的檔案內容會比其他的檔案格式稍大,Adobe因此使用gzip壓縮開發出壓縮的SVG檔格式,附檔名為 .svgz, 但此種檔案格式除了Adobe旗下的軟體以外,未被廣泛支援使用<br />
*#舊版的SVG Viewer無法正確顯示出使用新版SVG格式的向量圖形<br />
<br />
===2.♪基本架構♪===<br />
*基本架構:SVG允許3種圖形物件類型：向量圖形,柵格圖像以及文字,圖形物件——包括PNG&JPEG這些柵格圖像——能夠被編組&設計&轉換及整合進先前的彩現物件中,文字可以在任何適用於應用程式的XML命名空間之內,從而提高SVG圖形的搜尋能力和無障礙性,SVG提供的功能集涵蓋了巢狀轉換&裁剪路徑&Alpha通道&濾鏡效果&模板物件以及可延伸性,SVG嚴格遵從XML語法,並用文字格式的描述性語言來描述圖像內容,因此是一種和圖像解析度無關的向量圖形格式,SVG可以實現動態和互動功能,在DOM模型的基礎上,SVG開發設計人員可以利用ECMAScript或者SMIL來進行時序控制或物件的操縱,SVG雖然是文字格式,但是SVG支援利用gzip壓縮演算法減少檔案尺寸,壓縮後的檔案通常用被稱為「SVGZ檔案」<br />
*SVG主要支援以下幾種顯示物件：<br />
*#向量顯示物件,基本向量顯示物件包括矩形&圓&橢圓&多邊形&直線&任意曲線等<br />
*#嵌入式外部圖像,包括PNG&JPEG&SVG等<br />
*#文字物件<br />
*基本樣式:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/arrow.svg<br />
*基本圖形:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/bearFace.svg<br />
<br />
===3.♪文字♪===<br />
*TEXT<br />
*#在「text」標籤開始與結束之間夾字,可用中英文,而使用「屬性」來規定文字的表現,所有的屬性都可以改用樣式來表達<br />
*#可用中文字形：<br />
*##屬性dx和dy基於前一個字的位置去做變化：值可為'10,20,30,40'，字的距離一個比一個更遠<br />
*##屬性x和y標示字的起點：值可為'10,20,30,40'，表示每個字的x或y座標<br />
*##屬性fill控制填入字的顏色,預設黑色<br />
*##屬性stroke控制字描框的顏色,預設 none<br />
*##屬性rotate='30'順時鐘轉30°。rotate='30,60,90,120,150,180,210'指定每個字的轉動角度<br />
*##用style控制字體&字形&尺寸,但顏色是用fill不是用color <br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/text.svg<br />
<br />
===4.♪位移&旋轉&縮放&歪斜♪===<br />
*相關屬性說明：<br />
*#平移變換(translate)：transform="translate(x,y)",即新坐標系的原點在原坐標系的(x,y)處,坐標軸的方向不變<br />
*#旋轉變換(rotate)：transform="rotate(angle cx,cy)",angle代表旋轉角度,預設單位是「度」,順時針為正,逆時針為負,(cx,cy)是旋轉中心所在的坐標,若省略旋轉中心坐標,則預設值是(0,0)<br />
*#伸縮變換(scale)：transform="scale(sx,sy)",sx,sy分別代表x軸方向和y方向拉伸或縮小的比例因子,拉伸：大於1；縮小：小於1,若省略sy，即sy=sx，作等比例縮放<br />
*#歪斜變換(skew)：transform='skewX(x-angle)'或transform='skewY(y-angle)',x-angle,y-angle分別代表沿x軸和y軸歪斜的角度<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/transform.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/bearFace.svg<br />
<br />
===5.♪群組♪===<br />
*步驟:<br />
*#先添加svg標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，其中才有href屬性的定義<br />
*#在defs段落中定義圖形，並賦予id<br />
*#用<use xlink:href='#某id'/>來引用既有的定義<br />
<br />
===6.♪定義一次,引用多次♪===<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/uses.svg<br />
<br />
===7.♪漸層♪===<br />
*漸層和濾鏡如果取中文名稱,瀏覽器還認得,但Inkscape和線上轉檔軟體就會不認得<br />
*「漸層」工具可以在多種顏色之間建立漸層混合,您可以從預設漸層填色中選擇,或是建立自己的漸層填色<br />
*線性漸層沿著直線從起點到終點建立陰影<br />
*放射性漸層沿著圓形圖樣從起點到終點建立陰影<br />
*尖角漸層繞著起點以逆時針掃射的方式建立陰影<br />
*反射性漸層在起點的一側建立相同的鏡像線性漸層<br />
*菱形漸層從菱形圖樣的中央往外建立陰影<br />
====(1)☆線性漸層☆====<br />
*步驟：<br />
*#不用添加svg標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，不會用到href屬性<br />
*#在defs段落中定義漸層,並賦予id<br />
*#用fill='url(#某id)'屬性來引用既有的漸層定義<br />
*linearGradient 線性漸層定義語法說明:<br />
*#漸層標籤中的 100%，指的是整個圖形<br />
*#其中的 id 屬性定出漸層名稱<br />
*#由x1,y1,x2,y2四個屬性決定漸層範圍,以及水平,垂直或角形漸層,四個屬性都以百分比表示：<br />
*##x1,y1,x2,y2屬性決定漸層開始和結束位置,x1,x2以圖形的寬度為準,y1,y2以圖形的高度為準<br />
*##當y1和y2相等,而x1和x2不同時,可創建水平漸層<br />
*##當x1和x2相等,而y1和y2不同時,可創建垂直漸層<br />
*##當x1和x2不同,且y1和y2不同時,可創建角形漸層<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/h.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/v.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/arrow.svg<br />
<br />
====(2)☆放射漸層☆====<br />
*radialGradient 放設漸層定義語法說明:<br />
*#漸層範圍：由cx,cy,r三個屬性決定,三個屬性都以百分比表示,漸層範圍是一個圓或橢圓<br />
*##cx表示範圍中心在圖寬百分之幾的位置<br />
*##cy表示範圍中心在圖高百分之幾的位置<br />
*##r如果圖形寬&高相等則範圍為圓,r代表範圍圓半俓除以圖形寬或高；如果圖形寬&高不相等則範圍為橢圓,r代表範圍橢圓的長短軸半長除以圖形寬或高；注意：r為50%,範圍圓直徑恰等於圖的寬或高<br />
*#設色中心：由fx,fy兩個屬性決定的位置,就是設色為0%的地方,兩個屬性都以百分比表示<br />
*##fx表示設色中心在圖寬百分之幾的位置<br />
*##fy表示設色中心在圖高百分之幾的位置<br />
*##設色100%的地方在範圍圓或範圍橢圓的圓周上<br />
*#設色標籤stop,漸層標籤包住數個stop標籤,每種顏色通過一個stop標籤來規定<br />
*##offset屬性用來定義漸層的開始和結束位置,其100%是指整個漸層範圍<br />
*##stop-color屬性用來定義顏色,也可以做為style的樣式<br />
*##stop-opacity屬性決定透明度,也可以做為style的樣式<br />
*#以ball3.svg為例：漸層範圍為整個圓,因為cx,cy,r都是50% ,而設色中心在中間下方,因為fx='50%' fy='100%' ,此處是stop設為0%的顏色(白色),而範圍圓週邊是stop設為100%的顏色(黑色)<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball1.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball2.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball3.svg<br />
<br />
===8.♪柔焦濾鏡♪===<br />
*濾鏡標籤filter語法說明:<br />
*#其中的id屬性定出濾鏡名稱<br />
*#也可以設width,height,x,y去定濾鏡範圍和起點,如沒設以整個圖形為範圍<br />
*#高斯模糊濾鏡feGaussianBlur：濾鏡標籤包住數種不同效果的濾鏡,高斯模糊濾鏡是最簡單的濾鏡<br />
*#高斯模糊濾鏡主要只有一個參數：stdDeviation(標準差),用來控制模糊的程度,數字越大越模糊,數字為零則是圖片原本的狀態<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/sun.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/waterfall1.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/waterfall2.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/waterfall3.svg<br />
<br />
===9.♪path♪===<br />
*path<br />
*#參數大寫代表絕對座標,小寫代表與前一個座標的相對座標<br />
*#點與點之間&同點的x,y座標之間,用空白間開或用,間開兩者是等價的<br />
*http://www.oxxostudio.tw/articles/201406/svg-04-path-1.html<br />
*http://www.oxxostudio.tw/articles/201406/svg-05-path-2.html<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/path01.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/path02.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/path03.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/path04.svg<br />
<br />
===十、♪動畫♪===<br />
<br />
==♡Inkscape♡==<br />
<br />
==♡GIS♡==<br />
*何謂 GIS ？<br />
*兩種主要的 GIS 。<br />
*基本框架。<br />
*marks<br />
*overlays<br />
*google 我的地圖<br />
*結合我的地圖與 GIS<br />
<br />
==♡圖形計算機♡==<br />
*取得 svgdraw.php<br />
*基本框架<br />
*繪製基本圖形<br />
*函式繪圖<br />
*google 圖形計算機</div>
蕭卉均
http://well-being-ng.net/wiki1231/index.php?title=%E8%A8%8E%E8%AB%96:%E8%B3%87%E8%A8%8A%E5%9F%BA%E7%A4%8E%E6%87%89%E7%94%A8/%E8%95%AD%E5%8D%89%E5%9D%87&diff=37909
討論:資訊基礎應用/蕭卉均
2018-01-16T09:51:51Z
<p>蕭卉均：/* 九、♪path♪ */</p>
<hr />
<div>=ღ完整筆記ღ=<br />
==♡環境&工具♡==<br />
===1.♪環境♪===<br />
*伺服器與域名,伺服器DS216,網址6years.jendo.org<br />
*wifi,區網wifi：jendod&jendoa,密碼:jendo19690929<br />
*網站空間,瀏覽器：firefox,優先於chrome,盡量不用IE<br />
*wiki上的個人頁,filezilla→開啟filezilla,並新增一個站台叫♕DS216+(共用)♕→主機設定:6years.jendo.org→協定:SFTP→使用者:共用→字碼集:UTF-8→連線,然後到♕home/www♕→建自己帳號的連線→可用的文字編輯器,如emeditor→連結filezilla&慣用的文字編輯器：♕編輯/設定/檔案編輯♕，選用♕使用自訂編輯器♕&♕總是使用預設的編輯器♕，並指定編輯器的路徑<br />
*課後重點筆記:<br />
*#table是開始,/table是結束<br />
*#IP:IP4,最多表達到255字,IPV4一般網頁使用,IP6,物聯網用<br />
*#物聯網:簡單說一切事物,得失相兼<br />
*#域名:域名伺服器(HOSTS)<br />
*#AI(人工智慧)<br />
*#big5,早期,只有繁體中文<br />
*#UTF-8,萬國碼<br />
<br />
===2.♪工具與設定♪===<br />
*firefox:Mozilla Firefox（簡稱Firefox）,中文俗稱火狐（中國大陸官方有使用但未註冊為商標）,是一個自由及開放原始碼的網頁瀏覽器,由Mozilla基金會及其子公司Mozilla公司開發<br />
*filezilla:ileZilla是一種快速&可信賴的FTP用戶端以及伺服器端開放原始碼程式,具有多種特色&直覺的介面,FileZilla在2003年11月獲選為SourceForge.net當月最佳推薦專案<br />
*EmEditor:EmEditor是江村軟體公司（Emurasoft,坐落於美國華盛頓州）所開發的一款在Windows平台上運行的文字編輯程式,EmEditor以運作輕巧&敏捷而又功能強大&豐富著稱而得到許多用戶的好評<br />
<br />
==♡HTML&HTTP♡==<br />
*發有者及發明年代:於西元1993年,W3C&WHATWG開發<br />
*HTML:超文件標示語言（英語：HyperText Markup Language,簡稱：HTML）是一種用於建立網頁的標準標示語言,HTML是一種基礎技術常與CSS&JavaScript一起被眾多網站用於設計令人賞心悅目的網頁&網頁應用程式以及行動應用程式的使用者介面<br />
*HTTP:超文本傳輸協定（英文：HyperText Transfer Protocol,縮寫：HTTP）是一種用於分佈式&協作式和超媒體資訊系統的應用層協議,HTTP是全球資訊網的資料通訊的基礎<br />
*xml:可延伸標記式語言（英語：Extensible Markup Language,簡稱：XML）是一種標記式語言,標記指電腦所能理解的資訊符號,通過此種標記,電腦之間可以處理包含各種資訊的文章等<br />
*課後筆記:<br />
*#筆記網頁建設:登入後搜尋{資訊基礎應用/蕭卉均}→點一下，開始編輯→編輯完點儲存頁面<br />
*#色碼表:https://www.toodoo.com/db/color.html<br />
*通訊錄:<br />
*<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
<table class='nicetable'><br />
<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
</table><br />
<br />
==♡ wiki ♡==<br />
*何謂wiki:Wiki是一種在全球資訊網上開放且可供多人協同創作的超文字系統,由沃德·坎寧安於1995年首先開發,沃德·坎寧安將wiki定義為「一種允許一群用戶用簡單的描述來建立和連線一組網頁的社會計算系統」<br />
*CC授權:創用CC授權條款（英語：Creative Commons license,簡稱CC授權）是一種公共版權授權條款,其允許分發受版權保護的作品,一個創用CC授權用於一個作者想給他人分享&使用&甚至創作衍生作品的權利<br />
*wiki語法:http://jendo.synology.me/wiki1231/index.php?title=Wiki_%E5%85%A5%E9%96%80%E8%AA%9E%E6%B3%95<br />
*wiki的word適應:履歷表<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E5%B1%A5%E6%AD%B7%E8%A1%A8.html<br />
==♡CSS♡==<br />
*何謂CSS:層疊樣式表（英語：Cascading Style Sheets,簡寫CSS）又稱串樣式列表&級聯樣式表&串接樣式表&層疊樣式表&階層式樣式表,一種用來為結構化文件（如HTML文件或XML應用）添加樣式（字型、間距和顏色等）的電腦語言,由W3C定義和維護,目前最新版本是CSS2.1，為W3C的推薦標準,CSS3現在已被大部分現代瀏覽器支援,而下一版的CSS4仍在開發中<br />
*用法:限制者才有標章,不限制者沒有標章<br />
*重要語法:<br />
*#Attribution(BY):姓名標示,您（使用者）可以複製&發行&展覽&表演&放映&廣播或通過資訊網路傳播本作品；您必須按照作者或者授權人指定的方式對作品進行姓名標示<br />
*#NonCommercial(NC):非商業性使用,您可以自由複製&散布&展示及演出本作品；您不得為商業目的而使用本作品<br />
*#NoDerivs(ND):禁止改作,您可以自由複製&散布&展示及演出本作品；您不得改變&轉變或更改本作品<br />
*#ShareAlike(SA):相同方式分享,您可以自由複製&散布&展示及演出本作品；若您改變&轉變或更改本作品,僅在遵守與本作品相同的授權條款下,您才能散布由本作品產生的衍生作品<br />
<br />
==♡SVG♡==<br />
===1.♪概述♪===<br />
*何謂SVG:可縮放向量圖形（英語：Scalable Vector Graphics,SVG）是一種基於可延伸標記式語言（XML）,用於描述二維向量圖形的圖形格式,SVG由W3C制定,是一個開放標準<br />
*點陣圖與向量圖的比較(含附檔名):<br />
*#SVG:又為向量圖,特色,放大不毛邊,https://upload.wikimedia.org/wikipedia/commons/5/53/Skull_and_crossbones.svg<br />
*#JPG:又名JEPG,失真,壓縮,http://wportfolio.wzu.edu.tw/blog/attach/995/27995/89/bf_51402_8868906_99219_2yzUdJnLy0AsZ9VdwaKNCA.jpg<br />
*#PNG:不失真,公開格式,https://s-media-cache-ak0.pinimg.com/originals/96/94/ef/9694ef6ecfd562c83e7a445ee9ee19ba.png<br />
*#GIF:可動畫,256色,https://2.bp.blogspot.com/-Ra6UuzwDGQg/WDfdq3X1GjI/AAAAAAAD0gc/MfVErIwBENYRH_DvvFsnThfYp-zVxugEgCLcB/s1600/AS000946_02.gif<br />
*SVG格式具有以下優點:<br />
*#圖檔可讀,易於修改和編輯（理論上如此,但實際上卻是因為各種不同的SVG檔編輯器而可能儲存成不易解讀的SVG檔案）<br />
*#與現有技術可以互動融合,例如,SVG技術本身的動態部分（包括時序控制和動畫）就是基於SMIL標準,另外,SVG檔案還可嵌入JavaScript（嚴格地說，應該是ECMAScript）指令碼來控制SVG物件<br />
*#SVG圖形格式可以方便的建立文字索引,從而實現基於內容的圖像搜尋<br />
*#SVG圖形格式支援多種濾鏡和特殊效果,在不改變圖像內容的前提下可以實現點陣圖格式中類似文字陰影的效果<br />
*#SVG圖形格式可以用來動態生成圖形,例如,可用SVG動態生成具有互動功能的地圖,嵌入網頁中,並顯示給終端用戶<br />
*SVG格式具有以下缺點：<br />
*#如何和已經占有重要市場份額的向量圖形格式Adobe Animate競爭的問題,事實上,Adobe Animate在Flash CC 2014版及以後的版本就都支援直接匯出SVG檔案了<br />
*#SVG的本地執行環境下的廠家支援程度<br />
*#由於原始的SVG檔是遵從XML語法,導致資料採用未壓縮的方式存放,因此相較於其他的向量圖形格式,同樣的檔案內容會比其他的檔案格式稍大,Adobe因此使用gzip壓縮開發出壓縮的SVG檔格式,附檔名為 .svgz, 但此種檔案格式除了Adobe旗下的軟體以外,未被廣泛支援使用<br />
*#舊版的SVG Viewer無法正確顯示出使用新版SVG格式的向量圖形<br />
<br />
===2.♪基本架構♪===<br />
*基本架構:SVG允許3種圖形物件類型：向量圖形,柵格圖像以及文字,圖形物件——包括PNG&JPEG這些柵格圖像——能夠被編組&設計&轉換及整合進先前的彩現物件中,文字可以在任何適用於應用程式的XML命名空間之內,從而提高SVG圖形的搜尋能力和無障礙性,SVG提供的功能集涵蓋了巢狀轉換&裁剪路徑&Alpha通道&濾鏡效果&模板物件以及可延伸性,SVG嚴格遵從XML語法,並用文字格式的描述性語言來描述圖像內容,因此是一種和圖像解析度無關的向量圖形格式,SVG可以實現動態和互動功能,在DOM模型的基礎上,SVG開發設計人員可以利用ECMAScript或者SMIL來進行時序控制或物件的操縱,SVG雖然是文字格式,但是SVG支援利用gzip壓縮演算法減少檔案尺寸,壓縮後的檔案通常用被稱為「SVGZ檔案」<br />
*SVG主要支援以下幾種顯示物件：<br />
*#向量顯示物件,基本向量顯示物件包括矩形&圓&橢圓&多邊形&直線&任意曲線等<br />
*#嵌入式外部圖像,包括PNG&JPEG&SVG等<br />
*#文字物件<br />
*基本樣式:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/arrow.svg<br />
*基本圖形:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/bearFace.svg<br />
<br />
===3.♪文字♪===<br />
*TEXT<br />
*#在「text」標籤開始與結束之間夾字,可用中英文,而使用「屬性」來規定文字的表現,所有的屬性都可以改用樣式來表達<br />
*#可用中文字形：<br />
*##屬性dx和dy基於前一個字的位置去做變化：值可為'10,20,30,40'，字的距離一個比一個更遠<br />
*##屬性x和y標示字的起點：值可為'10,20,30,40'，表示每個字的x或y座標<br />
*##屬性fill控制填入字的顏色,預設黑色<br />
*##屬性stroke控制字描框的顏色,預設 none<br />
*##屬性rotate='30'順時鐘轉30°。rotate='30,60,90,120,150,180,210'指定每個字的轉動角度<br />
*##用style控制字體&字形&尺寸,但顏色是用fill不是用color <br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/text.svg<br />
<br />
===4.♪位移&旋轉&縮放&歪斜♪===<br />
*相關屬性說明：<br />
*#平移變換(translate)：transform="translate(x,y)",即新坐標系的原點在原坐標系的(x,y)處,坐標軸的方向不變<br />
*#旋轉變換(rotate)：transform="rotate(angle cx,cy)",angle代表旋轉角度,預設單位是「度」,順時針為正,逆時針為負,(cx,cy)是旋轉中心所在的坐標,若省略旋轉中心坐標,則預設值是(0,0)<br />
*#伸縮變換(scale)：transform="scale(sx,sy)",sx,sy分別代表x軸方向和y方向拉伸或縮小的比例因子,拉伸：大於1；縮小：小於1,若省略sy，即sy=sx，作等比例縮放<br />
*#歪斜變換(skew)：transform='skewX(x-angle)'或transform='skewY(y-angle)',x-angle,y-angle分別代表沿x軸和y軸歪斜的角度<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/transform.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/bearFace.svg<br />
<br />
===5.♪群組♪===<br />
*步驟:<br />
*#先添加svg標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，其中才有href屬性的定義<br />
*#在defs段落中定義圖形，並賦予id<br />
*#用<use xlink:href='#某id'/>來引用既有的定義<br />
<br />
===6.♪定義一次,引用多次♪===<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/uses.svg<br />
<br />
===7.♪漸層♪===<br />
*漸層和濾鏡如果取中文名稱,瀏覽器還認得,但Inkscape和線上轉檔軟體就會不認得<br />
*「漸層」工具可以在多種顏色之間建立漸層混合,您可以從預設漸層填色中選擇,或是建立自己的漸層填色<br />
*線性漸層沿著直線從起點到終點建立陰影<br />
*放射性漸層沿著圓形圖樣從起點到終點建立陰影<br />
*尖角漸層繞著起點以逆時針掃射的方式建立陰影<br />
*反射性漸層在起點的一側建立相同的鏡像線性漸層<br />
*菱形漸層從菱形圖樣的中央往外建立陰影<br />
====(1)☆線性漸層☆====<br />
*步驟：<br />
*#不用添加svg標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，不會用到href屬性<br />
*#在defs段落中定義漸層,並賦予id<br />
*#用fill='url(#某id)'屬性來引用既有的漸層定義<br />
*linearGradient 線性漸層定義語法說明:<br />
*#漸層標籤中的 100%，指的是整個圖形<br />
*#其中的 id 屬性定出漸層名稱<br />
*#由x1,y1,x2,y2四個屬性決定漸層範圍,以及水平,垂直或角形漸層,四個屬性都以百分比表示：<br />
*##x1,y1,x2,y2屬性決定漸層開始和結束位置,x1,x2以圖形的寬度為準,y1,y2以圖形的高度為準<br />
*##當y1和y2相等,而x1和x2不同時,可創建水平漸層<br />
*##當x1和x2相等,而y1和y2不同時,可創建垂直漸層<br />
*##當x1和x2不同,且y1和y2不同時,可創建角形漸層<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/h.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/v.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/arrow.svg<br />
<br />
====(2)☆放射漸層☆====<br />
*radialGradient 放設漸層定義語法說明:<br />
*#漸層範圍：由cx,cy,r三個屬性決定,三個屬性都以百分比表示,漸層範圍是一個圓或橢圓<br />
*##cx表示範圍中心在圖寬百分之幾的位置<br />
*##cy表示範圍中心在圖高百分之幾的位置<br />
*##r如果圖形寬&高相等則範圍為圓,r代表範圍圓半俓除以圖形寬或高；如果圖形寬&高不相等則範圍為橢圓,r代表範圍橢圓的長短軸半長除以圖形寬或高；注意：r為50%,範圍圓直徑恰等於圖的寬或高<br />
*#設色中心：由fx,fy兩個屬性決定的位置,就是設色為0%的地方,兩個屬性都以百分比表示<br />
*##fx表示設色中心在圖寬百分之幾的位置<br />
*##fy表示設色中心在圖高百分之幾的位置<br />
*##設色100%的地方在範圍圓或範圍橢圓的圓周上<br />
*#設色標籤stop,漸層標籤包住數個stop標籤,每種顏色通過一個stop標籤來規定<br />
*##offset屬性用來定義漸層的開始和結束位置,其100%是指整個漸層範圍<br />
*##stop-color屬性用來定義顏色,也可以做為style的樣式<br />
*##stop-opacity屬性決定透明度,也可以做為style的樣式<br />
*#以ball3.svg為例：漸層範圍為整個圓,因為cx,cy,r都是50% ,而設色中心在中間下方,因為fx='50%' fy='100%' ,此處是stop設為0%的顏色(白色),而範圍圓週邊是stop設為100%的顏色(黑色)<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball1.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball2.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball3.svg<br />
<br />
===8.♪柔焦濾鏡♪===<br />
*濾鏡標籤filter語法說明:<br />
*#其中的id屬性定出濾鏡名稱<br />
*#也可以設width,height,x,y去定濾鏡範圍和起點,如沒設以整個圖形為範圍<br />
*#高斯模糊濾鏡feGaussianBlur：濾鏡標籤包住數種不同效果的濾鏡,高斯模糊濾鏡是最簡單的濾鏡<br />
*#高斯模糊濾鏡主要只有一個參數：stdDeviation(標準差),用來控制模糊的程度,數字越大越模糊,數字為零則是圖片原本的狀態<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/sun.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/waterfall1.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/waterfall2.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/waterfall3.svg<br />
<br />
===9.♪path♪===<br />
*path<br />
*#參數大寫代表絕對座標,小寫代表與前一個座標的相對座標<br />
*#點與點之間&同點的x,y座標之間,用空白間開或用,間開兩者是等價的<br />
*http://www.oxxostudio.tw/articles/201406/svg-04-path-1.html<br />
*http://www.oxxostudio.tw/articles/201406/svg-05-path-2.html<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/path01.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/path02.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/path03.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/path04.svg<br />
*http://jendo.org/~admin/path5.svg<br />
*http://jendo.org/~admin/path6.svg<br />
<br />
===十、♪動畫♪===<br />
<br />
==♡Inkscape♡==<br />
<br />
==♡GIS♡==<br />
*何謂 GIS ？<br />
*兩種主要的 GIS 。<br />
*基本框架。<br />
*marks<br />
*overlays<br />
*google 我的地圖<br />
*結合我的地圖與 GIS<br />
<br />
==♡圖形計算機♡==<br />
*取得 svgdraw.php<br />
*基本框架<br />
*繪製基本圖形<br />
*函式繪圖<br />
*google 圖形計算機</div>
蕭卉均
http://well-being-ng.net/wiki1231/index.php?title=%E8%A8%8E%E8%AB%96:%E8%B3%87%E8%A8%8A%E5%9F%BA%E7%A4%8E%E6%87%89%E7%94%A8/%E8%95%AD%E5%8D%89%E5%9D%87&diff=37908
討論:資訊基礎應用/蕭卉均
2018-01-16T09:46:29Z
<p>蕭卉均：/* 八、♪柔焦濾鏡♪ */</p>
<hr />
<div>=ღ完整筆記ღ=<br />
==♡環境&工具♡==<br />
===1.♪環境♪===<br />
*伺服器與域名,伺服器DS216,網址6years.jendo.org<br />
*wifi,區網wifi：jendod&jendoa,密碼:jendo19690929<br />
*網站空間,瀏覽器：firefox,優先於chrome,盡量不用IE<br />
*wiki上的個人頁,filezilla→開啟filezilla,並新增一個站台叫♕DS216+(共用)♕→主機設定:6years.jendo.org→協定:SFTP→使用者:共用→字碼集:UTF-8→連線,然後到♕home/www♕→建自己帳號的連線→可用的文字編輯器,如emeditor→連結filezilla&慣用的文字編輯器：♕編輯/設定/檔案編輯♕，選用♕使用自訂編輯器♕&♕總是使用預設的編輯器♕，並指定編輯器的路徑<br />
*課後重點筆記:<br />
*#table是開始,/table是結束<br />
*#IP:IP4,最多表達到255字,IPV4一般網頁使用,IP6,物聯網用<br />
*#物聯網:簡單說一切事物,得失相兼<br />
*#域名:域名伺服器(HOSTS)<br />
*#AI(人工智慧)<br />
*#big5,早期,只有繁體中文<br />
*#UTF-8,萬國碼<br />
<br />
===2.♪工具與設定♪===<br />
*firefox:Mozilla Firefox（簡稱Firefox）,中文俗稱火狐（中國大陸官方有使用但未註冊為商標）,是一個自由及開放原始碼的網頁瀏覽器,由Mozilla基金會及其子公司Mozilla公司開發<br />
*filezilla:ileZilla是一種快速&可信賴的FTP用戶端以及伺服器端開放原始碼程式,具有多種特色&直覺的介面,FileZilla在2003年11月獲選為SourceForge.net當月最佳推薦專案<br />
*EmEditor:EmEditor是江村軟體公司（Emurasoft,坐落於美國華盛頓州）所開發的一款在Windows平台上運行的文字編輯程式,EmEditor以運作輕巧&敏捷而又功能強大&豐富著稱而得到許多用戶的好評<br />
<br />
==♡HTML&HTTP♡==<br />
*發有者及發明年代:於西元1993年,W3C&WHATWG開發<br />
*HTML:超文件標示語言（英語：HyperText Markup Language,簡稱：HTML）是一種用於建立網頁的標準標示語言,HTML是一種基礎技術常與CSS&JavaScript一起被眾多網站用於設計令人賞心悅目的網頁&網頁應用程式以及行動應用程式的使用者介面<br />
*HTTP:超文本傳輸協定（英文：HyperText Transfer Protocol,縮寫：HTTP）是一種用於分佈式&協作式和超媒體資訊系統的應用層協議,HTTP是全球資訊網的資料通訊的基礎<br />
*xml:可延伸標記式語言（英語：Extensible Markup Language,簡稱：XML）是一種標記式語言,標記指電腦所能理解的資訊符號,通過此種標記,電腦之間可以處理包含各種資訊的文章等<br />
*課後筆記:<br />
*#筆記網頁建設:登入後搜尋{資訊基礎應用/蕭卉均}→點一下，開始編輯→編輯完點儲存頁面<br />
*#色碼表:https://www.toodoo.com/db/color.html<br />
*通訊錄:<br />
*<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
<table class='nicetable'><br />
<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
</table><br />
<br />
==♡ wiki ♡==<br />
*何謂wiki:Wiki是一種在全球資訊網上開放且可供多人協同創作的超文字系統,由沃德·坎寧安於1995年首先開發,沃德·坎寧安將wiki定義為「一種允許一群用戶用簡單的描述來建立和連線一組網頁的社會計算系統」<br />
*CC授權:創用CC授權條款（英語：Creative Commons license,簡稱CC授權）是一種公共版權授權條款,其允許分發受版權保護的作品,一個創用CC授權用於一個作者想給他人分享&使用&甚至創作衍生作品的權利<br />
*wiki語法:http://jendo.synology.me/wiki1231/index.php?title=Wiki_%E5%85%A5%E9%96%80%E8%AA%9E%E6%B3%95<br />
*wiki的word適應:履歷表<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E5%B1%A5%E6%AD%B7%E8%A1%A8.html<br />
==♡CSS♡==<br />
*何謂CSS:層疊樣式表（英語：Cascading Style Sheets,簡寫CSS）又稱串樣式列表&級聯樣式表&串接樣式表&層疊樣式表&階層式樣式表,一種用來為結構化文件（如HTML文件或XML應用）添加樣式（字型、間距和顏色等）的電腦語言,由W3C定義和維護,目前最新版本是CSS2.1，為W3C的推薦標準,CSS3現在已被大部分現代瀏覽器支援,而下一版的CSS4仍在開發中<br />
*用法:限制者才有標章,不限制者沒有標章<br />
*重要語法:<br />
*#Attribution(BY):姓名標示,您（使用者）可以複製&發行&展覽&表演&放映&廣播或通過資訊網路傳播本作品；您必須按照作者或者授權人指定的方式對作品進行姓名標示<br />
*#NonCommercial(NC):非商業性使用,您可以自由複製&散布&展示及演出本作品；您不得為商業目的而使用本作品<br />
*#NoDerivs(ND):禁止改作,您可以自由複製&散布&展示及演出本作品；您不得改變&轉變或更改本作品<br />
*#ShareAlike(SA):相同方式分享,您可以自由複製&散布&展示及演出本作品；若您改變&轉變或更改本作品,僅在遵守與本作品相同的授權條款下,您才能散布由本作品產生的衍生作品<br />
<br />
==♡SVG♡==<br />
===1.♪概述♪===<br />
*何謂SVG:可縮放向量圖形（英語：Scalable Vector Graphics,SVG）是一種基於可延伸標記式語言（XML）,用於描述二維向量圖形的圖形格式,SVG由W3C制定,是一個開放標準<br />
*點陣圖與向量圖的比較(含附檔名):<br />
*#SVG:又為向量圖,特色,放大不毛邊,https://upload.wikimedia.org/wikipedia/commons/5/53/Skull_and_crossbones.svg<br />
*#JPG:又名JEPG,失真,壓縮,http://wportfolio.wzu.edu.tw/blog/attach/995/27995/89/bf_51402_8868906_99219_2yzUdJnLy0AsZ9VdwaKNCA.jpg<br />
*#PNG:不失真,公開格式,https://s-media-cache-ak0.pinimg.com/originals/96/94/ef/9694ef6ecfd562c83e7a445ee9ee19ba.png<br />
*#GIF:可動畫,256色,https://2.bp.blogspot.com/-Ra6UuzwDGQg/WDfdq3X1GjI/AAAAAAAD0gc/MfVErIwBENYRH_DvvFsnThfYp-zVxugEgCLcB/s1600/AS000946_02.gif<br />
*SVG格式具有以下優點:<br />
*#圖檔可讀,易於修改和編輯（理論上如此,但實際上卻是因為各種不同的SVG檔編輯器而可能儲存成不易解讀的SVG檔案）<br />
*#與現有技術可以互動融合,例如,SVG技術本身的動態部分（包括時序控制和動畫）就是基於SMIL標準,另外,SVG檔案還可嵌入JavaScript（嚴格地說，應該是ECMAScript）指令碼來控制SVG物件<br />
*#SVG圖形格式可以方便的建立文字索引,從而實現基於內容的圖像搜尋<br />
*#SVG圖形格式支援多種濾鏡和特殊效果,在不改變圖像內容的前提下可以實現點陣圖格式中類似文字陰影的效果<br />
*#SVG圖形格式可以用來動態生成圖形,例如,可用SVG動態生成具有互動功能的地圖,嵌入網頁中,並顯示給終端用戶<br />
*SVG格式具有以下缺點：<br />
*#如何和已經占有重要市場份額的向量圖形格式Adobe Animate競爭的問題,事實上,Adobe Animate在Flash CC 2014版及以後的版本就都支援直接匯出SVG檔案了<br />
*#SVG的本地執行環境下的廠家支援程度<br />
*#由於原始的SVG檔是遵從XML語法,導致資料採用未壓縮的方式存放,因此相較於其他的向量圖形格式,同樣的檔案內容會比其他的檔案格式稍大,Adobe因此使用gzip壓縮開發出壓縮的SVG檔格式,附檔名為 .svgz, 但此種檔案格式除了Adobe旗下的軟體以外,未被廣泛支援使用<br />
*#舊版的SVG Viewer無法正確顯示出使用新版SVG格式的向量圖形<br />
<br />
===2.♪基本架構♪===<br />
*基本架構:SVG允許3種圖形物件類型：向量圖形,柵格圖像以及文字,圖形物件——包括PNG&JPEG這些柵格圖像——能夠被編組&設計&轉換及整合進先前的彩現物件中,文字可以在任何適用於應用程式的XML命名空間之內,從而提高SVG圖形的搜尋能力和無障礙性,SVG提供的功能集涵蓋了巢狀轉換&裁剪路徑&Alpha通道&濾鏡效果&模板物件以及可延伸性,SVG嚴格遵從XML語法,並用文字格式的描述性語言來描述圖像內容,因此是一種和圖像解析度無關的向量圖形格式,SVG可以實現動態和互動功能,在DOM模型的基礎上,SVG開發設計人員可以利用ECMAScript或者SMIL來進行時序控制或物件的操縱,SVG雖然是文字格式,但是SVG支援利用gzip壓縮演算法減少檔案尺寸,壓縮後的檔案通常用被稱為「SVGZ檔案」<br />
*SVG主要支援以下幾種顯示物件：<br />
*#向量顯示物件,基本向量顯示物件包括矩形&圓&橢圓&多邊形&直線&任意曲線等<br />
*#嵌入式外部圖像,包括PNG&JPEG&SVG等<br />
*#文字物件<br />
*基本樣式:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/arrow.svg<br />
*基本圖形:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/bearFace.svg<br />
<br />
===3.♪文字♪===<br />
*TEXT<br />
*#在「text」標籤開始與結束之間夾字,可用中英文,而使用「屬性」來規定文字的表現,所有的屬性都可以改用樣式來表達<br />
*#可用中文字形：<br />
*##屬性dx和dy基於前一個字的位置去做變化：值可為'10,20,30,40'，字的距離一個比一個更遠<br />
*##屬性x和y標示字的起點：值可為'10,20,30,40'，表示每個字的x或y座標<br />
*##屬性fill控制填入字的顏色,預設黑色<br />
*##屬性stroke控制字描框的顏色,預設 none<br />
*##屬性rotate='30'順時鐘轉30°。rotate='30,60,90,120,150,180,210'指定每個字的轉動角度<br />
*##用style控制字體&字形&尺寸,但顏色是用fill不是用color <br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/text.svg<br />
<br />
===4.♪位移&旋轉&縮放&歪斜♪===<br />
*相關屬性說明：<br />
*#平移變換(translate)：transform="translate(x,y)",即新坐標系的原點在原坐標系的(x,y)處,坐標軸的方向不變<br />
*#旋轉變換(rotate)：transform="rotate(angle cx,cy)",angle代表旋轉角度,預設單位是「度」,順時針為正,逆時針為負,(cx,cy)是旋轉中心所在的坐標,若省略旋轉中心坐標,則預設值是(0,0)<br />
*#伸縮變換(scale)：transform="scale(sx,sy)",sx,sy分別代表x軸方向和y方向拉伸或縮小的比例因子,拉伸：大於1；縮小：小於1,若省略sy，即sy=sx，作等比例縮放<br />
*#歪斜變換(skew)：transform='skewX(x-angle)'或transform='skewY(y-angle)',x-angle,y-angle分別代表沿x軸和y軸歪斜的角度<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/transform.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/bearFace.svg<br />
<br />
===5.♪群組♪===<br />
*步驟:<br />
*#先添加svg標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，其中才有href屬性的定義<br />
*#在defs段落中定義圖形，並賦予id<br />
*#用<use xlink:href='#某id'/>來引用既有的定義<br />
<br />
===6.♪定義一次,引用多次♪===<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/uses.svg<br />
<br />
===7.♪漸層♪===<br />
*漸層和濾鏡如果取中文名稱,瀏覽器還認得,但Inkscape和線上轉檔軟體就會不認得<br />
*「漸層」工具可以在多種顏色之間建立漸層混合,您可以從預設漸層填色中選擇,或是建立自己的漸層填色<br />
*線性漸層沿著直線從起點到終點建立陰影<br />
*放射性漸層沿著圓形圖樣從起點到終點建立陰影<br />
*尖角漸層繞著起點以逆時針掃射的方式建立陰影<br />
*反射性漸層在起點的一側建立相同的鏡像線性漸層<br />
*菱形漸層從菱形圖樣的中央往外建立陰影<br />
====(1)☆線性漸層☆====<br />
*步驟：<br />
*#不用添加svg標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，不會用到href屬性<br />
*#在defs段落中定義漸層,並賦予id<br />
*#用fill='url(#某id)'屬性來引用既有的漸層定義<br />
*linearGradient 線性漸層定義語法說明:<br />
*#漸層標籤中的 100%，指的是整個圖形<br />
*#其中的 id 屬性定出漸層名稱<br />
*#由x1,y1,x2,y2四個屬性決定漸層範圍,以及水平,垂直或角形漸層,四個屬性都以百分比表示：<br />
*##x1,y1,x2,y2屬性決定漸層開始和結束位置,x1,x2以圖形的寬度為準,y1,y2以圖形的高度為準<br />
*##當y1和y2相等,而x1和x2不同時,可創建水平漸層<br />
*##當x1和x2相等,而y1和y2不同時,可創建垂直漸層<br />
*##當x1和x2不同,且y1和y2不同時,可創建角形漸層<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/h.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/v.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/arrow.svg<br />
<br />
====(2)☆放射漸層☆====<br />
*radialGradient 放設漸層定義語法說明:<br />
*#漸層範圍：由cx,cy,r三個屬性決定,三個屬性都以百分比表示,漸層範圍是一個圓或橢圓<br />
*##cx表示範圍中心在圖寬百分之幾的位置<br />
*##cy表示範圍中心在圖高百分之幾的位置<br />
*##r如果圖形寬&高相等則範圍為圓,r代表範圍圓半俓除以圖形寬或高；如果圖形寬&高不相等則範圍為橢圓,r代表範圍橢圓的長短軸半長除以圖形寬或高；注意：r為50%,範圍圓直徑恰等於圖的寬或高<br />
*#設色中心：由fx,fy兩個屬性決定的位置,就是設色為0%的地方,兩個屬性都以百分比表示<br />
*##fx表示設色中心在圖寬百分之幾的位置<br />
*##fy表示設色中心在圖高百分之幾的位置<br />
*##設色100%的地方在範圍圓或範圍橢圓的圓周上<br />
*#設色標籤stop,漸層標籤包住數個stop標籤,每種顏色通過一個stop標籤來規定<br />
*##offset屬性用來定義漸層的開始和結束位置,其100%是指整個漸層範圍<br />
*##stop-color屬性用來定義顏色,也可以做為style的樣式<br />
*##stop-opacity屬性決定透明度,也可以做為style的樣式<br />
*#以ball3.svg為例：漸層範圍為整個圓,因為cx,cy,r都是50% ,而設色中心在中間下方,因為fx='50%' fy='100%' ,此處是stop設為0%的顏色(白色),而範圍圓週邊是stop設為100%的顏色(黑色)<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball1.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball2.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball3.svg<br />
<br />
===8.♪柔焦濾鏡♪===<br />
*濾鏡標籤filter語法說明:<br />
*#其中的id屬性定出濾鏡名稱<br />
*#也可以設width,height,x,y去定濾鏡範圍和起點,如沒設以整個圖形為範圍<br />
*#高斯模糊濾鏡feGaussianBlur：濾鏡標籤包住數種不同效果的濾鏡,高斯模糊濾鏡是最簡單的濾鏡<br />
*#高斯模糊濾鏡主要只有一個參數：stdDeviation(標準差),用來控制模糊的程度,數字越大越模糊,數字為零則是圖片原本的狀態<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/sun.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/waterfall1.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/waterfall2.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/waterfall3.svg<br />
<br />
===九、♪path♪===<br />
===十、♪動畫♪===<br />
<br />
==♡Inkscape♡==<br />
<br />
==♡GIS♡==<br />
*何謂 GIS ？<br />
*兩種主要的 GIS 。<br />
*基本框架。<br />
*marks<br />
*overlays<br />
*google 我的地圖<br />
*結合我的地圖與 GIS<br />
<br />
==♡圖形計算機♡==<br />
*取得 svgdraw.php<br />
*基本框架<br />
*繪製基本圖形<br />
*函式繪圖<br />
*google 圖形計算機</div>
蕭卉均
http://well-being-ng.net/wiki1231/index.php?title=%E8%A8%8E%E8%AB%96:%E8%B3%87%E8%A8%8A%E5%9F%BA%E7%A4%8E%E6%87%89%E7%94%A8/%E8%95%AD%E5%8D%89%E5%9D%87&diff=37907
討論:資訊基礎應用/蕭卉均
2018-01-16T09:45:59Z
<p>蕭卉均：/* 八、♪柔焦濾鏡♪ */</p>
<hr />
<div>=ღ完整筆記ღ=<br />
==♡環境&工具♡==<br />
===1.♪環境♪===<br />
*伺服器與域名,伺服器DS216,網址6years.jendo.org<br />
*wifi,區網wifi：jendod&jendoa,密碼:jendo19690929<br />
*網站空間,瀏覽器：firefox,優先於chrome,盡量不用IE<br />
*wiki上的個人頁,filezilla→開啟filezilla,並新增一個站台叫♕DS216+(共用)♕→主機設定:6years.jendo.org→協定:SFTP→使用者:共用→字碼集:UTF-8→連線,然後到♕home/www♕→建自己帳號的連線→可用的文字編輯器,如emeditor→連結filezilla&慣用的文字編輯器：♕編輯/設定/檔案編輯♕，選用♕使用自訂編輯器♕&♕總是使用預設的編輯器♕，並指定編輯器的路徑<br />
*課後重點筆記:<br />
*#table是開始,/table是結束<br />
*#IP:IP4,最多表達到255字,IPV4一般網頁使用,IP6,物聯網用<br />
*#物聯網:簡單說一切事物,得失相兼<br />
*#域名:域名伺服器(HOSTS)<br />
*#AI(人工智慧)<br />
*#big5,早期,只有繁體中文<br />
*#UTF-8,萬國碼<br />
<br />
===2.♪工具與設定♪===<br />
*firefox:Mozilla Firefox（簡稱Firefox）,中文俗稱火狐（中國大陸官方有使用但未註冊為商標）,是一個自由及開放原始碼的網頁瀏覽器,由Mozilla基金會及其子公司Mozilla公司開發<br />
*filezilla:ileZilla是一種快速&可信賴的FTP用戶端以及伺服器端開放原始碼程式,具有多種特色&直覺的介面,FileZilla在2003年11月獲選為SourceForge.net當月最佳推薦專案<br />
*EmEditor:EmEditor是江村軟體公司（Emurasoft,坐落於美國華盛頓州）所開發的一款在Windows平台上運行的文字編輯程式,EmEditor以運作輕巧&敏捷而又功能強大&豐富著稱而得到許多用戶的好評<br />
<br />
==♡HTML&HTTP♡==<br />
*發有者及發明年代:於西元1993年,W3C&WHATWG開發<br />
*HTML:超文件標示語言（英語：HyperText Markup Language,簡稱：HTML）是一種用於建立網頁的標準標示語言,HTML是一種基礎技術常與CSS&JavaScript一起被眾多網站用於設計令人賞心悅目的網頁&網頁應用程式以及行動應用程式的使用者介面<br />
*HTTP:超文本傳輸協定（英文：HyperText Transfer Protocol,縮寫：HTTP）是一種用於分佈式&協作式和超媒體資訊系統的應用層協議,HTTP是全球資訊網的資料通訊的基礎<br />
*xml:可延伸標記式語言（英語：Extensible Markup Language,簡稱：XML）是一種標記式語言,標記指電腦所能理解的資訊符號,通過此種標記,電腦之間可以處理包含各種資訊的文章等<br />
*課後筆記:<br />
*#筆記網頁建設:登入後搜尋{資訊基礎應用/蕭卉均}→點一下，開始編輯→編輯完點儲存頁面<br />
*#色碼表:https://www.toodoo.com/db/color.html<br />
*通訊錄:<br />
*<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
<table class='nicetable'><br />
<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
</table><br />
<br />
==♡ wiki ♡==<br />
*何謂wiki:Wiki是一種在全球資訊網上開放且可供多人協同創作的超文字系統,由沃德·坎寧安於1995年首先開發,沃德·坎寧安將wiki定義為「一種允許一群用戶用簡單的描述來建立和連線一組網頁的社會計算系統」<br />
*CC授權:創用CC授權條款（英語：Creative Commons license,簡稱CC授權）是一種公共版權授權條款,其允許分發受版權保護的作品,一個創用CC授權用於一個作者想給他人分享&使用&甚至創作衍生作品的權利<br />
*wiki語法:http://jendo.synology.me/wiki1231/index.php?title=Wiki_%E5%85%A5%E9%96%80%E8%AA%9E%E6%B3%95<br />
*wiki的word適應:履歷表<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E5%B1%A5%E6%AD%B7%E8%A1%A8.html<br />
==♡CSS♡==<br />
*何謂CSS:層疊樣式表（英語：Cascading Style Sheets,簡寫CSS）又稱串樣式列表&級聯樣式表&串接樣式表&層疊樣式表&階層式樣式表,一種用來為結構化文件（如HTML文件或XML應用）添加樣式（字型、間距和顏色等）的電腦語言,由W3C定義和維護,目前最新版本是CSS2.1，為W3C的推薦標準,CSS3現在已被大部分現代瀏覽器支援,而下一版的CSS4仍在開發中<br />
*用法:限制者才有標章,不限制者沒有標章<br />
*重要語法:<br />
*#Attribution(BY):姓名標示,您（使用者）可以複製&發行&展覽&表演&放映&廣播或通過資訊網路傳播本作品；您必須按照作者或者授權人指定的方式對作品進行姓名標示<br />
*#NonCommercial(NC):非商業性使用,您可以自由複製&散布&展示及演出本作品；您不得為商業目的而使用本作品<br />
*#NoDerivs(ND):禁止改作,您可以自由複製&散布&展示及演出本作品；您不得改變&轉變或更改本作品<br />
*#ShareAlike(SA):相同方式分享,您可以自由複製&散布&展示及演出本作品；若您改變&轉變或更改本作品,僅在遵守與本作品相同的授權條款下,您才能散布由本作品產生的衍生作品<br />
<br />
==♡SVG♡==<br />
===1.♪概述♪===<br />
*何謂SVG:可縮放向量圖形（英語：Scalable Vector Graphics,SVG）是一種基於可延伸標記式語言（XML）,用於描述二維向量圖形的圖形格式,SVG由W3C制定,是一個開放標準<br />
*點陣圖與向量圖的比較(含附檔名):<br />
*#SVG:又為向量圖,特色,放大不毛邊,https://upload.wikimedia.org/wikipedia/commons/5/53/Skull_and_crossbones.svg<br />
*#JPG:又名JEPG,失真,壓縮,http://wportfolio.wzu.edu.tw/blog/attach/995/27995/89/bf_51402_8868906_99219_2yzUdJnLy0AsZ9VdwaKNCA.jpg<br />
*#PNG:不失真,公開格式,https://s-media-cache-ak0.pinimg.com/originals/96/94/ef/9694ef6ecfd562c83e7a445ee9ee19ba.png<br />
*#GIF:可動畫,256色,https://2.bp.blogspot.com/-Ra6UuzwDGQg/WDfdq3X1GjI/AAAAAAAD0gc/MfVErIwBENYRH_DvvFsnThfYp-zVxugEgCLcB/s1600/AS000946_02.gif<br />
*SVG格式具有以下優點:<br />
*#圖檔可讀,易於修改和編輯（理論上如此,但實際上卻是因為各種不同的SVG檔編輯器而可能儲存成不易解讀的SVG檔案）<br />
*#與現有技術可以互動融合,例如,SVG技術本身的動態部分（包括時序控制和動畫）就是基於SMIL標準,另外,SVG檔案還可嵌入JavaScript（嚴格地說，應該是ECMAScript）指令碼來控制SVG物件<br />
*#SVG圖形格式可以方便的建立文字索引,從而實現基於內容的圖像搜尋<br />
*#SVG圖形格式支援多種濾鏡和特殊效果,在不改變圖像內容的前提下可以實現點陣圖格式中類似文字陰影的效果<br />
*#SVG圖形格式可以用來動態生成圖形,例如,可用SVG動態生成具有互動功能的地圖,嵌入網頁中,並顯示給終端用戶<br />
*SVG格式具有以下缺點：<br />
*#如何和已經占有重要市場份額的向量圖形格式Adobe Animate競爭的問題,事實上,Adobe Animate在Flash CC 2014版及以後的版本就都支援直接匯出SVG檔案了<br />
*#SVG的本地執行環境下的廠家支援程度<br />
*#由於原始的SVG檔是遵從XML語法,導致資料採用未壓縮的方式存放,因此相較於其他的向量圖形格式,同樣的檔案內容會比其他的檔案格式稍大,Adobe因此使用gzip壓縮開發出壓縮的SVG檔格式,附檔名為 .svgz, 但此種檔案格式除了Adobe旗下的軟體以外,未被廣泛支援使用<br />
*#舊版的SVG Viewer無法正確顯示出使用新版SVG格式的向量圖形<br />
<br />
===2.♪基本架構♪===<br />
*基本架構:SVG允許3種圖形物件類型：向量圖形,柵格圖像以及文字,圖形物件——包括PNG&JPEG這些柵格圖像——能夠被編組&設計&轉換及整合進先前的彩現物件中,文字可以在任何適用於應用程式的XML命名空間之內,從而提高SVG圖形的搜尋能力和無障礙性,SVG提供的功能集涵蓋了巢狀轉換&裁剪路徑&Alpha通道&濾鏡效果&模板物件以及可延伸性,SVG嚴格遵從XML語法,並用文字格式的描述性語言來描述圖像內容,因此是一種和圖像解析度無關的向量圖形格式,SVG可以實現動態和互動功能,在DOM模型的基礎上,SVG開發設計人員可以利用ECMAScript或者SMIL來進行時序控制或物件的操縱,SVG雖然是文字格式,但是SVG支援利用gzip壓縮演算法減少檔案尺寸,壓縮後的檔案通常用被稱為「SVGZ檔案」<br />
*SVG主要支援以下幾種顯示物件：<br />
*#向量顯示物件,基本向量顯示物件包括矩形&圓&橢圓&多邊形&直線&任意曲線等<br />
*#嵌入式外部圖像,包括PNG&JPEG&SVG等<br />
*#文字物件<br />
*基本樣式:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/arrow.svg<br />
*基本圖形:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/bearFace.svg<br />
<br />
===3.♪文字♪===<br />
*TEXT<br />
*#在「text」標籤開始與結束之間夾字,可用中英文,而使用「屬性」來規定文字的表現,所有的屬性都可以改用樣式來表達<br />
*#可用中文字形：<br />
*##屬性dx和dy基於前一個字的位置去做變化：值可為'10,20,30,40'，字的距離一個比一個更遠<br />
*##屬性x和y標示字的起點：值可為'10,20,30,40'，表示每個字的x或y座標<br />
*##屬性fill控制填入字的顏色,預設黑色<br />
*##屬性stroke控制字描框的顏色,預設 none<br />
*##屬性rotate='30'順時鐘轉30°。rotate='30,60,90,120,150,180,210'指定每個字的轉動角度<br />
*##用style控制字體&字形&尺寸,但顏色是用fill不是用color <br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/text.svg<br />
<br />
===4.♪位移&旋轉&縮放&歪斜♪===<br />
*相關屬性說明：<br />
*#平移變換(translate)：transform="translate(x,y)",即新坐標系的原點在原坐標系的(x,y)處,坐標軸的方向不變<br />
*#旋轉變換(rotate)：transform="rotate(angle cx,cy)",angle代表旋轉角度,預設單位是「度」,順時針為正,逆時針為負,(cx,cy)是旋轉中心所在的坐標,若省略旋轉中心坐標,則預設值是(0,0)<br />
*#伸縮變換(scale)：transform="scale(sx,sy)",sx,sy分別代表x軸方向和y方向拉伸或縮小的比例因子,拉伸：大於1；縮小：小於1,若省略sy，即sy=sx，作等比例縮放<br />
*#歪斜變換(skew)：transform='skewX(x-angle)'或transform='skewY(y-angle)',x-angle,y-angle分別代表沿x軸和y軸歪斜的角度<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/transform.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/bearFace.svg<br />
<br />
===5.♪群組♪===<br />
*步驟:<br />
*#先添加svg標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，其中才有href屬性的定義<br />
*#在defs段落中定義圖形，並賦予id<br />
*#用<use xlink:href='#某id'/>來引用既有的定義<br />
<br />
===6.♪定義一次,引用多次♪===<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/uses.svg<br />
<br />
===7.♪漸層♪===<br />
*漸層和濾鏡如果取中文名稱,瀏覽器還認得,但Inkscape和線上轉檔軟體就會不認得<br />
*「漸層」工具可以在多種顏色之間建立漸層混合,您可以從預設漸層填色中選擇,或是建立自己的漸層填色<br />
*線性漸層沿著直線從起點到終點建立陰影<br />
*放射性漸層沿著圓形圖樣從起點到終點建立陰影<br />
*尖角漸層繞著起點以逆時針掃射的方式建立陰影<br />
*反射性漸層在起點的一側建立相同的鏡像線性漸層<br />
*菱形漸層從菱形圖樣的中央往外建立陰影<br />
====(1)☆線性漸層☆====<br />
*步驟：<br />
*#不用添加svg標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，不會用到href屬性<br />
*#在defs段落中定義漸層,並賦予id<br />
*#用fill='url(#某id)'屬性來引用既有的漸層定義<br />
*linearGradient 線性漸層定義語法說明:<br />
*#漸層標籤中的 100%，指的是整個圖形<br />
*#其中的 id 屬性定出漸層名稱<br />
*#由x1,y1,x2,y2四個屬性決定漸層範圍,以及水平,垂直或角形漸層,四個屬性都以百分比表示：<br />
*##x1,y1,x2,y2屬性決定漸層開始和結束位置,x1,x2以圖形的寬度為準,y1,y2以圖形的高度為準<br />
*##當y1和y2相等,而x1和x2不同時,可創建水平漸層<br />
*##當x1和x2相等,而y1和y2不同時,可創建垂直漸層<br />
*##當x1和x2不同,且y1和y2不同時,可創建角形漸層<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/h.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/v.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/arrow.svg<br />
<br />
====(2)☆放射漸層☆====<br />
*radialGradient 放設漸層定義語法說明:<br />
*#漸層範圍：由cx,cy,r三個屬性決定,三個屬性都以百分比表示,漸層範圍是一個圓或橢圓<br />
*##cx表示範圍中心在圖寬百分之幾的位置<br />
*##cy表示範圍中心在圖高百分之幾的位置<br />
*##r如果圖形寬&高相等則範圍為圓,r代表範圍圓半俓除以圖形寬或高；如果圖形寬&高不相等則範圍為橢圓,r代表範圍橢圓的長短軸半長除以圖形寬或高；注意：r為50%,範圍圓直徑恰等於圖的寬或高<br />
*#設色中心：由fx,fy兩個屬性決定的位置,就是設色為0%的地方,兩個屬性都以百分比表示<br />
*##fx表示設色中心在圖寬百分之幾的位置<br />
*##fy表示設色中心在圖高百分之幾的位置<br />
*##設色100%的地方在範圍圓或範圍橢圓的圓周上<br />
*#設色標籤stop,漸層標籤包住數個stop標籤,每種顏色通過一個stop標籤來規定<br />
*##offset屬性用來定義漸層的開始和結束位置,其100%是指整個漸層範圍<br />
*##stop-color屬性用來定義顏色,也可以做為style的樣式<br />
*##stop-opacity屬性決定透明度,也可以做為style的樣式<br />
*#以ball3.svg為例：漸層範圍為整個圓,因為cx,cy,r都是50% ,而設色中心在中間下方,因為fx='50%' fy='100%' ,此處是stop設為0%的顏色(白色),而範圍圓週邊是stop設為100%的顏色(黑色)<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball1.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball2.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball3.svg<br />
<br />
===八、♪柔焦濾鏡♪===<br />
*濾鏡標籤filter語法說明:<br />
*#其中的id屬性定出濾鏡名稱<br />
*#也可以設width,height,x,y去定濾鏡範圍和起點,如沒設以整個圖形為範圍<br />
*#高斯模糊濾鏡feGaussianBlur：濾鏡標籤包住數種不同效果的濾鏡,高斯模糊濾鏡是最簡單的濾鏡<br />
*#高斯模糊濾鏡主要只有一個參數：stdDeviation(標準差),用來控制模糊的程度,數字越大越模糊,數字為零則是圖片原本的狀態<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/sun.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/waterfall1.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/waterfall2.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/waterfall3.svg<br />
<br />
===九、♪path♪===<br />
===十、♪動畫♪===<br />
<br />
==♡Inkscape♡==<br />
<br />
==♡GIS♡==<br />
*何謂 GIS ？<br />
*兩種主要的 GIS 。<br />
*基本框架。<br />
*marks<br />
*overlays<br />
*google 我的地圖<br />
*結合我的地圖與 GIS<br />
<br />
==♡圖形計算機♡==<br />
*取得 svgdraw.php<br />
*基本框架<br />
*繪製基本圖形<br />
*函式繪圖<br />
*google 圖形計算機</div>
蕭卉均
http://well-being-ng.net/wiki1231/index.php?title=%E8%A8%8E%E8%AB%96:%E8%B3%87%E8%A8%8A%E5%9F%BA%E7%A4%8E%E6%87%89%E7%94%A8/%E8%95%AD%E5%8D%89%E5%9D%87&diff=37906
討論:資訊基礎應用/蕭卉均
2018-01-16T09:42:32Z
<p>蕭卉均：/* 八、♪柔焦濾鏡♪ */</p>
<hr />
<div>=ღ完整筆記ღ=<br />
==♡環境&工具♡==<br />
===1.♪環境♪===<br />
*伺服器與域名,伺服器DS216,網址6years.jendo.org<br />
*wifi,區網wifi：jendod&jendoa,密碼:jendo19690929<br />
*網站空間,瀏覽器：firefox,優先於chrome,盡量不用IE<br />
*wiki上的個人頁,filezilla→開啟filezilla,並新增一個站台叫♕DS216+(共用)♕→主機設定:6years.jendo.org→協定:SFTP→使用者:共用→字碼集:UTF-8→連線,然後到♕home/www♕→建自己帳號的連線→可用的文字編輯器,如emeditor→連結filezilla&慣用的文字編輯器：♕編輯/設定/檔案編輯♕，選用♕使用自訂編輯器♕&♕總是使用預設的編輯器♕，並指定編輯器的路徑<br />
*課後重點筆記:<br />
*#table是開始,/table是結束<br />
*#IP:IP4,最多表達到255字,IPV4一般網頁使用,IP6,物聯網用<br />
*#物聯網:簡單說一切事物,得失相兼<br />
*#域名:域名伺服器(HOSTS)<br />
*#AI(人工智慧)<br />
*#big5,早期,只有繁體中文<br />
*#UTF-8,萬國碼<br />
<br />
===2.♪工具與設定♪===<br />
*firefox:Mozilla Firefox（簡稱Firefox）,中文俗稱火狐（中國大陸官方有使用但未註冊為商標）,是一個自由及開放原始碼的網頁瀏覽器,由Mozilla基金會及其子公司Mozilla公司開發<br />
*filezilla:ileZilla是一種快速&可信賴的FTP用戶端以及伺服器端開放原始碼程式,具有多種特色&直覺的介面,FileZilla在2003年11月獲選為SourceForge.net當月最佳推薦專案<br />
*EmEditor:EmEditor是江村軟體公司（Emurasoft,坐落於美國華盛頓州）所開發的一款在Windows平台上運行的文字編輯程式,EmEditor以運作輕巧&敏捷而又功能強大&豐富著稱而得到許多用戶的好評<br />
<br />
==♡HTML&HTTP♡==<br />
*發有者及發明年代:於西元1993年,W3C&WHATWG開發<br />
*HTML:超文件標示語言（英語：HyperText Markup Language,簡稱：HTML）是一種用於建立網頁的標準標示語言,HTML是一種基礎技術常與CSS&JavaScript一起被眾多網站用於設計令人賞心悅目的網頁&網頁應用程式以及行動應用程式的使用者介面<br />
*HTTP:超文本傳輸協定（英文：HyperText Transfer Protocol,縮寫：HTTP）是一種用於分佈式&協作式和超媒體資訊系統的應用層協議,HTTP是全球資訊網的資料通訊的基礎<br />
*xml:可延伸標記式語言（英語：Extensible Markup Language,簡稱：XML）是一種標記式語言,標記指電腦所能理解的資訊符號,通過此種標記,電腦之間可以處理包含各種資訊的文章等<br />
*課後筆記:<br />
*#筆記網頁建設:登入後搜尋{資訊基礎應用/蕭卉均}→點一下，開始編輯→編輯完點儲存頁面<br />
*#色碼表:https://www.toodoo.com/db/color.html<br />
*通訊錄:<br />
*<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
<table class='nicetable'><br />
<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
</table><br />
<br />
==♡ wiki ♡==<br />
*何謂wiki:Wiki是一種在全球資訊網上開放且可供多人協同創作的超文字系統,由沃德·坎寧安於1995年首先開發,沃德·坎寧安將wiki定義為「一種允許一群用戶用簡單的描述來建立和連線一組網頁的社會計算系統」<br />
*CC授權:創用CC授權條款（英語：Creative Commons license,簡稱CC授權）是一種公共版權授權條款,其允許分發受版權保護的作品,一個創用CC授權用於一個作者想給他人分享&使用&甚至創作衍生作品的權利<br />
*wiki語法:http://jendo.synology.me/wiki1231/index.php?title=Wiki_%E5%85%A5%E9%96%80%E8%AA%9E%E6%B3%95<br />
*wiki的word適應:履歷表<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E5%B1%A5%E6%AD%B7%E8%A1%A8.html<br />
==♡CSS♡==<br />
*何謂CSS:層疊樣式表（英語：Cascading Style Sheets,簡寫CSS）又稱串樣式列表&級聯樣式表&串接樣式表&層疊樣式表&階層式樣式表,一種用來為結構化文件（如HTML文件或XML應用）添加樣式（字型、間距和顏色等）的電腦語言,由W3C定義和維護,目前最新版本是CSS2.1，為W3C的推薦標準,CSS3現在已被大部分現代瀏覽器支援,而下一版的CSS4仍在開發中<br />
*用法:限制者才有標章,不限制者沒有標章<br />
*重要語法:<br />
*#Attribution(BY):姓名標示,您（使用者）可以複製&發行&展覽&表演&放映&廣播或通過資訊網路傳播本作品；您必須按照作者或者授權人指定的方式對作品進行姓名標示<br />
*#NonCommercial(NC):非商業性使用,您可以自由複製&散布&展示及演出本作品；您不得為商業目的而使用本作品<br />
*#NoDerivs(ND):禁止改作,您可以自由複製&散布&展示及演出本作品；您不得改變&轉變或更改本作品<br />
*#ShareAlike(SA):相同方式分享,您可以自由複製&散布&展示及演出本作品；若您改變&轉變或更改本作品,僅在遵守與本作品相同的授權條款下,您才能散布由本作品產生的衍生作品<br />
<br />
==♡SVG♡==<br />
===1.♪概述♪===<br />
*何謂SVG:可縮放向量圖形（英語：Scalable Vector Graphics,SVG）是一種基於可延伸標記式語言（XML）,用於描述二維向量圖形的圖形格式,SVG由W3C制定,是一個開放標準<br />
*點陣圖與向量圖的比較(含附檔名):<br />
*#SVG:又為向量圖,特色,放大不毛邊,https://upload.wikimedia.org/wikipedia/commons/5/53/Skull_and_crossbones.svg<br />
*#JPG:又名JEPG,失真,壓縮,http://wportfolio.wzu.edu.tw/blog/attach/995/27995/89/bf_51402_8868906_99219_2yzUdJnLy0AsZ9VdwaKNCA.jpg<br />
*#PNG:不失真,公開格式,https://s-media-cache-ak0.pinimg.com/originals/96/94/ef/9694ef6ecfd562c83e7a445ee9ee19ba.png<br />
*#GIF:可動畫,256色,https://2.bp.blogspot.com/-Ra6UuzwDGQg/WDfdq3X1GjI/AAAAAAAD0gc/MfVErIwBENYRH_DvvFsnThfYp-zVxugEgCLcB/s1600/AS000946_02.gif<br />
*SVG格式具有以下優點:<br />
*#圖檔可讀,易於修改和編輯（理論上如此,但實際上卻是因為各種不同的SVG檔編輯器而可能儲存成不易解讀的SVG檔案）<br />
*#與現有技術可以互動融合,例如,SVG技術本身的動態部分（包括時序控制和動畫）就是基於SMIL標準,另外,SVG檔案還可嵌入JavaScript（嚴格地說，應該是ECMAScript）指令碼來控制SVG物件<br />
*#SVG圖形格式可以方便的建立文字索引,從而實現基於內容的圖像搜尋<br />
*#SVG圖形格式支援多種濾鏡和特殊效果,在不改變圖像內容的前提下可以實現點陣圖格式中類似文字陰影的效果<br />
*#SVG圖形格式可以用來動態生成圖形,例如,可用SVG動態生成具有互動功能的地圖,嵌入網頁中,並顯示給終端用戶<br />
*SVG格式具有以下缺點：<br />
*#如何和已經占有重要市場份額的向量圖形格式Adobe Animate競爭的問題,事實上,Adobe Animate在Flash CC 2014版及以後的版本就都支援直接匯出SVG檔案了<br />
*#SVG的本地執行環境下的廠家支援程度<br />
*#由於原始的SVG檔是遵從XML語法,導致資料採用未壓縮的方式存放,因此相較於其他的向量圖形格式,同樣的檔案內容會比其他的檔案格式稍大,Adobe因此使用gzip壓縮開發出壓縮的SVG檔格式,附檔名為 .svgz, 但此種檔案格式除了Adobe旗下的軟體以外,未被廣泛支援使用<br />
*#舊版的SVG Viewer無法正確顯示出使用新版SVG格式的向量圖形<br />
<br />
===2.♪基本架構♪===<br />
*基本架構:SVG允許3種圖形物件類型：向量圖形,柵格圖像以及文字,圖形物件——包括PNG&JPEG這些柵格圖像——能夠被編組&設計&轉換及整合進先前的彩現物件中,文字可以在任何適用於應用程式的XML命名空間之內,從而提高SVG圖形的搜尋能力和無障礙性,SVG提供的功能集涵蓋了巢狀轉換&裁剪路徑&Alpha通道&濾鏡效果&模板物件以及可延伸性,SVG嚴格遵從XML語法,並用文字格式的描述性語言來描述圖像內容,因此是一種和圖像解析度無關的向量圖形格式,SVG可以實現動態和互動功能,在DOM模型的基礎上,SVG開發設計人員可以利用ECMAScript或者SMIL來進行時序控制或物件的操縱,SVG雖然是文字格式,但是SVG支援利用gzip壓縮演算法減少檔案尺寸,壓縮後的檔案通常用被稱為「SVGZ檔案」<br />
*SVG主要支援以下幾種顯示物件：<br />
*#向量顯示物件,基本向量顯示物件包括矩形&圓&橢圓&多邊形&直線&任意曲線等<br />
*#嵌入式外部圖像,包括PNG&JPEG&SVG等<br />
*#文字物件<br />
*基本樣式:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/arrow.svg<br />
*基本圖形:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/bearFace.svg<br />
<br />
===3.♪文字♪===<br />
*TEXT<br />
*#在「text」標籤開始與結束之間夾字,可用中英文,而使用「屬性」來規定文字的表現,所有的屬性都可以改用樣式來表達<br />
*#可用中文字形：<br />
*##屬性dx和dy基於前一個字的位置去做變化：值可為'10,20,30,40'，字的距離一個比一個更遠<br />
*##屬性x和y標示字的起點：值可為'10,20,30,40'，表示每個字的x或y座標<br />
*##屬性fill控制填入字的顏色,預設黑色<br />
*##屬性stroke控制字描框的顏色,預設 none<br />
*##屬性rotate='30'順時鐘轉30°。rotate='30,60,90,120,150,180,210'指定每個字的轉動角度<br />
*##用style控制字體&字形&尺寸,但顏色是用fill不是用color <br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/text.svg<br />
<br />
===4.♪位移&旋轉&縮放&歪斜♪===<br />
*相關屬性說明：<br />
*#平移變換(translate)：transform="translate(x,y)",即新坐標系的原點在原坐標系的(x,y)處,坐標軸的方向不變<br />
*#旋轉變換(rotate)：transform="rotate(angle cx,cy)",angle代表旋轉角度,預設單位是「度」,順時針為正,逆時針為負,(cx,cy)是旋轉中心所在的坐標,若省略旋轉中心坐標,則預設值是(0,0)<br />
*#伸縮變換(scale)：transform="scale(sx,sy)",sx,sy分別代表x軸方向和y方向拉伸或縮小的比例因子,拉伸：大於1；縮小：小於1,若省略sy，即sy=sx，作等比例縮放<br />
*#歪斜變換(skew)：transform='skewX(x-angle)'或transform='skewY(y-angle)',x-angle,y-angle分別代表沿x軸和y軸歪斜的角度<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/transform.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/bearFace.svg<br />
<br />
===5.♪群組♪===<br />
*步驟:<br />
*#先添加svg標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，其中才有href屬性的定義<br />
*#在defs段落中定義圖形，並賦予id<br />
*#用<use xlink:href='#某id'/>來引用既有的定義<br />
<br />
===6.♪定義一次,引用多次♪===<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/uses.svg<br />
<br />
===7.♪漸層♪===<br />
*漸層和濾鏡如果取中文名稱,瀏覽器還認得,但Inkscape和線上轉檔軟體就會不認得<br />
*「漸層」工具可以在多種顏色之間建立漸層混合,您可以從預設漸層填色中選擇,或是建立自己的漸層填色<br />
*線性漸層沿著直線從起點到終點建立陰影<br />
*放射性漸層沿著圓形圖樣從起點到終點建立陰影<br />
*尖角漸層繞著起點以逆時針掃射的方式建立陰影<br />
*反射性漸層在起點的一側建立相同的鏡像線性漸層<br />
*菱形漸層從菱形圖樣的中央往外建立陰影<br />
====(1)☆線性漸層☆====<br />
*步驟：<br />
*#不用添加svg標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，不會用到href屬性<br />
*#在defs段落中定義漸層,並賦予id<br />
*#用fill='url(#某id)'屬性來引用既有的漸層定義<br />
*linearGradient 線性漸層定義語法說明:<br />
*#漸層標籤中的 100%，指的是整個圖形<br />
*#其中的 id 屬性定出漸層名稱<br />
*#由x1,y1,x2,y2四個屬性決定漸層範圍,以及水平,垂直或角形漸層,四個屬性都以百分比表示：<br />
*##x1,y1,x2,y2屬性決定漸層開始和結束位置,x1,x2以圖形的寬度為準,y1,y2以圖形的高度為準<br />
*##當y1和y2相等,而x1和x2不同時,可創建水平漸層<br />
*##當x1和x2相等,而y1和y2不同時,可創建垂直漸層<br />
*##當x1和x2不同,且y1和y2不同時,可創建角形漸層<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/h.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/v.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/arrow.svg<br />
<br />
====(2)☆放射漸層☆====<br />
*radialGradient 放設漸層定義語法說明:<br />
*#漸層範圍：由cx,cy,r三個屬性決定,三個屬性都以百分比表示,漸層範圍是一個圓或橢圓<br />
*##cx表示範圍中心在圖寬百分之幾的位置<br />
*##cy表示範圍中心在圖高百分之幾的位置<br />
*##r如果圖形寬&高相等則範圍為圓,r代表範圍圓半俓除以圖形寬或高；如果圖形寬&高不相等則範圍為橢圓,r代表範圍橢圓的長短軸半長除以圖形寬或高；注意：r為50%,範圍圓直徑恰等於圖的寬或高<br />
*#設色中心：由fx,fy兩個屬性決定的位置,就是設色為0%的地方,兩個屬性都以百分比表示<br />
*##fx表示設色中心在圖寬百分之幾的位置<br />
*##fy表示設色中心在圖高百分之幾的位置<br />
*##設色100%的地方在範圍圓或範圍橢圓的圓周上<br />
*#設色標籤stop,漸層標籤包住數個stop標籤,每種顏色通過一個stop標籤來規定<br />
*##offset屬性用來定義漸層的開始和結束位置,其100%是指整個漸層範圍<br />
*##stop-color屬性用來定義顏色,也可以做為style的樣式<br />
*##stop-opacity屬性決定透明度,也可以做為style的樣式<br />
*#以ball3.svg為例：漸層範圍為整個圓,因為cx,cy,r都是50% ,而設色中心在中間下方,因為fx='50%' fy='100%' ,此處是stop設為0%的顏色(白色),而範圍圓週邊是stop設為100%的顏色(黑色)<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball1.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball2.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball3.svg<br />
<br />
===八、♪柔焦濾鏡♪===<br />
*濾鏡標籤filter語法說明:<br />
*#其中的id屬性定出濾鏡名稱<br />
*#也可以設width,height,x,y去定濾鏡範圍和起點,如沒設以整個圖形為範圍<br />
<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/sun.svg<br />
<br />
===九、♪path♪===<br />
===十、♪動畫♪===<br />
<br />
==♡Inkscape♡==<br />
<br />
==♡GIS♡==<br />
*何謂 GIS ？<br />
*兩種主要的 GIS 。<br />
*基本框架。<br />
*marks<br />
*overlays<br />
*google 我的地圖<br />
*結合我的地圖與 GIS<br />
<br />
==♡圖形計算機♡==<br />
*取得 svgdraw.php<br />
*基本框架<br />
*繪製基本圖形<br />
*函式繪圖<br />
*google 圖形計算機</div>
蕭卉均
http://well-being-ng.net/wiki1231/index.php?title=%E8%A8%8E%E8%AB%96:%E8%B3%87%E8%A8%8A%E5%9F%BA%E7%A4%8E%E6%87%89%E7%94%A8/%E8%95%AD%E5%8D%89%E5%9D%87&diff=37905
討論:資訊基礎應用/蕭卉均
2018-01-16T09:40:53Z
<p>蕭卉均：/* (2)☆放射漸層☆ */</p>
<hr />
<div>=ღ完整筆記ღ=<br />
==♡環境&工具♡==<br />
===1.♪環境♪===<br />
*伺服器與域名,伺服器DS216,網址6years.jendo.org<br />
*wifi,區網wifi：jendod&jendoa,密碼:jendo19690929<br />
*網站空間,瀏覽器：firefox,優先於chrome,盡量不用IE<br />
*wiki上的個人頁,filezilla→開啟filezilla,並新增一個站台叫♕DS216+(共用)♕→主機設定:6years.jendo.org→協定:SFTP→使用者:共用→字碼集:UTF-8→連線,然後到♕home/www♕→建自己帳號的連線→可用的文字編輯器,如emeditor→連結filezilla&慣用的文字編輯器：♕編輯/設定/檔案編輯♕，選用♕使用自訂編輯器♕&♕總是使用預設的編輯器♕，並指定編輯器的路徑<br />
*課後重點筆記:<br />
*#table是開始,/table是結束<br />
*#IP:IP4,最多表達到255字,IPV4一般網頁使用,IP6,物聯網用<br />
*#物聯網:簡單說一切事物,得失相兼<br />
*#域名:域名伺服器(HOSTS)<br />
*#AI(人工智慧)<br />
*#big5,早期,只有繁體中文<br />
*#UTF-8,萬國碼<br />
<br />
===2.♪工具與設定♪===<br />
*firefox:Mozilla Firefox（簡稱Firefox）,中文俗稱火狐（中國大陸官方有使用但未註冊為商標）,是一個自由及開放原始碼的網頁瀏覽器,由Mozilla基金會及其子公司Mozilla公司開發<br />
*filezilla:ileZilla是一種快速&可信賴的FTP用戶端以及伺服器端開放原始碼程式,具有多種特色&直覺的介面,FileZilla在2003年11月獲選為SourceForge.net當月最佳推薦專案<br />
*EmEditor:EmEditor是江村軟體公司（Emurasoft,坐落於美國華盛頓州）所開發的一款在Windows平台上運行的文字編輯程式,EmEditor以運作輕巧&敏捷而又功能強大&豐富著稱而得到許多用戶的好評<br />
<br />
==♡HTML&HTTP♡==<br />
*發有者及發明年代:於西元1993年,W3C&WHATWG開發<br />
*HTML:超文件標示語言（英語：HyperText Markup Language,簡稱：HTML）是一種用於建立網頁的標準標示語言,HTML是一種基礎技術常與CSS&JavaScript一起被眾多網站用於設計令人賞心悅目的網頁&網頁應用程式以及行動應用程式的使用者介面<br />
*HTTP:超文本傳輸協定（英文：HyperText Transfer Protocol,縮寫：HTTP）是一種用於分佈式&協作式和超媒體資訊系統的應用層協議,HTTP是全球資訊網的資料通訊的基礎<br />
*xml:可延伸標記式語言（英語：Extensible Markup Language,簡稱：XML）是一種標記式語言,標記指電腦所能理解的資訊符號,通過此種標記,電腦之間可以處理包含各種資訊的文章等<br />
*課後筆記:<br />
*#筆記網頁建設:登入後搜尋{資訊基礎應用/蕭卉均}→點一下，開始編輯→編輯完點儲存頁面<br />
*#色碼表:https://www.toodoo.com/db/color.html<br />
*通訊錄:<br />
*<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
<table class='nicetable'><br />
<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
</table><br />
<br />
==♡ wiki ♡==<br />
*何謂wiki:Wiki是一種在全球資訊網上開放且可供多人協同創作的超文字系統,由沃德·坎寧安於1995年首先開發,沃德·坎寧安將wiki定義為「一種允許一群用戶用簡單的描述來建立和連線一組網頁的社會計算系統」<br />
*CC授權:創用CC授權條款（英語：Creative Commons license,簡稱CC授權）是一種公共版權授權條款,其允許分發受版權保護的作品,一個創用CC授權用於一個作者想給他人分享&使用&甚至創作衍生作品的權利<br />
*wiki語法:http://jendo.synology.me/wiki1231/index.php?title=Wiki_%E5%85%A5%E9%96%80%E8%AA%9E%E6%B3%95<br />
*wiki的word適應:履歷表<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E5%B1%A5%E6%AD%B7%E8%A1%A8.html<br />
==♡CSS♡==<br />
*何謂CSS:層疊樣式表（英語：Cascading Style Sheets,簡寫CSS）又稱串樣式列表&級聯樣式表&串接樣式表&層疊樣式表&階層式樣式表,一種用來為結構化文件（如HTML文件或XML應用）添加樣式（字型、間距和顏色等）的電腦語言,由W3C定義和維護,目前最新版本是CSS2.1，為W3C的推薦標準,CSS3現在已被大部分現代瀏覽器支援,而下一版的CSS4仍在開發中<br />
*用法:限制者才有標章,不限制者沒有標章<br />
*重要語法:<br />
*#Attribution(BY):姓名標示,您（使用者）可以複製&發行&展覽&表演&放映&廣播或通過資訊網路傳播本作品；您必須按照作者或者授權人指定的方式對作品進行姓名標示<br />
*#NonCommercial(NC):非商業性使用,您可以自由複製&散布&展示及演出本作品；您不得為商業目的而使用本作品<br />
*#NoDerivs(ND):禁止改作,您可以自由複製&散布&展示及演出本作品；您不得改變&轉變或更改本作品<br />
*#ShareAlike(SA):相同方式分享,您可以自由複製&散布&展示及演出本作品；若您改變&轉變或更改本作品,僅在遵守與本作品相同的授權條款下,您才能散布由本作品產生的衍生作品<br />
<br />
==♡SVG♡==<br />
===1.♪概述♪===<br />
*何謂SVG:可縮放向量圖形（英語：Scalable Vector Graphics,SVG）是一種基於可延伸標記式語言（XML）,用於描述二維向量圖形的圖形格式,SVG由W3C制定,是一個開放標準<br />
*點陣圖與向量圖的比較(含附檔名):<br />
*#SVG:又為向量圖,特色,放大不毛邊,https://upload.wikimedia.org/wikipedia/commons/5/53/Skull_and_crossbones.svg<br />
*#JPG:又名JEPG,失真,壓縮,http://wportfolio.wzu.edu.tw/blog/attach/995/27995/89/bf_51402_8868906_99219_2yzUdJnLy0AsZ9VdwaKNCA.jpg<br />
*#PNG:不失真,公開格式,https://s-media-cache-ak0.pinimg.com/originals/96/94/ef/9694ef6ecfd562c83e7a445ee9ee19ba.png<br />
*#GIF:可動畫,256色,https://2.bp.blogspot.com/-Ra6UuzwDGQg/WDfdq3X1GjI/AAAAAAAD0gc/MfVErIwBENYRH_DvvFsnThfYp-zVxugEgCLcB/s1600/AS000946_02.gif<br />
*SVG格式具有以下優點:<br />
*#圖檔可讀,易於修改和編輯（理論上如此,但實際上卻是因為各種不同的SVG檔編輯器而可能儲存成不易解讀的SVG檔案）<br />
*#與現有技術可以互動融合,例如,SVG技術本身的動態部分（包括時序控制和動畫）就是基於SMIL標準,另外,SVG檔案還可嵌入JavaScript（嚴格地說，應該是ECMAScript）指令碼來控制SVG物件<br />
*#SVG圖形格式可以方便的建立文字索引,從而實現基於內容的圖像搜尋<br />
*#SVG圖形格式支援多種濾鏡和特殊效果,在不改變圖像內容的前提下可以實現點陣圖格式中類似文字陰影的效果<br />
*#SVG圖形格式可以用來動態生成圖形,例如,可用SVG動態生成具有互動功能的地圖,嵌入網頁中,並顯示給終端用戶<br />
*SVG格式具有以下缺點：<br />
*#如何和已經占有重要市場份額的向量圖形格式Adobe Animate競爭的問題,事實上,Adobe Animate在Flash CC 2014版及以後的版本就都支援直接匯出SVG檔案了<br />
*#SVG的本地執行環境下的廠家支援程度<br />
*#由於原始的SVG檔是遵從XML語法,導致資料採用未壓縮的方式存放,因此相較於其他的向量圖形格式,同樣的檔案內容會比其他的檔案格式稍大,Adobe因此使用gzip壓縮開發出壓縮的SVG檔格式,附檔名為 .svgz, 但此種檔案格式除了Adobe旗下的軟體以外,未被廣泛支援使用<br />
*#舊版的SVG Viewer無法正確顯示出使用新版SVG格式的向量圖形<br />
<br />
===2.♪基本架構♪===<br />
*基本架構:SVG允許3種圖形物件類型：向量圖形,柵格圖像以及文字,圖形物件——包括PNG&JPEG這些柵格圖像——能夠被編組&設計&轉換及整合進先前的彩現物件中,文字可以在任何適用於應用程式的XML命名空間之內,從而提高SVG圖形的搜尋能力和無障礙性,SVG提供的功能集涵蓋了巢狀轉換&裁剪路徑&Alpha通道&濾鏡效果&模板物件以及可延伸性,SVG嚴格遵從XML語法,並用文字格式的描述性語言來描述圖像內容,因此是一種和圖像解析度無關的向量圖形格式,SVG可以實現動態和互動功能,在DOM模型的基礎上,SVG開發設計人員可以利用ECMAScript或者SMIL來進行時序控制或物件的操縱,SVG雖然是文字格式,但是SVG支援利用gzip壓縮演算法減少檔案尺寸,壓縮後的檔案通常用被稱為「SVGZ檔案」<br />
*SVG主要支援以下幾種顯示物件：<br />
*#向量顯示物件,基本向量顯示物件包括矩形&圓&橢圓&多邊形&直線&任意曲線等<br />
*#嵌入式外部圖像,包括PNG&JPEG&SVG等<br />
*#文字物件<br />
*基本樣式:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/arrow.svg<br />
*基本圖形:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/bearFace.svg<br />
<br />
===3.♪文字♪===<br />
*TEXT<br />
*#在「text」標籤開始與結束之間夾字,可用中英文,而使用「屬性」來規定文字的表現,所有的屬性都可以改用樣式來表達<br />
*#可用中文字形：<br />
*##屬性dx和dy基於前一個字的位置去做變化：值可為'10,20,30,40'，字的距離一個比一個更遠<br />
*##屬性x和y標示字的起點：值可為'10,20,30,40'，表示每個字的x或y座標<br />
*##屬性fill控制填入字的顏色,預設黑色<br />
*##屬性stroke控制字描框的顏色,預設 none<br />
*##屬性rotate='30'順時鐘轉30°。rotate='30,60,90,120,150,180,210'指定每個字的轉動角度<br />
*##用style控制字體&字形&尺寸,但顏色是用fill不是用color <br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/text.svg<br />
<br />
===4.♪位移&旋轉&縮放&歪斜♪===<br />
*相關屬性說明：<br />
*#平移變換(translate)：transform="translate(x,y)",即新坐標系的原點在原坐標系的(x,y)處,坐標軸的方向不變<br />
*#旋轉變換(rotate)：transform="rotate(angle cx,cy)",angle代表旋轉角度,預設單位是「度」,順時針為正,逆時針為負,(cx,cy)是旋轉中心所在的坐標,若省略旋轉中心坐標,則預設值是(0,0)<br />
*#伸縮變換(scale)：transform="scale(sx,sy)",sx,sy分別代表x軸方向和y方向拉伸或縮小的比例因子,拉伸：大於1；縮小：小於1,若省略sy，即sy=sx，作等比例縮放<br />
*#歪斜變換(skew)：transform='skewX(x-angle)'或transform='skewY(y-angle)',x-angle,y-angle分別代表沿x軸和y軸歪斜的角度<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/transform.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/bearFace.svg<br />
<br />
===5.♪群組♪===<br />
*步驟:<br />
*#先添加svg標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，其中才有href屬性的定義<br />
*#在defs段落中定義圖形，並賦予id<br />
*#用<use xlink:href='#某id'/>來引用既有的定義<br />
<br />
===6.♪定義一次,引用多次♪===<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/uses.svg<br />
<br />
===7.♪漸層♪===<br />
*漸層和濾鏡如果取中文名稱,瀏覽器還認得,但Inkscape和線上轉檔軟體就會不認得<br />
*「漸層」工具可以在多種顏色之間建立漸層混合,您可以從預設漸層填色中選擇,或是建立自己的漸層填色<br />
*線性漸層沿著直線從起點到終點建立陰影<br />
*放射性漸層沿著圓形圖樣從起點到終點建立陰影<br />
*尖角漸層繞著起點以逆時針掃射的方式建立陰影<br />
*反射性漸層在起點的一側建立相同的鏡像線性漸層<br />
*菱形漸層從菱形圖樣的中央往外建立陰影<br />
====(1)☆線性漸層☆====<br />
*步驟：<br />
*#不用添加svg標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，不會用到href屬性<br />
*#在defs段落中定義漸層,並賦予id<br />
*#用fill='url(#某id)'屬性來引用既有的漸層定義<br />
*linearGradient 線性漸層定義語法說明:<br />
*#漸層標籤中的 100%，指的是整個圖形<br />
*#其中的 id 屬性定出漸層名稱<br />
*#由x1,y1,x2,y2四個屬性決定漸層範圍,以及水平,垂直或角形漸層,四個屬性都以百分比表示：<br />
*##x1,y1,x2,y2屬性決定漸層開始和結束位置,x1,x2以圖形的寬度為準,y1,y2以圖形的高度為準<br />
*##當y1和y2相等,而x1和x2不同時,可創建水平漸層<br />
*##當x1和x2相等,而y1和y2不同時,可創建垂直漸層<br />
*##當x1和x2不同,且y1和y2不同時,可創建角形漸層<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/h.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/v.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/arrow.svg<br />
<br />
====(2)☆放射漸層☆====<br />
*radialGradient 放設漸層定義語法說明:<br />
*#漸層範圍：由cx,cy,r三個屬性決定,三個屬性都以百分比表示,漸層範圍是一個圓或橢圓<br />
*##cx表示範圍中心在圖寬百分之幾的位置<br />
*##cy表示範圍中心在圖高百分之幾的位置<br />
*##r如果圖形寬&高相等則範圍為圓,r代表範圍圓半俓除以圖形寬或高；如果圖形寬&高不相等則範圍為橢圓,r代表範圍橢圓的長短軸半長除以圖形寬或高；注意：r為50%,範圍圓直徑恰等於圖的寬或高<br />
*#設色中心：由fx,fy兩個屬性決定的位置,就是設色為0%的地方,兩個屬性都以百分比表示<br />
*##fx表示設色中心在圖寬百分之幾的位置<br />
*##fy表示設色中心在圖高百分之幾的位置<br />
*##設色100%的地方在範圍圓或範圍橢圓的圓周上<br />
*#設色標籤stop,漸層標籤包住數個stop標籤,每種顏色通過一個stop標籤來規定<br />
*##offset屬性用來定義漸層的開始和結束位置,其100%是指整個漸層範圍<br />
*##stop-color屬性用來定義顏色,也可以做為style的樣式<br />
*##stop-opacity屬性決定透明度,也可以做為style的樣式<br />
*#以ball3.svg為例：漸層範圍為整個圓,因為cx,cy,r都是50% ,而設色中心在中間下方,因為fx='50%' fy='100%' ,此處是stop設為0%的顏色(白色),而範圍圓週邊是stop設為100%的顏色(黑色)<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball1.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball2.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball3.svg<br />
<br />
===八、♪柔焦濾鏡♪===<br />
===九、♪path♪===<br />
===十、♪動畫♪===<br />
<br />
==♡Inkscape♡==<br />
<br />
==♡GIS♡==<br />
*何謂 GIS ？<br />
*兩種主要的 GIS 。<br />
*基本框架。<br />
*marks<br />
*overlays<br />
*google 我的地圖<br />
*結合我的地圖與 GIS<br />
<br />
==♡圖形計算機♡==<br />
*取得 svgdraw.php<br />
*基本框架<br />
*繪製基本圖形<br />
*函式繪圖<br />
*google 圖形計算機</div>
蕭卉均
http://well-being-ng.net/wiki1231/index.php?title=%E8%A8%8E%E8%AB%96:%E8%B3%87%E8%A8%8A%E5%9F%BA%E7%A4%8E%E6%87%89%E7%94%A8/%E8%95%AD%E5%8D%89%E5%9D%87&diff=37904
討論:資訊基礎應用/蕭卉均
2018-01-16T09:39:05Z
<p>蕭卉均：/* (2)☆放射漸層☆ */</p>
<hr />
<div>=ღ完整筆記ღ=<br />
==♡環境&工具♡==<br />
===1.♪環境♪===<br />
*伺服器與域名,伺服器DS216,網址6years.jendo.org<br />
*wifi,區網wifi：jendod&jendoa,密碼:jendo19690929<br />
*網站空間,瀏覽器：firefox,優先於chrome,盡量不用IE<br />
*wiki上的個人頁,filezilla→開啟filezilla,並新增一個站台叫♕DS216+(共用)♕→主機設定:6years.jendo.org→協定:SFTP→使用者:共用→字碼集:UTF-8→連線,然後到♕home/www♕→建自己帳號的連線→可用的文字編輯器,如emeditor→連結filezilla&慣用的文字編輯器：♕編輯/設定/檔案編輯♕，選用♕使用自訂編輯器♕&♕總是使用預設的編輯器♕，並指定編輯器的路徑<br />
*課後重點筆記:<br />
*#table是開始,/table是結束<br />
*#IP:IP4,最多表達到255字,IPV4一般網頁使用,IP6,物聯網用<br />
*#物聯網:簡單說一切事物,得失相兼<br />
*#域名:域名伺服器(HOSTS)<br />
*#AI(人工智慧)<br />
*#big5,早期,只有繁體中文<br />
*#UTF-8,萬國碼<br />
<br />
===2.♪工具與設定♪===<br />
*firefox:Mozilla Firefox（簡稱Firefox）,中文俗稱火狐（中國大陸官方有使用但未註冊為商標）,是一個自由及開放原始碼的網頁瀏覽器,由Mozilla基金會及其子公司Mozilla公司開發<br />
*filezilla:ileZilla是一種快速&可信賴的FTP用戶端以及伺服器端開放原始碼程式,具有多種特色&直覺的介面,FileZilla在2003年11月獲選為SourceForge.net當月最佳推薦專案<br />
*EmEditor:EmEditor是江村軟體公司（Emurasoft,坐落於美國華盛頓州）所開發的一款在Windows平台上運行的文字編輯程式,EmEditor以運作輕巧&敏捷而又功能強大&豐富著稱而得到許多用戶的好評<br />
<br />
==♡HTML&HTTP♡==<br />
*發有者及發明年代:於西元1993年,W3C&WHATWG開發<br />
*HTML:超文件標示語言（英語：HyperText Markup Language,簡稱：HTML）是一種用於建立網頁的標準標示語言,HTML是一種基礎技術常與CSS&JavaScript一起被眾多網站用於設計令人賞心悅目的網頁&網頁應用程式以及行動應用程式的使用者介面<br />
*HTTP:超文本傳輸協定（英文：HyperText Transfer Protocol,縮寫：HTTP）是一種用於分佈式&協作式和超媒體資訊系統的應用層協議,HTTP是全球資訊網的資料通訊的基礎<br />
*xml:可延伸標記式語言（英語：Extensible Markup Language,簡稱：XML）是一種標記式語言,標記指電腦所能理解的資訊符號,通過此種標記,電腦之間可以處理包含各種資訊的文章等<br />
*課後筆記:<br />
*#筆記網頁建設:登入後搜尋{資訊基礎應用/蕭卉均}→點一下，開始編輯→編輯完點儲存頁面<br />
*#色碼表:https://www.toodoo.com/db/color.html<br />
*通訊錄:<br />
*<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
<table class='nicetable'><br />
<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
</table><br />
<br />
==♡ wiki ♡==<br />
*何謂wiki:Wiki是一種在全球資訊網上開放且可供多人協同創作的超文字系統,由沃德·坎寧安於1995年首先開發,沃德·坎寧安將wiki定義為「一種允許一群用戶用簡單的描述來建立和連線一組網頁的社會計算系統」<br />
*CC授權:創用CC授權條款（英語：Creative Commons license,簡稱CC授權）是一種公共版權授權條款,其允許分發受版權保護的作品,一個創用CC授權用於一個作者想給他人分享&使用&甚至創作衍生作品的權利<br />
*wiki語法:http://jendo.synology.me/wiki1231/index.php?title=Wiki_%E5%85%A5%E9%96%80%E8%AA%9E%E6%B3%95<br />
*wiki的word適應:履歷表<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E5%B1%A5%E6%AD%B7%E8%A1%A8.html<br />
==♡CSS♡==<br />
*何謂CSS:層疊樣式表（英語：Cascading Style Sheets,簡寫CSS）又稱串樣式列表&級聯樣式表&串接樣式表&層疊樣式表&階層式樣式表,一種用來為結構化文件（如HTML文件或XML應用）添加樣式（字型、間距和顏色等）的電腦語言,由W3C定義和維護,目前最新版本是CSS2.1，為W3C的推薦標準,CSS3現在已被大部分現代瀏覽器支援,而下一版的CSS4仍在開發中<br />
*用法:限制者才有標章,不限制者沒有標章<br />
*重要語法:<br />
*#Attribution(BY):姓名標示,您（使用者）可以複製&發行&展覽&表演&放映&廣播或通過資訊網路傳播本作品；您必須按照作者或者授權人指定的方式對作品進行姓名標示<br />
*#NonCommercial(NC):非商業性使用,您可以自由複製&散布&展示及演出本作品；您不得為商業目的而使用本作品<br />
*#NoDerivs(ND):禁止改作,您可以自由複製&散布&展示及演出本作品；您不得改變&轉變或更改本作品<br />
*#ShareAlike(SA):相同方式分享,您可以自由複製&散布&展示及演出本作品；若您改變&轉變或更改本作品,僅在遵守與本作品相同的授權條款下,您才能散布由本作品產生的衍生作品<br />
<br />
==♡SVG♡==<br />
===1.♪概述♪===<br />
*何謂SVG:可縮放向量圖形（英語：Scalable Vector Graphics,SVG）是一種基於可延伸標記式語言（XML）,用於描述二維向量圖形的圖形格式,SVG由W3C制定,是一個開放標準<br />
*點陣圖與向量圖的比較(含附檔名):<br />
*#SVG:又為向量圖,特色,放大不毛邊,https://upload.wikimedia.org/wikipedia/commons/5/53/Skull_and_crossbones.svg<br />
*#JPG:又名JEPG,失真,壓縮,http://wportfolio.wzu.edu.tw/blog/attach/995/27995/89/bf_51402_8868906_99219_2yzUdJnLy0AsZ9VdwaKNCA.jpg<br />
*#PNG:不失真,公開格式,https://s-media-cache-ak0.pinimg.com/originals/96/94/ef/9694ef6ecfd562c83e7a445ee9ee19ba.png<br />
*#GIF:可動畫,256色,https://2.bp.blogspot.com/-Ra6UuzwDGQg/WDfdq3X1GjI/AAAAAAAD0gc/MfVErIwBENYRH_DvvFsnThfYp-zVxugEgCLcB/s1600/AS000946_02.gif<br />
*SVG格式具有以下優點:<br />
*#圖檔可讀,易於修改和編輯（理論上如此,但實際上卻是因為各種不同的SVG檔編輯器而可能儲存成不易解讀的SVG檔案）<br />
*#與現有技術可以互動融合,例如,SVG技術本身的動態部分（包括時序控制和動畫）就是基於SMIL標準,另外,SVG檔案還可嵌入JavaScript（嚴格地說，應該是ECMAScript）指令碼來控制SVG物件<br />
*#SVG圖形格式可以方便的建立文字索引,從而實現基於內容的圖像搜尋<br />
*#SVG圖形格式支援多種濾鏡和特殊效果,在不改變圖像內容的前提下可以實現點陣圖格式中類似文字陰影的效果<br />
*#SVG圖形格式可以用來動態生成圖形,例如,可用SVG動態生成具有互動功能的地圖,嵌入網頁中,並顯示給終端用戶<br />
*SVG格式具有以下缺點：<br />
*#如何和已經占有重要市場份額的向量圖形格式Adobe Animate競爭的問題,事實上,Adobe Animate在Flash CC 2014版及以後的版本就都支援直接匯出SVG檔案了<br />
*#SVG的本地執行環境下的廠家支援程度<br />
*#由於原始的SVG檔是遵從XML語法,導致資料採用未壓縮的方式存放,因此相較於其他的向量圖形格式,同樣的檔案內容會比其他的檔案格式稍大,Adobe因此使用gzip壓縮開發出壓縮的SVG檔格式,附檔名為 .svgz, 但此種檔案格式除了Adobe旗下的軟體以外,未被廣泛支援使用<br />
*#舊版的SVG Viewer無法正確顯示出使用新版SVG格式的向量圖形<br />
<br />
===2.♪基本架構♪===<br />
*基本架構:SVG允許3種圖形物件類型：向量圖形,柵格圖像以及文字,圖形物件——包括PNG&JPEG這些柵格圖像——能夠被編組&設計&轉換及整合進先前的彩現物件中,文字可以在任何適用於應用程式的XML命名空間之內,從而提高SVG圖形的搜尋能力和無障礙性,SVG提供的功能集涵蓋了巢狀轉換&裁剪路徑&Alpha通道&濾鏡效果&模板物件以及可延伸性,SVG嚴格遵從XML語法,並用文字格式的描述性語言來描述圖像內容,因此是一種和圖像解析度無關的向量圖形格式,SVG可以實現動態和互動功能,在DOM模型的基礎上,SVG開發設計人員可以利用ECMAScript或者SMIL來進行時序控制或物件的操縱,SVG雖然是文字格式,但是SVG支援利用gzip壓縮演算法減少檔案尺寸,壓縮後的檔案通常用被稱為「SVGZ檔案」<br />
*SVG主要支援以下幾種顯示物件：<br />
*#向量顯示物件,基本向量顯示物件包括矩形&圓&橢圓&多邊形&直線&任意曲線等<br />
*#嵌入式外部圖像,包括PNG&JPEG&SVG等<br />
*#文字物件<br />
*基本樣式:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/arrow.svg<br />
*基本圖形:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/bearFace.svg<br />
<br />
===3.♪文字♪===<br />
*TEXT<br />
*#在「text」標籤開始與結束之間夾字,可用中英文,而使用「屬性」來規定文字的表現,所有的屬性都可以改用樣式來表達<br />
*#可用中文字形：<br />
*##屬性dx和dy基於前一個字的位置去做變化：值可為'10,20,30,40'，字的距離一個比一個更遠<br />
*##屬性x和y標示字的起點：值可為'10,20,30,40'，表示每個字的x或y座標<br />
*##屬性fill控制填入字的顏色,預設黑色<br />
*##屬性stroke控制字描框的顏色,預設 none<br />
*##屬性rotate='30'順時鐘轉30°。rotate='30,60,90,120,150,180,210'指定每個字的轉動角度<br />
*##用style控制字體&字形&尺寸,但顏色是用fill不是用color <br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/text.svg<br />
<br />
===4.♪位移&旋轉&縮放&歪斜♪===<br />
*相關屬性說明：<br />
*#平移變換(translate)：transform="translate(x,y)",即新坐標系的原點在原坐標系的(x,y)處,坐標軸的方向不變<br />
*#旋轉變換(rotate)：transform="rotate(angle cx,cy)",angle代表旋轉角度,預設單位是「度」,順時針為正,逆時針為負,(cx,cy)是旋轉中心所在的坐標,若省略旋轉中心坐標,則預設值是(0,0)<br />
*#伸縮變換(scale)：transform="scale(sx,sy)",sx,sy分別代表x軸方向和y方向拉伸或縮小的比例因子,拉伸：大於1；縮小：小於1,若省略sy，即sy=sx，作等比例縮放<br />
*#歪斜變換(skew)：transform='skewX(x-angle)'或transform='skewY(y-angle)',x-angle,y-angle分別代表沿x軸和y軸歪斜的角度<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/transform.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/bearFace.svg<br />
<br />
===5.♪群組♪===<br />
*步驟:<br />
*#先添加svg標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，其中才有href屬性的定義<br />
*#在defs段落中定義圖形，並賦予id<br />
*#用<use xlink:href='#某id'/>來引用既有的定義<br />
<br />
===6.♪定義一次,引用多次♪===<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/uses.svg<br />
<br />
===7.♪漸層♪===<br />
*漸層和濾鏡如果取中文名稱,瀏覽器還認得,但Inkscape和線上轉檔軟體就會不認得<br />
*「漸層」工具可以在多種顏色之間建立漸層混合,您可以從預設漸層填色中選擇,或是建立自己的漸層填色<br />
*線性漸層沿著直線從起點到終點建立陰影<br />
*放射性漸層沿著圓形圖樣從起點到終點建立陰影<br />
*尖角漸層繞著起點以逆時針掃射的方式建立陰影<br />
*反射性漸層在起點的一側建立相同的鏡像線性漸層<br />
*菱形漸層從菱形圖樣的中央往外建立陰影<br />
====(1)☆線性漸層☆====<br />
*步驟：<br />
*#不用添加svg標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，不會用到href屬性<br />
*#在defs段落中定義漸層,並賦予id<br />
*#用fill='url(#某id)'屬性來引用既有的漸層定義<br />
*linearGradient 線性漸層定義語法說明:<br />
*#漸層標籤中的 100%，指的是整個圖形<br />
*#其中的 id 屬性定出漸層名稱<br />
*#由x1,y1,x2,y2四個屬性決定漸層範圍,以及水平,垂直或角形漸層,四個屬性都以百分比表示：<br />
*##x1,y1,x2,y2屬性決定漸層開始和結束位置,x1,x2以圖形的寬度為準,y1,y2以圖形的高度為準<br />
*##當y1和y2相等,而x1和x2不同時,可創建水平漸層<br />
*##當x1和x2相等,而y1和y2不同時,可創建垂直漸層<br />
*##當x1和x2不同,且y1和y2不同時,可創建角形漸層<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/h.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/v.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/arrow.svg<br />
<br />
====(2)☆放射漸層☆====<br />
*radialGradient 放設漸層定義語法說明:<br />
*#漸層範圍：由cx,cy,r三個屬性決定,三個屬性都以百分比表示,漸層範圍是一個圓或橢圓<br />
*##cx表示範圍中心在圖寬百分之幾的位置<br />
*##cy表示範圍中心在圖高百分之幾的位置<br />
*##r如果圖形寬&高相等則範圍為圓,r代表範圍圓半俓除以圖形寬或高；如果圖形寬&高不相等則範圍為橢圓,r代表範圍橢圓的長短軸半長除以圖形寬或高；注意：r為50%,範圍圓直徑恰等於圖的寬或高<br />
*#設色中心：由fx,fy兩個屬性決定的位置,就是設色為0%的地方,兩個屬性都以百分比表示<br />
*##fx表示設色中心在圖寬百分之幾的位置<br />
*##fy表示設色中心在圖高百分之幾的位置<br />
*##設色100%的地方在範圍圓或範圍橢圓的圓周上<br />
*#設色標籤stop,漸層標籤包住數個stop標籤,每種顏色通過一個stop標籤來規定<br />
*##offset屬性用來定義漸層的開始和結束位置,其100%是指整個漸層範圍<br />
*##stop-color屬性用來定義顏色,也可以做為style的樣式<br />
*##stop-opacity屬性決定透明度,也可以做為style的樣式<br />
<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball1.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball2.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball3.svg<br />
<br />
===八、♪柔焦濾鏡♪===<br />
===九、♪path♪===<br />
===十、♪動畫♪===<br />
<br />
==♡Inkscape♡==<br />
<br />
==♡GIS♡==<br />
*何謂 GIS ？<br />
*兩種主要的 GIS 。<br />
*基本框架。<br />
*marks<br />
*overlays<br />
*google 我的地圖<br />
*結合我的地圖與 GIS<br />
<br />
==♡圖形計算機♡==<br />
*取得 svgdraw.php<br />
*基本框架<br />
*繪製基本圖形<br />
*函式繪圖<br />
*google 圖形計算機</div>
蕭卉均
http://well-being-ng.net/wiki1231/index.php?title=%E8%A8%8E%E8%AB%96:%E8%B3%87%E8%A8%8A%E5%9F%BA%E7%A4%8E%E6%87%89%E7%94%A8/%E8%95%AD%E5%8D%89%E5%9D%87&diff=37903
討論:資訊基礎應用/蕭卉均
2018-01-16T09:36:10Z
<p>蕭卉均：/* 1.♪環境♪ */</p>
<hr />
<div>=ღ完整筆記ღ=<br />
==♡環境&工具♡==<br />
===1.♪環境♪===<br />
*伺服器與域名,伺服器DS216,網址6years.jendo.org<br />
*wifi,區網wifi：jendod&jendoa,密碼:jendo19690929<br />
*網站空間,瀏覽器：firefox,優先於chrome,盡量不用IE<br />
*wiki上的個人頁,filezilla→開啟filezilla,並新增一個站台叫♕DS216+(共用)♕→主機設定:6years.jendo.org→協定:SFTP→使用者:共用→字碼集:UTF-8→連線,然後到♕home/www♕→建自己帳號的連線→可用的文字編輯器,如emeditor→連結filezilla&慣用的文字編輯器：♕編輯/設定/檔案編輯♕，選用♕使用自訂編輯器♕&♕總是使用預設的編輯器♕，並指定編輯器的路徑<br />
*課後重點筆記:<br />
*#table是開始,/table是結束<br />
*#IP:IP4,最多表達到255字,IPV4一般網頁使用,IP6,物聯網用<br />
*#物聯網:簡單說一切事物,得失相兼<br />
*#域名:域名伺服器(HOSTS)<br />
*#AI(人工智慧)<br />
*#big5,早期,只有繁體中文<br />
*#UTF-8,萬國碼<br />
<br />
===2.♪工具與設定♪===<br />
*firefox:Mozilla Firefox（簡稱Firefox）,中文俗稱火狐（中國大陸官方有使用但未註冊為商標）,是一個自由及開放原始碼的網頁瀏覽器,由Mozilla基金會及其子公司Mozilla公司開發<br />
*filezilla:ileZilla是一種快速&可信賴的FTP用戶端以及伺服器端開放原始碼程式,具有多種特色&直覺的介面,FileZilla在2003年11月獲選為SourceForge.net當月最佳推薦專案<br />
*EmEditor:EmEditor是江村軟體公司（Emurasoft,坐落於美國華盛頓州）所開發的一款在Windows平台上運行的文字編輯程式,EmEditor以運作輕巧&敏捷而又功能強大&豐富著稱而得到許多用戶的好評<br />
<br />
==♡HTML&HTTP♡==<br />
*發有者及發明年代:於西元1993年,W3C&WHATWG開發<br />
*HTML:超文件標示語言（英語：HyperText Markup Language,簡稱：HTML）是一種用於建立網頁的標準標示語言,HTML是一種基礎技術常與CSS&JavaScript一起被眾多網站用於設計令人賞心悅目的網頁&網頁應用程式以及行動應用程式的使用者介面<br />
*HTTP:超文本傳輸協定（英文：HyperText Transfer Protocol,縮寫：HTTP）是一種用於分佈式&協作式和超媒體資訊系統的應用層協議,HTTP是全球資訊網的資料通訊的基礎<br />
*xml:可延伸標記式語言（英語：Extensible Markup Language,簡稱：XML）是一種標記式語言,標記指電腦所能理解的資訊符號,通過此種標記,電腦之間可以處理包含各種資訊的文章等<br />
*課後筆記:<br />
*#筆記網頁建設:登入後搜尋{資訊基礎應用/蕭卉均}→點一下，開始編輯→編輯完點儲存頁面<br />
*#色碼表:https://www.toodoo.com/db/color.html<br />
*通訊錄:<br />
*<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
<table class='nicetable'><br />
<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
</table><br />
<br />
==♡ wiki ♡==<br />
*何謂wiki:Wiki是一種在全球資訊網上開放且可供多人協同創作的超文字系統,由沃德·坎寧安於1995年首先開發,沃德·坎寧安將wiki定義為「一種允許一群用戶用簡單的描述來建立和連線一組網頁的社會計算系統」<br />
*CC授權:創用CC授權條款（英語：Creative Commons license,簡稱CC授權）是一種公共版權授權條款,其允許分發受版權保護的作品,一個創用CC授權用於一個作者想給他人分享&使用&甚至創作衍生作品的權利<br />
*wiki語法:http://jendo.synology.me/wiki1231/index.php?title=Wiki_%E5%85%A5%E9%96%80%E8%AA%9E%E6%B3%95<br />
*wiki的word適應:履歷表<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E5%B1%A5%E6%AD%B7%E8%A1%A8.html<br />
==♡CSS♡==<br />
*何謂CSS:層疊樣式表（英語：Cascading Style Sheets,簡寫CSS）又稱串樣式列表&級聯樣式表&串接樣式表&層疊樣式表&階層式樣式表,一種用來為結構化文件（如HTML文件或XML應用）添加樣式（字型、間距和顏色等）的電腦語言,由W3C定義和維護,目前最新版本是CSS2.1，為W3C的推薦標準,CSS3現在已被大部分現代瀏覽器支援,而下一版的CSS4仍在開發中<br />
*用法:限制者才有標章,不限制者沒有標章<br />
*重要語法:<br />
*#Attribution(BY):姓名標示,您（使用者）可以複製&發行&展覽&表演&放映&廣播或通過資訊網路傳播本作品；您必須按照作者或者授權人指定的方式對作品進行姓名標示<br />
*#NonCommercial(NC):非商業性使用,您可以自由複製&散布&展示及演出本作品；您不得為商業目的而使用本作品<br />
*#NoDerivs(ND):禁止改作,您可以自由複製&散布&展示及演出本作品；您不得改變&轉變或更改本作品<br />
*#ShareAlike(SA):相同方式分享,您可以自由複製&散布&展示及演出本作品；若您改變&轉變或更改本作品,僅在遵守與本作品相同的授權條款下,您才能散布由本作品產生的衍生作品<br />
<br />
==♡SVG♡==<br />
===1.♪概述♪===<br />
*何謂SVG:可縮放向量圖形（英語：Scalable Vector Graphics,SVG）是一種基於可延伸標記式語言（XML）,用於描述二維向量圖形的圖形格式,SVG由W3C制定,是一個開放標準<br />
*點陣圖與向量圖的比較(含附檔名):<br />
*#SVG:又為向量圖,特色,放大不毛邊,https://upload.wikimedia.org/wikipedia/commons/5/53/Skull_and_crossbones.svg<br />
*#JPG:又名JEPG,失真,壓縮,http://wportfolio.wzu.edu.tw/blog/attach/995/27995/89/bf_51402_8868906_99219_2yzUdJnLy0AsZ9VdwaKNCA.jpg<br />
*#PNG:不失真,公開格式,https://s-media-cache-ak0.pinimg.com/originals/96/94/ef/9694ef6ecfd562c83e7a445ee9ee19ba.png<br />
*#GIF:可動畫,256色,https://2.bp.blogspot.com/-Ra6UuzwDGQg/WDfdq3X1GjI/AAAAAAAD0gc/MfVErIwBENYRH_DvvFsnThfYp-zVxugEgCLcB/s1600/AS000946_02.gif<br />
*SVG格式具有以下優點:<br />
*#圖檔可讀,易於修改和編輯（理論上如此,但實際上卻是因為各種不同的SVG檔編輯器而可能儲存成不易解讀的SVG檔案）<br />
*#與現有技術可以互動融合,例如,SVG技術本身的動態部分（包括時序控制和動畫）就是基於SMIL標準,另外,SVG檔案還可嵌入JavaScript（嚴格地說，應該是ECMAScript）指令碼來控制SVG物件<br />
*#SVG圖形格式可以方便的建立文字索引,從而實現基於內容的圖像搜尋<br />
*#SVG圖形格式支援多種濾鏡和特殊效果,在不改變圖像內容的前提下可以實現點陣圖格式中類似文字陰影的效果<br />
*#SVG圖形格式可以用來動態生成圖形,例如,可用SVG動態生成具有互動功能的地圖,嵌入網頁中,並顯示給終端用戶<br />
*SVG格式具有以下缺點：<br />
*#如何和已經占有重要市場份額的向量圖形格式Adobe Animate競爭的問題,事實上,Adobe Animate在Flash CC 2014版及以後的版本就都支援直接匯出SVG檔案了<br />
*#SVG的本地執行環境下的廠家支援程度<br />
*#由於原始的SVG檔是遵從XML語法,導致資料採用未壓縮的方式存放,因此相較於其他的向量圖形格式,同樣的檔案內容會比其他的檔案格式稍大,Adobe因此使用gzip壓縮開發出壓縮的SVG檔格式,附檔名為 .svgz, 但此種檔案格式除了Adobe旗下的軟體以外,未被廣泛支援使用<br />
*#舊版的SVG Viewer無法正確顯示出使用新版SVG格式的向量圖形<br />
<br />
===2.♪基本架構♪===<br />
*基本架構:SVG允許3種圖形物件類型：向量圖形,柵格圖像以及文字,圖形物件——包括PNG&JPEG這些柵格圖像——能夠被編組&設計&轉換及整合進先前的彩現物件中,文字可以在任何適用於應用程式的XML命名空間之內,從而提高SVG圖形的搜尋能力和無障礙性,SVG提供的功能集涵蓋了巢狀轉換&裁剪路徑&Alpha通道&濾鏡效果&模板物件以及可延伸性,SVG嚴格遵從XML語法,並用文字格式的描述性語言來描述圖像內容,因此是一種和圖像解析度無關的向量圖形格式,SVG可以實現動態和互動功能,在DOM模型的基礎上,SVG開發設計人員可以利用ECMAScript或者SMIL來進行時序控制或物件的操縱,SVG雖然是文字格式,但是SVG支援利用gzip壓縮演算法減少檔案尺寸,壓縮後的檔案通常用被稱為「SVGZ檔案」<br />
*SVG主要支援以下幾種顯示物件：<br />
*#向量顯示物件,基本向量顯示物件包括矩形&圓&橢圓&多邊形&直線&任意曲線等<br />
*#嵌入式外部圖像,包括PNG&JPEG&SVG等<br />
*#文字物件<br />
*基本樣式:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/arrow.svg<br />
*基本圖形:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/bearFace.svg<br />
<br />
===3.♪文字♪===<br />
*TEXT<br />
*#在「text」標籤開始與結束之間夾字,可用中英文,而使用「屬性」來規定文字的表現,所有的屬性都可以改用樣式來表達<br />
*#可用中文字形：<br />
*##屬性dx和dy基於前一個字的位置去做變化：值可為'10,20,30,40'，字的距離一個比一個更遠<br />
*##屬性x和y標示字的起點：值可為'10,20,30,40'，表示每個字的x或y座標<br />
*##屬性fill控制填入字的顏色,預設黑色<br />
*##屬性stroke控制字描框的顏色,預設 none<br />
*##屬性rotate='30'順時鐘轉30°。rotate='30,60,90,120,150,180,210'指定每個字的轉動角度<br />
*##用style控制字體&字形&尺寸,但顏色是用fill不是用color <br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/text.svg<br />
<br />
===4.♪位移&旋轉&縮放&歪斜♪===<br />
*相關屬性說明：<br />
*#平移變換(translate)：transform="translate(x,y)",即新坐標系的原點在原坐標系的(x,y)處,坐標軸的方向不變<br />
*#旋轉變換(rotate)：transform="rotate(angle cx,cy)",angle代表旋轉角度,預設單位是「度」,順時針為正,逆時針為負,(cx,cy)是旋轉中心所在的坐標,若省略旋轉中心坐標,則預設值是(0,0)<br />
*#伸縮變換(scale)：transform="scale(sx,sy)",sx,sy分別代表x軸方向和y方向拉伸或縮小的比例因子,拉伸：大於1；縮小：小於1,若省略sy，即sy=sx，作等比例縮放<br />
*#歪斜變換(skew)：transform='skewX(x-angle)'或transform='skewY(y-angle)',x-angle,y-angle分別代表沿x軸和y軸歪斜的角度<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/transform.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/bearFace.svg<br />
<br />
===5.♪群組♪===<br />
*步驟:<br />
*#先添加svg標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，其中才有href屬性的定義<br />
*#在defs段落中定義圖形，並賦予id<br />
*#用<use xlink:href='#某id'/>來引用既有的定義<br />
<br />
===6.♪定義一次,引用多次♪===<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/uses.svg<br />
<br />
===7.♪漸層♪===<br />
*漸層和濾鏡如果取中文名稱,瀏覽器還認得,但Inkscape和線上轉檔軟體就會不認得<br />
*「漸層」工具可以在多種顏色之間建立漸層混合,您可以從預設漸層填色中選擇,或是建立自己的漸層填色<br />
*線性漸層沿著直線從起點到終點建立陰影<br />
*放射性漸層沿著圓形圖樣從起點到終點建立陰影<br />
*尖角漸層繞著起點以逆時針掃射的方式建立陰影<br />
*反射性漸層在起點的一側建立相同的鏡像線性漸層<br />
*菱形漸層從菱形圖樣的中央往外建立陰影<br />
====(1)☆線性漸層☆====<br />
*步驟：<br />
*#不用添加svg標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，不會用到href屬性<br />
*#在defs段落中定義漸層,並賦予id<br />
*#用fill='url(#某id)'屬性來引用既有的漸層定義<br />
*linearGradient 線性漸層定義語法說明:<br />
*#漸層標籤中的 100%，指的是整個圖形<br />
*#其中的 id 屬性定出漸層名稱<br />
*#由x1,y1,x2,y2四個屬性決定漸層範圍,以及水平,垂直或角形漸層,四個屬性都以百分比表示：<br />
*##x1,y1,x2,y2屬性決定漸層開始和結束位置,x1,x2以圖形的寬度為準,y1,y2以圖形的高度為準<br />
*##當y1和y2相等,而x1和x2不同時,可創建水平漸層<br />
*##當x1和x2相等,而y1和y2不同時,可創建垂直漸層<br />
*##當x1和x2不同,且y1和y2不同時,可創建角形漸層<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/h.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/v.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/arrow.svg<br />
<br />
====(2)☆放射漸層☆====<br />
*radialGradient 放設漸層定義語法說明:<br />
*#漸層範圍：由cx,cy,r三個屬性決定,三個屬性都以百分比表示,漸層範圍是一個圓或橢圓<br />
*##cx表示範圍中心在圖寬百分之幾的位置<br />
*##cy表示範圍中心在圖高百分之幾的位置<br />
*##r如果圖形寬&高相等則範圍為圓,r代表範圍圓半俓除以圖形寬或高；如果圖形寬&高不相等則範圍為橢圓,r代表範圍橢圓的長短軸半長除以圖形寬或高；注意：r為50%,範圍圓直徑恰等於圖的寬或高<br />
*##fx表示設色中心在圖寬百分之幾的位置<br />
*##fy表示設色中心在圖高百分之幾的位置<br />
*##設色100%的地方在範圍圓或範圍橢圓的圓周上<br />
*#設色標籤stop,漸層標籤包住數個stop標籤,每種顏色通過一個stop標籤來規定<br />
*##offset屬性用來定義漸層的開始和結束位置,其100%是指整個漸層範圍<br />
*##<br />
*#設色中心：由fx,fy兩個屬性決定的位置,就是設色為0%的地方,兩個屬性都以百分比表示<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball1.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball2.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball3.svg<br />
<br />
===八、♪柔焦濾鏡♪===<br />
===九、♪path♪===<br />
===十、♪動畫♪===<br />
<br />
==♡Inkscape♡==<br />
<br />
==♡GIS♡==<br />
*何謂 GIS ？<br />
*兩種主要的 GIS 。<br />
*基本框架。<br />
*marks<br />
*overlays<br />
*google 我的地圖<br />
*結合我的地圖與 GIS<br />
<br />
==♡圖形計算機♡==<br />
*取得 svgdraw.php<br />
*基本框架<br />
*繪製基本圖形<br />
*函式繪圖<br />
*google 圖形計算機</div>
蕭卉均
http://well-being-ng.net/wiki1231/index.php?title=%E8%A8%8E%E8%AB%96:%E8%B3%87%E8%A8%8A%E5%9F%BA%E7%A4%8E%E6%87%89%E7%94%A8/%E8%95%AD%E5%8D%89%E5%9D%87&diff=37902
討論:資訊基礎應用/蕭卉均
2018-01-16T09:35:25Z
<p>蕭卉均：/* (2)☆放射漸層☆ */</p>
<hr />
<div>=ღ完整筆記ღ=<br />
==♡環境&工具♡==<br />
===1.♪環境♪===<br />
*伺服器與域名,伺服器DS216,網址6years.jendo.org<br />
*wifi,區網wifi：jendod&jendoa<br />
*網站空間,瀏覽器：firefox,優先於chrome,盡量不用IE<br />
*wiki上的個人頁,filezilla→開啟filezilla,並新增一個站台叫♕DS216+(共用)♕→主機設定:6years.jendo.org→協定:SFTP→使用者:共用→字碼集:UTF-8→連線,然後到♕home/www♕→建自己帳號的連線→可用的文字編輯器,如emeditor→連結filezilla&慣用的文字編輯器：♕編輯/設定/檔案編輯♕，選用♕使用自訂編輯器♕&♕總是使用預設的編輯器♕，並指定編輯器的路徑<br />
*課後重點筆記:<br />
*#table是開始,/table是結束<br />
*#IP:IP4,最多表達到255字,IPV4一般網頁使用,IP6,物聯網用<br />
*#物聯網:簡單說一切事物,得失相兼<br />
*#域名:域名伺服器(HOSTS)<br />
*#AI(人工智慧)<br />
*#big5,早期,只有繁體中文<br />
*#UTF-8,萬國碼<br />
<br />
===2.♪工具與設定♪===<br />
*firefox:Mozilla Firefox（簡稱Firefox）,中文俗稱火狐（中國大陸官方有使用但未註冊為商標）,是一個自由及開放原始碼的網頁瀏覽器,由Mozilla基金會及其子公司Mozilla公司開發<br />
*filezilla:ileZilla是一種快速&可信賴的FTP用戶端以及伺服器端開放原始碼程式,具有多種特色&直覺的介面,FileZilla在2003年11月獲選為SourceForge.net當月最佳推薦專案<br />
*EmEditor:EmEditor是江村軟體公司（Emurasoft,坐落於美國華盛頓州）所開發的一款在Windows平台上運行的文字編輯程式,EmEditor以運作輕巧&敏捷而又功能強大&豐富著稱而得到許多用戶的好評<br />
<br />
==♡HTML&HTTP♡==<br />
*發有者及發明年代:於西元1993年,W3C&WHATWG開發<br />
*HTML:超文件標示語言（英語：HyperText Markup Language,簡稱：HTML）是一種用於建立網頁的標準標示語言,HTML是一種基礎技術常與CSS&JavaScript一起被眾多網站用於設計令人賞心悅目的網頁&網頁應用程式以及行動應用程式的使用者介面<br />
*HTTP:超文本傳輸協定（英文：HyperText Transfer Protocol,縮寫：HTTP）是一種用於分佈式&協作式和超媒體資訊系統的應用層協議,HTTP是全球資訊網的資料通訊的基礎<br />
*xml:可延伸標記式語言（英語：Extensible Markup Language,簡稱：XML）是一種標記式語言,標記指電腦所能理解的資訊符號,通過此種標記,電腦之間可以處理包含各種資訊的文章等<br />
*課後筆記:<br />
*#筆記網頁建設:登入後搜尋{資訊基礎應用/蕭卉均}→點一下，開始編輯→編輯完點儲存頁面<br />
*#色碼表:https://www.toodoo.com/db/color.html<br />
*通訊錄:<br />
*<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
<table class='nicetable'><br />
<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
</table><br />
<br />
==♡ wiki ♡==<br />
*何謂wiki:Wiki是一種在全球資訊網上開放且可供多人協同創作的超文字系統,由沃德·坎寧安於1995年首先開發,沃德·坎寧安將wiki定義為「一種允許一群用戶用簡單的描述來建立和連線一組網頁的社會計算系統」<br />
*CC授權:創用CC授權條款（英語：Creative Commons license,簡稱CC授權）是一種公共版權授權條款,其允許分發受版權保護的作品,一個創用CC授權用於一個作者想給他人分享&使用&甚至創作衍生作品的權利<br />
*wiki語法:http://jendo.synology.me/wiki1231/index.php?title=Wiki_%E5%85%A5%E9%96%80%E8%AA%9E%E6%B3%95<br />
*wiki的word適應:履歷表<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E5%B1%A5%E6%AD%B7%E8%A1%A8.html<br />
==♡CSS♡==<br />
*何謂CSS:層疊樣式表（英語：Cascading Style Sheets,簡寫CSS）又稱串樣式列表&級聯樣式表&串接樣式表&層疊樣式表&階層式樣式表,一種用來為結構化文件（如HTML文件或XML應用）添加樣式（字型、間距和顏色等）的電腦語言,由W3C定義和維護,目前最新版本是CSS2.1，為W3C的推薦標準,CSS3現在已被大部分現代瀏覽器支援,而下一版的CSS4仍在開發中<br />
*用法:限制者才有標章,不限制者沒有標章<br />
*重要語法:<br />
*#Attribution(BY):姓名標示,您（使用者）可以複製&發行&展覽&表演&放映&廣播或通過資訊網路傳播本作品；您必須按照作者或者授權人指定的方式對作品進行姓名標示<br />
*#NonCommercial(NC):非商業性使用,您可以自由複製&散布&展示及演出本作品；您不得為商業目的而使用本作品<br />
*#NoDerivs(ND):禁止改作,您可以自由複製&散布&展示及演出本作品；您不得改變&轉變或更改本作品<br />
*#ShareAlike(SA):相同方式分享,您可以自由複製&散布&展示及演出本作品；若您改變&轉變或更改本作品,僅在遵守與本作品相同的授權條款下,您才能散布由本作品產生的衍生作品<br />
<br />
==♡SVG♡==<br />
===1.♪概述♪===<br />
*何謂SVG:可縮放向量圖形（英語：Scalable Vector Graphics,SVG）是一種基於可延伸標記式語言（XML）,用於描述二維向量圖形的圖形格式,SVG由W3C制定,是一個開放標準<br />
*點陣圖與向量圖的比較(含附檔名):<br />
*#SVG:又為向量圖,特色,放大不毛邊,https://upload.wikimedia.org/wikipedia/commons/5/53/Skull_and_crossbones.svg<br />
*#JPG:又名JEPG,失真,壓縮,http://wportfolio.wzu.edu.tw/blog/attach/995/27995/89/bf_51402_8868906_99219_2yzUdJnLy0AsZ9VdwaKNCA.jpg<br />
*#PNG:不失真,公開格式,https://s-media-cache-ak0.pinimg.com/originals/96/94/ef/9694ef6ecfd562c83e7a445ee9ee19ba.png<br />
*#GIF:可動畫,256色,https://2.bp.blogspot.com/-Ra6UuzwDGQg/WDfdq3X1GjI/AAAAAAAD0gc/MfVErIwBENYRH_DvvFsnThfYp-zVxugEgCLcB/s1600/AS000946_02.gif<br />
*SVG格式具有以下優點:<br />
*#圖檔可讀,易於修改和編輯（理論上如此,但實際上卻是因為各種不同的SVG檔編輯器而可能儲存成不易解讀的SVG檔案）<br />
*#與現有技術可以互動融合,例如,SVG技術本身的動態部分（包括時序控制和動畫）就是基於SMIL標準,另外,SVG檔案還可嵌入JavaScript（嚴格地說，應該是ECMAScript）指令碼來控制SVG物件<br />
*#SVG圖形格式可以方便的建立文字索引,從而實現基於內容的圖像搜尋<br />
*#SVG圖形格式支援多種濾鏡和特殊效果,在不改變圖像內容的前提下可以實現點陣圖格式中類似文字陰影的效果<br />
*#SVG圖形格式可以用來動態生成圖形,例如,可用SVG動態生成具有互動功能的地圖,嵌入網頁中,並顯示給終端用戶<br />
*SVG格式具有以下缺點：<br />
*#如何和已經占有重要市場份額的向量圖形格式Adobe Animate競爭的問題,事實上,Adobe Animate在Flash CC 2014版及以後的版本就都支援直接匯出SVG檔案了<br />
*#SVG的本地執行環境下的廠家支援程度<br />
*#由於原始的SVG檔是遵從XML語法,導致資料採用未壓縮的方式存放,因此相較於其他的向量圖形格式,同樣的檔案內容會比其他的檔案格式稍大,Adobe因此使用gzip壓縮開發出壓縮的SVG檔格式,附檔名為 .svgz, 但此種檔案格式除了Adobe旗下的軟體以外,未被廣泛支援使用<br />
*#舊版的SVG Viewer無法正確顯示出使用新版SVG格式的向量圖形<br />
<br />
===2.♪基本架構♪===<br />
*基本架構:SVG允許3種圖形物件類型：向量圖形,柵格圖像以及文字,圖形物件——包括PNG&JPEG這些柵格圖像——能夠被編組&設計&轉換及整合進先前的彩現物件中,文字可以在任何適用於應用程式的XML命名空間之內,從而提高SVG圖形的搜尋能力和無障礙性,SVG提供的功能集涵蓋了巢狀轉換&裁剪路徑&Alpha通道&濾鏡效果&模板物件以及可延伸性,SVG嚴格遵從XML語法,並用文字格式的描述性語言來描述圖像內容,因此是一種和圖像解析度無關的向量圖形格式,SVG可以實現動態和互動功能,在DOM模型的基礎上,SVG開發設計人員可以利用ECMAScript或者SMIL來進行時序控制或物件的操縱,SVG雖然是文字格式,但是SVG支援利用gzip壓縮演算法減少檔案尺寸,壓縮後的檔案通常用被稱為「SVGZ檔案」<br />
*SVG主要支援以下幾種顯示物件：<br />
*#向量顯示物件,基本向量顯示物件包括矩形&圓&橢圓&多邊形&直線&任意曲線等<br />
*#嵌入式外部圖像,包括PNG&JPEG&SVG等<br />
*#文字物件<br />
*基本樣式:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/arrow.svg<br />
*基本圖形:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/bearFace.svg<br />
<br />
===3.♪文字♪===<br />
*TEXT<br />
*#在「text」標籤開始與結束之間夾字,可用中英文,而使用「屬性」來規定文字的表現,所有的屬性都可以改用樣式來表達<br />
*#可用中文字形：<br />
*##屬性dx和dy基於前一個字的位置去做變化：值可為'10,20,30,40'，字的距離一個比一個更遠<br />
*##屬性x和y標示字的起點：值可為'10,20,30,40'，表示每個字的x或y座標<br />
*##屬性fill控制填入字的顏色,預設黑色<br />
*##屬性stroke控制字描框的顏色,預設 none<br />
*##屬性rotate='30'順時鐘轉30°。rotate='30,60,90,120,150,180,210'指定每個字的轉動角度<br />
*##用style控制字體&字形&尺寸,但顏色是用fill不是用color <br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/text.svg<br />
<br />
===4.♪位移&旋轉&縮放&歪斜♪===<br />
*相關屬性說明：<br />
*#平移變換(translate)：transform="translate(x,y)",即新坐標系的原點在原坐標系的(x,y)處,坐標軸的方向不變<br />
*#旋轉變換(rotate)：transform="rotate(angle cx,cy)",angle代表旋轉角度,預設單位是「度」,順時針為正,逆時針為負,(cx,cy)是旋轉中心所在的坐標,若省略旋轉中心坐標,則預設值是(0,0)<br />
*#伸縮變換(scale)：transform="scale(sx,sy)",sx,sy分別代表x軸方向和y方向拉伸或縮小的比例因子,拉伸：大於1；縮小：小於1,若省略sy，即sy=sx，作等比例縮放<br />
*#歪斜變換(skew)：transform='skewX(x-angle)'或transform='skewY(y-angle)',x-angle,y-angle分別代表沿x軸和y軸歪斜的角度<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/transform.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/bearFace.svg<br />
<br />
===5.♪群組♪===<br />
*步驟:<br />
*#先添加svg標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，其中才有href屬性的定義<br />
*#在defs段落中定義圖形，並賦予id<br />
*#用<use xlink:href='#某id'/>來引用既有的定義<br />
<br />
===6.♪定義一次,引用多次♪===<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/uses.svg<br />
<br />
===7.♪漸層♪===<br />
*漸層和濾鏡如果取中文名稱,瀏覽器還認得,但Inkscape和線上轉檔軟體就會不認得<br />
*「漸層」工具可以在多種顏色之間建立漸層混合,您可以從預設漸層填色中選擇,或是建立自己的漸層填色<br />
*線性漸層沿著直線從起點到終點建立陰影<br />
*放射性漸層沿著圓形圖樣從起點到終點建立陰影<br />
*尖角漸層繞著起點以逆時針掃射的方式建立陰影<br />
*反射性漸層在起點的一側建立相同的鏡像線性漸層<br />
*菱形漸層從菱形圖樣的中央往外建立陰影<br />
====(1)☆線性漸層☆====<br />
*步驟：<br />
*#不用添加svg標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，不會用到href屬性<br />
*#在defs段落中定義漸層,並賦予id<br />
*#用fill='url(#某id)'屬性來引用既有的漸層定義<br />
*linearGradient 線性漸層定義語法說明:<br />
*#漸層標籤中的 100%，指的是整個圖形<br />
*#其中的 id 屬性定出漸層名稱<br />
*#由x1,y1,x2,y2四個屬性決定漸層範圍,以及水平,垂直或角形漸層,四個屬性都以百分比表示：<br />
*##x1,y1,x2,y2屬性決定漸層開始和結束位置,x1,x2以圖形的寬度為準,y1,y2以圖形的高度為準<br />
*##當y1和y2相等,而x1和x2不同時,可創建水平漸層<br />
*##當x1和x2相等,而y1和y2不同時,可創建垂直漸層<br />
*##當x1和x2不同,且y1和y2不同時,可創建角形漸層<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/h.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/v.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/arrow.svg<br />
<br />
====(2)☆放射漸層☆====<br />
*radialGradient 放設漸層定義語法說明:<br />
*#漸層範圍：由cx,cy,r三個屬性決定,三個屬性都以百分比表示,漸層範圍是一個圓或橢圓<br />
*##cx表示範圍中心在圖寬百分之幾的位置<br />
*##cy表示範圍中心在圖高百分之幾的位置<br />
*##r如果圖形寬&高相等則範圍為圓,r代表範圍圓半俓除以圖形寬或高；如果圖形寬&高不相等則範圍為橢圓,r代表範圍橢圓的長短軸半長除以圖形寬或高；注意：r為50%,範圍圓直徑恰等於圖的寬或高<br />
*##fx表示設色中心在圖寬百分之幾的位置<br />
*##fy表示設色中心在圖高百分之幾的位置<br />
*##設色100%的地方在範圍圓或範圍橢圓的圓周上<br />
*#設色標籤stop,漸層標籤包住數個stop標籤,每種顏色通過一個stop標籤來規定<br />
*##offset屬性用來定義漸層的開始和結束位置,其100%是指整個漸層範圍<br />
*##<br />
*#設色中心：由fx,fy兩個屬性決定的位置,就是設色為0%的地方,兩個屬性都以百分比表示<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball1.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball2.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball3.svg<br />
<br />
===八、♪柔焦濾鏡♪===<br />
===九、♪path♪===<br />
===十、♪動畫♪===<br />
<br />
==♡Inkscape♡==<br />
<br />
==♡GIS♡==<br />
*何謂 GIS ？<br />
*兩種主要的 GIS 。<br />
*基本框架。<br />
*marks<br />
*overlays<br />
*google 我的地圖<br />
*結合我的地圖與 GIS<br />
<br />
==♡圖形計算機♡==<br />
*取得 svgdraw.php<br />
*基本框架<br />
*繪製基本圖形<br />
*函式繪圖<br />
*google 圖形計算機</div>
蕭卉均
http://well-being-ng.net/wiki1231/index.php?title=%E8%A8%8E%E8%AB%96:%E8%B3%87%E8%A8%8A%E5%9F%BA%E7%A4%8E%E6%87%89%E7%94%A8/%E8%95%AD%E5%8D%89%E5%9D%87&diff=37901
討論:資訊基礎應用/蕭卉均
2018-01-16T09:31:05Z
<p>蕭卉均：/* 圖形計算機 */</p>
<hr />
<div>=ღ完整筆記ღ=<br />
==♡環境&工具♡==<br />
===1.♪環境♪===<br />
*伺服器與域名,伺服器DS216,網址6years.jendo.org<br />
*wifi,區網wifi：jendod&jendoa<br />
*網站空間,瀏覽器：firefox,優先於chrome,盡量不用IE<br />
*wiki上的個人頁,filezilla→開啟filezilla,並新增一個站台叫♕DS216+(共用)♕→主機設定:6years.jendo.org→協定:SFTP→使用者:共用→字碼集:UTF-8→連線,然後到♕home/www♕→建自己帳號的連線→可用的文字編輯器,如emeditor→連結filezilla&慣用的文字編輯器：♕編輯/設定/檔案編輯♕，選用♕使用自訂編輯器♕&♕總是使用預設的編輯器♕，並指定編輯器的路徑<br />
*課後重點筆記:<br />
*#table是開始,/table是結束<br />
*#IP:IP4,最多表達到255字,IPV4一般網頁使用,IP6,物聯網用<br />
*#物聯網:簡單說一切事物,得失相兼<br />
*#域名:域名伺服器(HOSTS)<br />
*#AI(人工智慧)<br />
*#big5,早期,只有繁體中文<br />
*#UTF-8,萬國碼<br />
<br />
===2.♪工具與設定♪===<br />
*firefox:Mozilla Firefox（簡稱Firefox）,中文俗稱火狐（中國大陸官方有使用但未註冊為商標）,是一個自由及開放原始碼的網頁瀏覽器,由Mozilla基金會及其子公司Mozilla公司開發<br />
*filezilla:ileZilla是一種快速&可信賴的FTP用戶端以及伺服器端開放原始碼程式,具有多種特色&直覺的介面,FileZilla在2003年11月獲選為SourceForge.net當月最佳推薦專案<br />
*EmEditor:EmEditor是江村軟體公司（Emurasoft,坐落於美國華盛頓州）所開發的一款在Windows平台上運行的文字編輯程式,EmEditor以運作輕巧&敏捷而又功能強大&豐富著稱而得到許多用戶的好評<br />
<br />
==♡HTML&HTTP♡==<br />
*發有者及發明年代:於西元1993年,W3C&WHATWG開發<br />
*HTML:超文件標示語言（英語：HyperText Markup Language,簡稱：HTML）是一種用於建立網頁的標準標示語言,HTML是一種基礎技術常與CSS&JavaScript一起被眾多網站用於設計令人賞心悅目的網頁&網頁應用程式以及行動應用程式的使用者介面<br />
*HTTP:超文本傳輸協定（英文：HyperText Transfer Protocol,縮寫：HTTP）是一種用於分佈式&協作式和超媒體資訊系統的應用層協議,HTTP是全球資訊網的資料通訊的基礎<br />
*xml:可延伸標記式語言（英語：Extensible Markup Language,簡稱：XML）是一種標記式語言,標記指電腦所能理解的資訊符號,通過此種標記,電腦之間可以處理包含各種資訊的文章等<br />
*課後筆記:<br />
*#筆記網頁建設:登入後搜尋{資訊基礎應用/蕭卉均}→點一下，開始編輯→編輯完點儲存頁面<br />
*#色碼表:https://www.toodoo.com/db/color.html<br />
*通訊錄:<br />
*<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
<table class='nicetable'><br />
<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
</table><br />
<br />
==♡ wiki ♡==<br />
*何謂wiki:Wiki是一種在全球資訊網上開放且可供多人協同創作的超文字系統,由沃德·坎寧安於1995年首先開發,沃德·坎寧安將wiki定義為「一種允許一群用戶用簡單的描述來建立和連線一組網頁的社會計算系統」<br />
*CC授權:創用CC授權條款（英語：Creative Commons license,簡稱CC授權）是一種公共版權授權條款,其允許分發受版權保護的作品,一個創用CC授權用於一個作者想給他人分享&使用&甚至創作衍生作品的權利<br />
*wiki語法:http://jendo.synology.me/wiki1231/index.php?title=Wiki_%E5%85%A5%E9%96%80%E8%AA%9E%E6%B3%95<br />
*wiki的word適應:履歷表<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E5%B1%A5%E6%AD%B7%E8%A1%A8.html<br />
==♡CSS♡==<br />
*何謂CSS:層疊樣式表（英語：Cascading Style Sheets,簡寫CSS）又稱串樣式列表&級聯樣式表&串接樣式表&層疊樣式表&階層式樣式表,一種用來為結構化文件（如HTML文件或XML應用）添加樣式（字型、間距和顏色等）的電腦語言,由W3C定義和維護,目前最新版本是CSS2.1，為W3C的推薦標準,CSS3現在已被大部分現代瀏覽器支援,而下一版的CSS4仍在開發中<br />
*用法:限制者才有標章,不限制者沒有標章<br />
*重要語法:<br />
*#Attribution(BY):姓名標示,您（使用者）可以複製&發行&展覽&表演&放映&廣播或通過資訊網路傳播本作品；您必須按照作者或者授權人指定的方式對作品進行姓名標示<br />
*#NonCommercial(NC):非商業性使用,您可以自由複製&散布&展示及演出本作品；您不得為商業目的而使用本作品<br />
*#NoDerivs(ND):禁止改作,您可以自由複製&散布&展示及演出本作品；您不得改變&轉變或更改本作品<br />
*#ShareAlike(SA):相同方式分享,您可以自由複製&散布&展示及演出本作品；若您改變&轉變或更改本作品,僅在遵守與本作品相同的授權條款下,您才能散布由本作品產生的衍生作品<br />
<br />
==♡SVG♡==<br />
===1.♪概述♪===<br />
*何謂SVG:可縮放向量圖形（英語：Scalable Vector Graphics,SVG）是一種基於可延伸標記式語言（XML）,用於描述二維向量圖形的圖形格式,SVG由W3C制定,是一個開放標準<br />
*點陣圖與向量圖的比較(含附檔名):<br />
*#SVG:又為向量圖,特色,放大不毛邊,https://upload.wikimedia.org/wikipedia/commons/5/53/Skull_and_crossbones.svg<br />
*#JPG:又名JEPG,失真,壓縮,http://wportfolio.wzu.edu.tw/blog/attach/995/27995/89/bf_51402_8868906_99219_2yzUdJnLy0AsZ9VdwaKNCA.jpg<br />
*#PNG:不失真,公開格式,https://s-media-cache-ak0.pinimg.com/originals/96/94/ef/9694ef6ecfd562c83e7a445ee9ee19ba.png<br />
*#GIF:可動畫,256色,https://2.bp.blogspot.com/-Ra6UuzwDGQg/WDfdq3X1GjI/AAAAAAAD0gc/MfVErIwBENYRH_DvvFsnThfYp-zVxugEgCLcB/s1600/AS000946_02.gif<br />
*SVG格式具有以下優點:<br />
*#圖檔可讀,易於修改和編輯（理論上如此,但實際上卻是因為各種不同的SVG檔編輯器而可能儲存成不易解讀的SVG檔案）<br />
*#與現有技術可以互動融合,例如,SVG技術本身的動態部分（包括時序控制和動畫）就是基於SMIL標準,另外,SVG檔案還可嵌入JavaScript（嚴格地說，應該是ECMAScript）指令碼來控制SVG物件<br />
*#SVG圖形格式可以方便的建立文字索引,從而實現基於內容的圖像搜尋<br />
*#SVG圖形格式支援多種濾鏡和特殊效果,在不改變圖像內容的前提下可以實現點陣圖格式中類似文字陰影的效果<br />
*#SVG圖形格式可以用來動態生成圖形,例如,可用SVG動態生成具有互動功能的地圖,嵌入網頁中,並顯示給終端用戶<br />
*SVG格式具有以下缺點：<br />
*#如何和已經占有重要市場份額的向量圖形格式Adobe Animate競爭的問題,事實上,Adobe Animate在Flash CC 2014版及以後的版本就都支援直接匯出SVG檔案了<br />
*#SVG的本地執行環境下的廠家支援程度<br />
*#由於原始的SVG檔是遵從XML語法,導致資料採用未壓縮的方式存放,因此相較於其他的向量圖形格式,同樣的檔案內容會比其他的檔案格式稍大,Adobe因此使用gzip壓縮開發出壓縮的SVG檔格式,附檔名為 .svgz, 但此種檔案格式除了Adobe旗下的軟體以外,未被廣泛支援使用<br />
*#舊版的SVG Viewer無法正確顯示出使用新版SVG格式的向量圖形<br />
<br />
===2.♪基本架構♪===<br />
*基本架構:SVG允許3種圖形物件類型：向量圖形,柵格圖像以及文字,圖形物件——包括PNG&JPEG這些柵格圖像——能夠被編組&設計&轉換及整合進先前的彩現物件中,文字可以在任何適用於應用程式的XML命名空間之內,從而提高SVG圖形的搜尋能力和無障礙性,SVG提供的功能集涵蓋了巢狀轉換&裁剪路徑&Alpha通道&濾鏡效果&模板物件以及可延伸性,SVG嚴格遵從XML語法,並用文字格式的描述性語言來描述圖像內容,因此是一種和圖像解析度無關的向量圖形格式,SVG可以實現動態和互動功能,在DOM模型的基礎上,SVG開發設計人員可以利用ECMAScript或者SMIL來進行時序控制或物件的操縱,SVG雖然是文字格式,但是SVG支援利用gzip壓縮演算法減少檔案尺寸,壓縮後的檔案通常用被稱為「SVGZ檔案」<br />
*SVG主要支援以下幾種顯示物件：<br />
*#向量顯示物件,基本向量顯示物件包括矩形&圓&橢圓&多邊形&直線&任意曲線等<br />
*#嵌入式外部圖像,包括PNG&JPEG&SVG等<br />
*#文字物件<br />
*基本樣式:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/arrow.svg<br />
*基本圖形:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/bearFace.svg<br />
<br />
===3.♪文字♪===<br />
*TEXT<br />
*#在「text」標籤開始與結束之間夾字,可用中英文,而使用「屬性」來規定文字的表現,所有的屬性都可以改用樣式來表達<br />
*#可用中文字形：<br />
*##屬性dx和dy基於前一個字的位置去做變化：值可為'10,20,30,40'，字的距離一個比一個更遠<br />
*##屬性x和y標示字的起點：值可為'10,20,30,40'，表示每個字的x或y座標<br />
*##屬性fill控制填入字的顏色,預設黑色<br />
*##屬性stroke控制字描框的顏色,預設 none<br />
*##屬性rotate='30'順時鐘轉30°。rotate='30,60,90,120,150,180,210'指定每個字的轉動角度<br />
*##用style控制字體&字形&尺寸,但顏色是用fill不是用color <br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/text.svg<br />
<br />
===4.♪位移&旋轉&縮放&歪斜♪===<br />
*相關屬性說明：<br />
*#平移變換(translate)：transform="translate(x,y)",即新坐標系的原點在原坐標系的(x,y)處,坐標軸的方向不變<br />
*#旋轉變換(rotate)：transform="rotate(angle cx,cy)",angle代表旋轉角度,預設單位是「度」,順時針為正,逆時針為負,(cx,cy)是旋轉中心所在的坐標,若省略旋轉中心坐標,則預設值是(0,0)<br />
*#伸縮變換(scale)：transform="scale(sx,sy)",sx,sy分別代表x軸方向和y方向拉伸或縮小的比例因子,拉伸：大於1；縮小：小於1,若省略sy，即sy=sx，作等比例縮放<br />
*#歪斜變換(skew)：transform='skewX(x-angle)'或transform='skewY(y-angle)',x-angle,y-angle分別代表沿x軸和y軸歪斜的角度<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/transform.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/bearFace.svg<br />
<br />
===5.♪群組♪===<br />
*步驟:<br />
*#先添加svg標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，其中才有href屬性的定義<br />
*#在defs段落中定義圖形，並賦予id<br />
*#用<use xlink:href='#某id'/>來引用既有的定義<br />
<br />
===6.♪定義一次,引用多次♪===<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/uses.svg<br />
<br />
===7.♪漸層♪===<br />
*漸層和濾鏡如果取中文名稱,瀏覽器還認得,但Inkscape和線上轉檔軟體就會不認得<br />
*「漸層」工具可以在多種顏色之間建立漸層混合,您可以從預設漸層填色中選擇,或是建立自己的漸層填色<br />
*線性漸層沿著直線從起點到終點建立陰影<br />
*放射性漸層沿著圓形圖樣從起點到終點建立陰影<br />
*尖角漸層繞著起點以逆時針掃射的方式建立陰影<br />
*反射性漸層在起點的一側建立相同的鏡像線性漸層<br />
*菱形漸層從菱形圖樣的中央往外建立陰影<br />
====(1)☆線性漸層☆====<br />
*步驟：<br />
*#不用添加svg標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，不會用到href屬性<br />
*#在defs段落中定義漸層,並賦予id<br />
*#用fill='url(#某id)'屬性來引用既有的漸層定義<br />
*linearGradient 線性漸層定義語法說明:<br />
*#漸層標籤中的 100%，指的是整個圖形<br />
*#其中的 id 屬性定出漸層名稱<br />
*#由x1,y1,x2,y2四個屬性決定漸層範圍,以及水平,垂直或角形漸層,四個屬性都以百分比表示：<br />
*##x1,y1,x2,y2屬性決定漸層開始和結束位置,x1,x2以圖形的寬度為準,y1,y2以圖形的高度為準<br />
*##當y1和y2相等,而x1和x2不同時,可創建水平漸層<br />
*##當x1和x2相等,而y1和y2不同時,可創建垂直漸層<br />
*##當x1和x2不同,且y1和y2不同時,可創建角形漸層<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/h.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/v.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/arrow.svg<br />
<br />
====(2)☆放射漸層☆====<br />
*radialGradient 放設漸層定義語法說明:<br />
*#漸層範圍：由cx,cy,r三個屬性決定,三個屬性都以百分比表示,漸層範圍是一個圓或橢圓<br />
<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball1.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball2.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball3.svg<br />
<br />
===八、♪柔焦濾鏡♪===<br />
===九、♪path♪===<br />
===十、♪動畫♪===<br />
<br />
==♡Inkscape♡==<br />
<br />
==♡GIS♡==<br />
*何謂 GIS ？<br />
*兩種主要的 GIS 。<br />
*基本框架。<br />
*marks<br />
*overlays<br />
*google 我的地圖<br />
*結合我的地圖與 GIS<br />
<br />
==♡圖形計算機♡==<br />
*取得 svgdraw.php<br />
*基本框架<br />
*繪製基本圖形<br />
*函式繪圖<br />
*google 圖形計算機</div>
蕭卉均
http://well-being-ng.net/wiki1231/index.php?title=%E8%A8%8E%E8%AB%96:%E8%B3%87%E8%A8%8A%E5%9F%BA%E7%A4%8E%E6%87%89%E7%94%A8/%E8%95%AD%E5%8D%89%E5%9D%87&diff=37900
討論:資訊基礎應用/蕭卉均
2018-01-16T09:30:47Z
<p>蕭卉均：/* GIS */</p>
<hr />
<div>=ღ完整筆記ღ=<br />
==♡環境&工具♡==<br />
===1.♪環境♪===<br />
*伺服器與域名,伺服器DS216,網址6years.jendo.org<br />
*wifi,區網wifi：jendod&jendoa<br />
*網站空間,瀏覽器：firefox,優先於chrome,盡量不用IE<br />
*wiki上的個人頁,filezilla→開啟filezilla,並新增一個站台叫♕DS216+(共用)♕→主機設定:6years.jendo.org→協定:SFTP→使用者:共用→字碼集:UTF-8→連線,然後到♕home/www♕→建自己帳號的連線→可用的文字編輯器,如emeditor→連結filezilla&慣用的文字編輯器：♕編輯/設定/檔案編輯♕，選用♕使用自訂編輯器♕&♕總是使用預設的編輯器♕，並指定編輯器的路徑<br />
*課後重點筆記:<br />
*#table是開始,/table是結束<br />
*#IP:IP4,最多表達到255字,IPV4一般網頁使用,IP6,物聯網用<br />
*#物聯網:簡單說一切事物,得失相兼<br />
*#域名:域名伺服器(HOSTS)<br />
*#AI(人工智慧)<br />
*#big5,早期,只有繁體中文<br />
*#UTF-8,萬國碼<br />
<br />
===2.♪工具與設定♪===<br />
*firefox:Mozilla Firefox（簡稱Firefox）,中文俗稱火狐（中國大陸官方有使用但未註冊為商標）,是一個自由及開放原始碼的網頁瀏覽器,由Mozilla基金會及其子公司Mozilla公司開發<br />
*filezilla:ileZilla是一種快速&可信賴的FTP用戶端以及伺服器端開放原始碼程式,具有多種特色&直覺的介面,FileZilla在2003年11月獲選為SourceForge.net當月最佳推薦專案<br />
*EmEditor:EmEditor是江村軟體公司（Emurasoft,坐落於美國華盛頓州）所開發的一款在Windows平台上運行的文字編輯程式,EmEditor以運作輕巧&敏捷而又功能強大&豐富著稱而得到許多用戶的好評<br />
<br />
==♡HTML&HTTP♡==<br />
*發有者及發明年代:於西元1993年,W3C&WHATWG開發<br />
*HTML:超文件標示語言（英語：HyperText Markup Language,簡稱：HTML）是一種用於建立網頁的標準標示語言,HTML是一種基礎技術常與CSS&JavaScript一起被眾多網站用於設計令人賞心悅目的網頁&網頁應用程式以及行動應用程式的使用者介面<br />
*HTTP:超文本傳輸協定（英文：HyperText Transfer Protocol,縮寫：HTTP）是一種用於分佈式&協作式和超媒體資訊系統的應用層協議,HTTP是全球資訊網的資料通訊的基礎<br />
*xml:可延伸標記式語言（英語：Extensible Markup Language,簡稱：XML）是一種標記式語言,標記指電腦所能理解的資訊符號,通過此種標記,電腦之間可以處理包含各種資訊的文章等<br />
*課後筆記:<br />
*#筆記網頁建設:登入後搜尋{資訊基礎應用/蕭卉均}→點一下，開始編輯→編輯完點儲存頁面<br />
*#色碼表:https://www.toodoo.com/db/color.html<br />
*通訊錄:<br />
*<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
<table class='nicetable'><br />
<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
</table><br />
<br />
==♡ wiki ♡==<br />
*何謂wiki:Wiki是一種在全球資訊網上開放且可供多人協同創作的超文字系統,由沃德·坎寧安於1995年首先開發,沃德·坎寧安將wiki定義為「一種允許一群用戶用簡單的描述來建立和連線一組網頁的社會計算系統」<br />
*CC授權:創用CC授權條款（英語：Creative Commons license,簡稱CC授權）是一種公共版權授權條款,其允許分發受版權保護的作品,一個創用CC授權用於一個作者想給他人分享&使用&甚至創作衍生作品的權利<br />
*wiki語法:http://jendo.synology.me/wiki1231/index.php?title=Wiki_%E5%85%A5%E9%96%80%E8%AA%9E%E6%B3%95<br />
*wiki的word適應:履歷表<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E5%B1%A5%E6%AD%B7%E8%A1%A8.html<br />
==♡CSS♡==<br />
*何謂CSS:層疊樣式表（英語：Cascading Style Sheets,簡寫CSS）又稱串樣式列表&級聯樣式表&串接樣式表&層疊樣式表&階層式樣式表,一種用來為結構化文件（如HTML文件或XML應用）添加樣式（字型、間距和顏色等）的電腦語言,由W3C定義和維護,目前最新版本是CSS2.1，為W3C的推薦標準,CSS3現在已被大部分現代瀏覽器支援,而下一版的CSS4仍在開發中<br />
*用法:限制者才有標章,不限制者沒有標章<br />
*重要語法:<br />
*#Attribution(BY):姓名標示,您（使用者）可以複製&發行&展覽&表演&放映&廣播或通過資訊網路傳播本作品；您必須按照作者或者授權人指定的方式對作品進行姓名標示<br />
*#NonCommercial(NC):非商業性使用,您可以自由複製&散布&展示及演出本作品；您不得為商業目的而使用本作品<br />
*#NoDerivs(ND):禁止改作,您可以自由複製&散布&展示及演出本作品；您不得改變&轉變或更改本作品<br />
*#ShareAlike(SA):相同方式分享,您可以自由複製&散布&展示及演出本作品；若您改變&轉變或更改本作品,僅在遵守與本作品相同的授權條款下,您才能散布由本作品產生的衍生作品<br />
<br />
==♡SVG♡==<br />
===1.♪概述♪===<br />
*何謂SVG:可縮放向量圖形（英語：Scalable Vector Graphics,SVG）是一種基於可延伸標記式語言（XML）,用於描述二維向量圖形的圖形格式,SVG由W3C制定,是一個開放標準<br />
*點陣圖與向量圖的比較(含附檔名):<br />
*#SVG:又為向量圖,特色,放大不毛邊,https://upload.wikimedia.org/wikipedia/commons/5/53/Skull_and_crossbones.svg<br />
*#JPG:又名JEPG,失真,壓縮,http://wportfolio.wzu.edu.tw/blog/attach/995/27995/89/bf_51402_8868906_99219_2yzUdJnLy0AsZ9VdwaKNCA.jpg<br />
*#PNG:不失真,公開格式,https://s-media-cache-ak0.pinimg.com/originals/96/94/ef/9694ef6ecfd562c83e7a445ee9ee19ba.png<br />
*#GIF:可動畫,256色,https://2.bp.blogspot.com/-Ra6UuzwDGQg/WDfdq3X1GjI/AAAAAAAD0gc/MfVErIwBENYRH_DvvFsnThfYp-zVxugEgCLcB/s1600/AS000946_02.gif<br />
*SVG格式具有以下優點:<br />
*#圖檔可讀,易於修改和編輯（理論上如此,但實際上卻是因為各種不同的SVG檔編輯器而可能儲存成不易解讀的SVG檔案）<br />
*#與現有技術可以互動融合,例如,SVG技術本身的動態部分（包括時序控制和動畫）就是基於SMIL標準,另外,SVG檔案還可嵌入JavaScript（嚴格地說，應該是ECMAScript）指令碼來控制SVG物件<br />
*#SVG圖形格式可以方便的建立文字索引,從而實現基於內容的圖像搜尋<br />
*#SVG圖形格式支援多種濾鏡和特殊效果,在不改變圖像內容的前提下可以實現點陣圖格式中類似文字陰影的效果<br />
*#SVG圖形格式可以用來動態生成圖形,例如,可用SVG動態生成具有互動功能的地圖,嵌入網頁中,並顯示給終端用戶<br />
*SVG格式具有以下缺點：<br />
*#如何和已經占有重要市場份額的向量圖形格式Adobe Animate競爭的問題,事實上,Adobe Animate在Flash CC 2014版及以後的版本就都支援直接匯出SVG檔案了<br />
*#SVG的本地執行環境下的廠家支援程度<br />
*#由於原始的SVG檔是遵從XML語法,導致資料採用未壓縮的方式存放,因此相較於其他的向量圖形格式,同樣的檔案內容會比其他的檔案格式稍大,Adobe因此使用gzip壓縮開發出壓縮的SVG檔格式,附檔名為 .svgz, 但此種檔案格式除了Adobe旗下的軟體以外,未被廣泛支援使用<br />
*#舊版的SVG Viewer無法正確顯示出使用新版SVG格式的向量圖形<br />
<br />
===2.♪基本架構♪===<br />
*基本架構:SVG允許3種圖形物件類型：向量圖形,柵格圖像以及文字,圖形物件——包括PNG&JPEG這些柵格圖像——能夠被編組&設計&轉換及整合進先前的彩現物件中,文字可以在任何適用於應用程式的XML命名空間之內,從而提高SVG圖形的搜尋能力和無障礙性,SVG提供的功能集涵蓋了巢狀轉換&裁剪路徑&Alpha通道&濾鏡效果&模板物件以及可延伸性,SVG嚴格遵從XML語法,並用文字格式的描述性語言來描述圖像內容,因此是一種和圖像解析度無關的向量圖形格式,SVG可以實現動態和互動功能,在DOM模型的基礎上,SVG開發設計人員可以利用ECMAScript或者SMIL來進行時序控制或物件的操縱,SVG雖然是文字格式,但是SVG支援利用gzip壓縮演算法減少檔案尺寸,壓縮後的檔案通常用被稱為「SVGZ檔案」<br />
*SVG主要支援以下幾種顯示物件：<br />
*#向量顯示物件,基本向量顯示物件包括矩形&圓&橢圓&多邊形&直線&任意曲線等<br />
*#嵌入式外部圖像,包括PNG&JPEG&SVG等<br />
*#文字物件<br />
*基本樣式:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/arrow.svg<br />
*基本圖形:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/bearFace.svg<br />
<br />
===3.♪文字♪===<br />
*TEXT<br />
*#在「text」標籤開始與結束之間夾字,可用中英文,而使用「屬性」來規定文字的表現,所有的屬性都可以改用樣式來表達<br />
*#可用中文字形：<br />
*##屬性dx和dy基於前一個字的位置去做變化：值可為'10,20,30,40'，字的距離一個比一個更遠<br />
*##屬性x和y標示字的起點：值可為'10,20,30,40'，表示每個字的x或y座標<br />
*##屬性fill控制填入字的顏色,預設黑色<br />
*##屬性stroke控制字描框的顏色,預設 none<br />
*##屬性rotate='30'順時鐘轉30°。rotate='30,60,90,120,150,180,210'指定每個字的轉動角度<br />
*##用style控制字體&字形&尺寸,但顏色是用fill不是用color <br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/text.svg<br />
<br />
===4.♪位移&旋轉&縮放&歪斜♪===<br />
*相關屬性說明：<br />
*#平移變換(translate)：transform="translate(x,y)",即新坐標系的原點在原坐標系的(x,y)處,坐標軸的方向不變<br />
*#旋轉變換(rotate)：transform="rotate(angle cx,cy)",angle代表旋轉角度,預設單位是「度」,順時針為正,逆時針為負,(cx,cy)是旋轉中心所在的坐標,若省略旋轉中心坐標,則預設值是(0,0)<br />
*#伸縮變換(scale)：transform="scale(sx,sy)",sx,sy分別代表x軸方向和y方向拉伸或縮小的比例因子,拉伸：大於1；縮小：小於1,若省略sy，即sy=sx，作等比例縮放<br />
*#歪斜變換(skew)：transform='skewX(x-angle)'或transform='skewY(y-angle)',x-angle,y-angle分別代表沿x軸和y軸歪斜的角度<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/transform.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/bearFace.svg<br />
<br />
===5.♪群組♪===<br />
*步驟:<br />
*#先添加svg標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，其中才有href屬性的定義<br />
*#在defs段落中定義圖形，並賦予id<br />
*#用<use xlink:href='#某id'/>來引用既有的定義<br />
<br />
===6.♪定義一次,引用多次♪===<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/uses.svg<br />
<br />
===7.♪漸層♪===<br />
*漸層和濾鏡如果取中文名稱,瀏覽器還認得,但Inkscape和線上轉檔軟體就會不認得<br />
*「漸層」工具可以在多種顏色之間建立漸層混合,您可以從預設漸層填色中選擇,或是建立自己的漸層填色<br />
*線性漸層沿著直線從起點到終點建立陰影<br />
*放射性漸層沿著圓形圖樣從起點到終點建立陰影<br />
*尖角漸層繞著起點以逆時針掃射的方式建立陰影<br />
*反射性漸層在起點的一側建立相同的鏡像線性漸層<br />
*菱形漸層從菱形圖樣的中央往外建立陰影<br />
====(1)☆線性漸層☆====<br />
*步驟：<br />
*#不用添加svg標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，不會用到href屬性<br />
*#在defs段落中定義漸層,並賦予id<br />
*#用fill='url(#某id)'屬性來引用既有的漸層定義<br />
*linearGradient 線性漸層定義語法說明:<br />
*#漸層標籤中的 100%，指的是整個圖形<br />
*#其中的 id 屬性定出漸層名稱<br />
*#由x1,y1,x2,y2四個屬性決定漸層範圍,以及水平,垂直或角形漸層,四個屬性都以百分比表示：<br />
*##x1,y1,x2,y2屬性決定漸層開始和結束位置,x1,x2以圖形的寬度為準,y1,y2以圖形的高度為準<br />
*##當y1和y2相等,而x1和x2不同時,可創建水平漸層<br />
*##當x1和x2相等,而y1和y2不同時,可創建垂直漸層<br />
*##當x1和x2不同,且y1和y2不同時,可創建角形漸層<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/h.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/v.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/arrow.svg<br />
<br />
====(2)☆放射漸層☆====<br />
*radialGradient 放設漸層定義語法說明:<br />
*#漸層範圍：由cx,cy,r三個屬性決定,三個屬性都以百分比表示,漸層範圍是一個圓或橢圓<br />
<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball1.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball2.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball3.svg<br />
<br />
===八、♪柔焦濾鏡♪===<br />
===九、♪path♪===<br />
===十、♪動畫♪===<br />
<br />
==♡Inkscape♡==<br />
<br />
==♡GIS♡==<br />
*何謂 GIS ？<br />
*兩種主要的 GIS 。<br />
*基本框架。<br />
*marks<br />
*overlays<br />
*google 我的地圖<br />
*結合我的地圖與 GIS<br />
<br />
==圖形計算機==<br />
*取得 svgdraw.php<br />
*基本框架<br />
*繪製基本圖形<br />
*函式繪圖<br />
*google 圖形計算機</div>
蕭卉均
http://well-being-ng.net/wiki1231/index.php?title=%E8%A8%8E%E8%AB%96:%E8%B3%87%E8%A8%8A%E5%9F%BA%E7%A4%8E%E6%87%89%E7%94%A8/%E8%95%AD%E5%8D%89%E5%9D%87&diff=37899
討論:資訊基礎應用/蕭卉均
2018-01-16T09:30:23Z
<p>蕭卉均：/* Inkscape */</p>
<hr />
<div>=ღ完整筆記ღ=<br />
==♡環境&工具♡==<br />
===1.♪環境♪===<br />
*伺服器與域名,伺服器DS216,網址6years.jendo.org<br />
*wifi,區網wifi：jendod&jendoa<br />
*網站空間,瀏覽器：firefox,優先於chrome,盡量不用IE<br />
*wiki上的個人頁,filezilla→開啟filezilla,並新增一個站台叫♕DS216+(共用)♕→主機設定:6years.jendo.org→協定:SFTP→使用者:共用→字碼集:UTF-8→連線,然後到♕home/www♕→建自己帳號的連線→可用的文字編輯器,如emeditor→連結filezilla&慣用的文字編輯器：♕編輯/設定/檔案編輯♕，選用♕使用自訂編輯器♕&♕總是使用預設的編輯器♕，並指定編輯器的路徑<br />
*課後重點筆記:<br />
*#table是開始,/table是結束<br />
*#IP:IP4,最多表達到255字,IPV4一般網頁使用,IP6,物聯網用<br />
*#物聯網:簡單說一切事物,得失相兼<br />
*#域名:域名伺服器(HOSTS)<br />
*#AI(人工智慧)<br />
*#big5,早期,只有繁體中文<br />
*#UTF-8,萬國碼<br />
<br />
===2.♪工具與設定♪===<br />
*firefox:Mozilla Firefox（簡稱Firefox）,中文俗稱火狐（中國大陸官方有使用但未註冊為商標）,是一個自由及開放原始碼的網頁瀏覽器,由Mozilla基金會及其子公司Mozilla公司開發<br />
*filezilla:ileZilla是一種快速&可信賴的FTP用戶端以及伺服器端開放原始碼程式,具有多種特色&直覺的介面,FileZilla在2003年11月獲選為SourceForge.net當月最佳推薦專案<br />
*EmEditor:EmEditor是江村軟體公司（Emurasoft,坐落於美國華盛頓州）所開發的一款在Windows平台上運行的文字編輯程式,EmEditor以運作輕巧&敏捷而又功能強大&豐富著稱而得到許多用戶的好評<br />
<br />
==♡HTML&HTTP♡==<br />
*發有者及發明年代:於西元1993年,W3C&WHATWG開發<br />
*HTML:超文件標示語言（英語：HyperText Markup Language,簡稱：HTML）是一種用於建立網頁的標準標示語言,HTML是一種基礎技術常與CSS&JavaScript一起被眾多網站用於設計令人賞心悅目的網頁&網頁應用程式以及行動應用程式的使用者介面<br />
*HTTP:超文本傳輸協定（英文：HyperText Transfer Protocol,縮寫：HTTP）是一種用於分佈式&協作式和超媒體資訊系統的應用層協議,HTTP是全球資訊網的資料通訊的基礎<br />
*xml:可延伸標記式語言（英語：Extensible Markup Language,簡稱：XML）是一種標記式語言,標記指電腦所能理解的資訊符號,通過此種標記,電腦之間可以處理包含各種資訊的文章等<br />
*課後筆記:<br />
*#筆記網頁建設:登入後搜尋{資訊基礎應用/蕭卉均}→點一下，開始編輯→編輯完點儲存頁面<br />
*#色碼表:https://www.toodoo.com/db/color.html<br />
*通訊錄:<br />
*<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
<table class='nicetable'><br />
<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
</table><br />
<br />
==♡ wiki ♡==<br />
*何謂wiki:Wiki是一種在全球資訊網上開放且可供多人協同創作的超文字系統,由沃德·坎寧安於1995年首先開發,沃德·坎寧安將wiki定義為「一種允許一群用戶用簡單的描述來建立和連線一組網頁的社會計算系統」<br />
*CC授權:創用CC授權條款（英語：Creative Commons license,簡稱CC授權）是一種公共版權授權條款,其允許分發受版權保護的作品,一個創用CC授權用於一個作者想給他人分享&使用&甚至創作衍生作品的權利<br />
*wiki語法:http://jendo.synology.me/wiki1231/index.php?title=Wiki_%E5%85%A5%E9%96%80%E8%AA%9E%E6%B3%95<br />
*wiki的word適應:履歷表<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E5%B1%A5%E6%AD%B7%E8%A1%A8.html<br />
==♡CSS♡==<br />
*何謂CSS:層疊樣式表（英語：Cascading Style Sheets,簡寫CSS）又稱串樣式列表&級聯樣式表&串接樣式表&層疊樣式表&階層式樣式表,一種用來為結構化文件（如HTML文件或XML應用）添加樣式（字型、間距和顏色等）的電腦語言,由W3C定義和維護,目前最新版本是CSS2.1，為W3C的推薦標準,CSS3現在已被大部分現代瀏覽器支援,而下一版的CSS4仍在開發中<br />
*用法:限制者才有標章,不限制者沒有標章<br />
*重要語法:<br />
*#Attribution(BY):姓名標示,您（使用者）可以複製&發行&展覽&表演&放映&廣播或通過資訊網路傳播本作品；您必須按照作者或者授權人指定的方式對作品進行姓名標示<br />
*#NonCommercial(NC):非商業性使用,您可以自由複製&散布&展示及演出本作品；您不得為商業目的而使用本作品<br />
*#NoDerivs(ND):禁止改作,您可以自由複製&散布&展示及演出本作品；您不得改變&轉變或更改本作品<br />
*#ShareAlike(SA):相同方式分享,您可以自由複製&散布&展示及演出本作品；若您改變&轉變或更改本作品,僅在遵守與本作品相同的授權條款下,您才能散布由本作品產生的衍生作品<br />
<br />
==♡SVG♡==<br />
===1.♪概述♪===<br />
*何謂SVG:可縮放向量圖形（英語：Scalable Vector Graphics,SVG）是一種基於可延伸標記式語言（XML）,用於描述二維向量圖形的圖形格式,SVG由W3C制定,是一個開放標準<br />
*點陣圖與向量圖的比較(含附檔名):<br />
*#SVG:又為向量圖,特色,放大不毛邊,https://upload.wikimedia.org/wikipedia/commons/5/53/Skull_and_crossbones.svg<br />
*#JPG:又名JEPG,失真,壓縮,http://wportfolio.wzu.edu.tw/blog/attach/995/27995/89/bf_51402_8868906_99219_2yzUdJnLy0AsZ9VdwaKNCA.jpg<br />
*#PNG:不失真,公開格式,https://s-media-cache-ak0.pinimg.com/originals/96/94/ef/9694ef6ecfd562c83e7a445ee9ee19ba.png<br />
*#GIF:可動畫,256色,https://2.bp.blogspot.com/-Ra6UuzwDGQg/WDfdq3X1GjI/AAAAAAAD0gc/MfVErIwBENYRH_DvvFsnThfYp-zVxugEgCLcB/s1600/AS000946_02.gif<br />
*SVG格式具有以下優點:<br />
*#圖檔可讀,易於修改和編輯（理論上如此,但實際上卻是因為各種不同的SVG檔編輯器而可能儲存成不易解讀的SVG檔案）<br />
*#與現有技術可以互動融合,例如,SVG技術本身的動態部分（包括時序控制和動畫）就是基於SMIL標準,另外,SVG檔案還可嵌入JavaScript（嚴格地說，應該是ECMAScript）指令碼來控制SVG物件<br />
*#SVG圖形格式可以方便的建立文字索引,從而實現基於內容的圖像搜尋<br />
*#SVG圖形格式支援多種濾鏡和特殊效果,在不改變圖像內容的前提下可以實現點陣圖格式中類似文字陰影的效果<br />
*#SVG圖形格式可以用來動態生成圖形,例如,可用SVG動態生成具有互動功能的地圖,嵌入網頁中,並顯示給終端用戶<br />
*SVG格式具有以下缺點：<br />
*#如何和已經占有重要市場份額的向量圖形格式Adobe Animate競爭的問題,事實上,Adobe Animate在Flash CC 2014版及以後的版本就都支援直接匯出SVG檔案了<br />
*#SVG的本地執行環境下的廠家支援程度<br />
*#由於原始的SVG檔是遵從XML語法,導致資料採用未壓縮的方式存放,因此相較於其他的向量圖形格式,同樣的檔案內容會比其他的檔案格式稍大,Adobe因此使用gzip壓縮開發出壓縮的SVG檔格式,附檔名為 .svgz, 但此種檔案格式除了Adobe旗下的軟體以外,未被廣泛支援使用<br />
*#舊版的SVG Viewer無法正確顯示出使用新版SVG格式的向量圖形<br />
<br />
===2.♪基本架構♪===<br />
*基本架構:SVG允許3種圖形物件類型：向量圖形,柵格圖像以及文字,圖形物件——包括PNG&JPEG這些柵格圖像——能夠被編組&設計&轉換及整合進先前的彩現物件中,文字可以在任何適用於應用程式的XML命名空間之內,從而提高SVG圖形的搜尋能力和無障礙性,SVG提供的功能集涵蓋了巢狀轉換&裁剪路徑&Alpha通道&濾鏡效果&模板物件以及可延伸性,SVG嚴格遵從XML語法,並用文字格式的描述性語言來描述圖像內容,因此是一種和圖像解析度無關的向量圖形格式,SVG可以實現動態和互動功能,在DOM模型的基礎上,SVG開發設計人員可以利用ECMAScript或者SMIL來進行時序控制或物件的操縱,SVG雖然是文字格式,但是SVG支援利用gzip壓縮演算法減少檔案尺寸,壓縮後的檔案通常用被稱為「SVGZ檔案」<br />
*SVG主要支援以下幾種顯示物件：<br />
*#向量顯示物件,基本向量顯示物件包括矩形&圓&橢圓&多邊形&直線&任意曲線等<br />
*#嵌入式外部圖像,包括PNG&JPEG&SVG等<br />
*#文字物件<br />
*基本樣式:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/arrow.svg<br />
*基本圖形:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/bearFace.svg<br />
<br />
===3.♪文字♪===<br />
*TEXT<br />
*#在「text」標籤開始與結束之間夾字,可用中英文,而使用「屬性」來規定文字的表現,所有的屬性都可以改用樣式來表達<br />
*#可用中文字形：<br />
*##屬性dx和dy基於前一個字的位置去做變化：值可為'10,20,30,40'，字的距離一個比一個更遠<br />
*##屬性x和y標示字的起點：值可為'10,20,30,40'，表示每個字的x或y座標<br />
*##屬性fill控制填入字的顏色,預設黑色<br />
*##屬性stroke控制字描框的顏色,預設 none<br />
*##屬性rotate='30'順時鐘轉30°。rotate='30,60,90,120,150,180,210'指定每個字的轉動角度<br />
*##用style控制字體&字形&尺寸,但顏色是用fill不是用color <br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/text.svg<br />
<br />
===4.♪位移&旋轉&縮放&歪斜♪===<br />
*相關屬性說明：<br />
*#平移變換(translate)：transform="translate(x,y)",即新坐標系的原點在原坐標系的(x,y)處,坐標軸的方向不變<br />
*#旋轉變換(rotate)：transform="rotate(angle cx,cy)",angle代表旋轉角度,預設單位是「度」,順時針為正,逆時針為負,(cx,cy)是旋轉中心所在的坐標,若省略旋轉中心坐標,則預設值是(0,0)<br />
*#伸縮變換(scale)：transform="scale(sx,sy)",sx,sy分別代表x軸方向和y方向拉伸或縮小的比例因子,拉伸：大於1；縮小：小於1,若省略sy，即sy=sx，作等比例縮放<br />
*#歪斜變換(skew)：transform='skewX(x-angle)'或transform='skewY(y-angle)',x-angle,y-angle分別代表沿x軸和y軸歪斜的角度<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/transform.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/bearFace.svg<br />
<br />
===5.♪群組♪===<br />
*步驟:<br />
*#先添加svg標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，其中才有href屬性的定義<br />
*#在defs段落中定義圖形，並賦予id<br />
*#用<use xlink:href='#某id'/>來引用既有的定義<br />
<br />
===6.♪定義一次,引用多次♪===<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/uses.svg<br />
<br />
===7.♪漸層♪===<br />
*漸層和濾鏡如果取中文名稱,瀏覽器還認得,但Inkscape和線上轉檔軟體就會不認得<br />
*「漸層」工具可以在多種顏色之間建立漸層混合,您可以從預設漸層填色中選擇,或是建立自己的漸層填色<br />
*線性漸層沿著直線從起點到終點建立陰影<br />
*放射性漸層沿著圓形圖樣從起點到終點建立陰影<br />
*尖角漸層繞著起點以逆時針掃射的方式建立陰影<br />
*反射性漸層在起點的一側建立相同的鏡像線性漸層<br />
*菱形漸層從菱形圖樣的中央往外建立陰影<br />
====(1)☆線性漸層☆====<br />
*步驟：<br />
*#不用添加svg標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，不會用到href屬性<br />
*#在defs段落中定義漸層,並賦予id<br />
*#用fill='url(#某id)'屬性來引用既有的漸層定義<br />
*linearGradient 線性漸層定義語法說明:<br />
*#漸層標籤中的 100%，指的是整個圖形<br />
*#其中的 id 屬性定出漸層名稱<br />
*#由x1,y1,x2,y2四個屬性決定漸層範圍,以及水平,垂直或角形漸層,四個屬性都以百分比表示：<br />
*##x1,y1,x2,y2屬性決定漸層開始和結束位置,x1,x2以圖形的寬度為準,y1,y2以圖形的高度為準<br />
*##當y1和y2相等,而x1和x2不同時,可創建水平漸層<br />
*##當x1和x2相等,而y1和y2不同時,可創建垂直漸層<br />
*##當x1和x2不同,且y1和y2不同時,可創建角形漸層<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/h.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/v.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/arrow.svg<br />
<br />
====(2)☆放射漸層☆====<br />
*radialGradient 放設漸層定義語法說明:<br />
*#漸層範圍：由cx,cy,r三個屬性決定,三個屬性都以百分比表示,漸層範圍是一個圓或橢圓<br />
<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball1.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball2.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball3.svg<br />
<br />
===八、♪柔焦濾鏡♪===<br />
===九、♪path♪===<br />
===十、♪動畫♪===<br />
<br />
==♡Inkscape♡==<br />
<br />
==GIS==<br />
*何謂 GIS ？<br />
*兩種主要的 GIS 。<br />
*基本框架。<br />
*marks<br />
*overlays<br />
*google 我的地圖<br />
*結合我的地圖與 GIS<br />
==圖形計算機==<br />
*取得 svgdraw.php<br />
*基本框架<br />
*繪製基本圖形<br />
*函式繪圖<br />
*google 圖形計算機</div>
蕭卉均
http://well-being-ng.net/wiki1231/index.php?title=%E8%A8%8E%E8%AB%96:%E8%B3%87%E8%A8%8A%E5%9F%BA%E7%A4%8E%E6%87%89%E7%94%A8/%E8%95%AD%E5%8D%89%E5%9D%87&diff=37898
討論:資訊基礎應用/蕭卉均
2018-01-16T09:29:44Z
<p>蕭卉均：/* ღ完整筆記ღ */</p>
<hr />
<div>=ღ完整筆記ღ=<br />
==♡環境&工具♡==<br />
===1.♪環境♪===<br />
*伺服器與域名,伺服器DS216,網址6years.jendo.org<br />
*wifi,區網wifi：jendod&jendoa<br />
*網站空間,瀏覽器：firefox,優先於chrome,盡量不用IE<br />
*wiki上的個人頁,filezilla→開啟filezilla,並新增一個站台叫♕DS216+(共用)♕→主機設定:6years.jendo.org→協定:SFTP→使用者:共用→字碼集:UTF-8→連線,然後到♕home/www♕→建自己帳號的連線→可用的文字編輯器,如emeditor→連結filezilla&慣用的文字編輯器：♕編輯/設定/檔案編輯♕，選用♕使用自訂編輯器♕&♕總是使用預設的編輯器♕，並指定編輯器的路徑<br />
*課後重點筆記:<br />
*#table是開始,/table是結束<br />
*#IP:IP4,最多表達到255字,IPV4一般網頁使用,IP6,物聯網用<br />
*#物聯網:簡單說一切事物,得失相兼<br />
*#域名:域名伺服器(HOSTS)<br />
*#AI(人工智慧)<br />
*#big5,早期,只有繁體中文<br />
*#UTF-8,萬國碼<br />
<br />
===2.♪工具與設定♪===<br />
*firefox:Mozilla Firefox（簡稱Firefox）,中文俗稱火狐（中國大陸官方有使用但未註冊為商標）,是一個自由及開放原始碼的網頁瀏覽器,由Mozilla基金會及其子公司Mozilla公司開發<br />
*filezilla:ileZilla是一種快速&可信賴的FTP用戶端以及伺服器端開放原始碼程式,具有多種特色&直覺的介面,FileZilla在2003年11月獲選為SourceForge.net當月最佳推薦專案<br />
*EmEditor:EmEditor是江村軟體公司（Emurasoft,坐落於美國華盛頓州）所開發的一款在Windows平台上運行的文字編輯程式,EmEditor以運作輕巧&敏捷而又功能強大&豐富著稱而得到許多用戶的好評<br />
<br />
==♡HTML&HTTP♡==<br />
*發有者及發明年代:於西元1993年,W3C&WHATWG開發<br />
*HTML:超文件標示語言（英語：HyperText Markup Language,簡稱：HTML）是一種用於建立網頁的標準標示語言,HTML是一種基礎技術常與CSS&JavaScript一起被眾多網站用於設計令人賞心悅目的網頁&網頁應用程式以及行動應用程式的使用者介面<br />
*HTTP:超文本傳輸協定（英文：HyperText Transfer Protocol,縮寫：HTTP）是一種用於分佈式&協作式和超媒體資訊系統的應用層協議,HTTP是全球資訊網的資料通訊的基礎<br />
*xml:可延伸標記式語言（英語：Extensible Markup Language,簡稱：XML）是一種標記式語言,標記指電腦所能理解的資訊符號,通過此種標記,電腦之間可以處理包含各種資訊的文章等<br />
*課後筆記:<br />
*#筆記網頁建設:登入後搜尋{資訊基礎應用/蕭卉均}→點一下，開始編輯→編輯完點儲存頁面<br />
*#色碼表:https://www.toodoo.com/db/color.html<br />
*通訊錄:<br />
*<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
<table class='nicetable'><br />
<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
</table><br />
<br />
==♡ wiki ♡==<br />
*何謂wiki:Wiki是一種在全球資訊網上開放且可供多人協同創作的超文字系統,由沃德·坎寧安於1995年首先開發,沃德·坎寧安將wiki定義為「一種允許一群用戶用簡單的描述來建立和連線一組網頁的社會計算系統」<br />
*CC授權:創用CC授權條款（英語：Creative Commons license,簡稱CC授權）是一種公共版權授權條款,其允許分發受版權保護的作品,一個創用CC授權用於一個作者想給他人分享&使用&甚至創作衍生作品的權利<br />
*wiki語法:http://jendo.synology.me/wiki1231/index.php?title=Wiki_%E5%85%A5%E9%96%80%E8%AA%9E%E6%B3%95<br />
*wiki的word適應:履歷表<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E5%B1%A5%E6%AD%B7%E8%A1%A8.html<br />
==♡CSS♡==<br />
*何謂CSS:層疊樣式表（英語：Cascading Style Sheets,簡寫CSS）又稱串樣式列表&級聯樣式表&串接樣式表&層疊樣式表&階層式樣式表,一種用來為結構化文件（如HTML文件或XML應用）添加樣式（字型、間距和顏色等）的電腦語言,由W3C定義和維護,目前最新版本是CSS2.1，為W3C的推薦標準,CSS3現在已被大部分現代瀏覽器支援,而下一版的CSS4仍在開發中<br />
*用法:限制者才有標章,不限制者沒有標章<br />
*重要語法:<br />
*#Attribution(BY):姓名標示,您（使用者）可以複製&發行&展覽&表演&放映&廣播或通過資訊網路傳播本作品；您必須按照作者或者授權人指定的方式對作品進行姓名標示<br />
*#NonCommercial(NC):非商業性使用,您可以自由複製&散布&展示及演出本作品；您不得為商業目的而使用本作品<br />
*#NoDerivs(ND):禁止改作,您可以自由複製&散布&展示及演出本作品；您不得改變&轉變或更改本作品<br />
*#ShareAlike(SA):相同方式分享,您可以自由複製&散布&展示及演出本作品；若您改變&轉變或更改本作品,僅在遵守與本作品相同的授權條款下,您才能散布由本作品產生的衍生作品<br />
<br />
==♡SVG♡==<br />
===1.♪概述♪===<br />
*何謂SVG:可縮放向量圖形（英語：Scalable Vector Graphics,SVG）是一種基於可延伸標記式語言（XML）,用於描述二維向量圖形的圖形格式,SVG由W3C制定,是一個開放標準<br />
*點陣圖與向量圖的比較(含附檔名):<br />
*#SVG:又為向量圖,特色,放大不毛邊,https://upload.wikimedia.org/wikipedia/commons/5/53/Skull_and_crossbones.svg<br />
*#JPG:又名JEPG,失真,壓縮,http://wportfolio.wzu.edu.tw/blog/attach/995/27995/89/bf_51402_8868906_99219_2yzUdJnLy0AsZ9VdwaKNCA.jpg<br />
*#PNG:不失真,公開格式,https://s-media-cache-ak0.pinimg.com/originals/96/94/ef/9694ef6ecfd562c83e7a445ee9ee19ba.png<br />
*#GIF:可動畫,256色,https://2.bp.blogspot.com/-Ra6UuzwDGQg/WDfdq3X1GjI/AAAAAAAD0gc/MfVErIwBENYRH_DvvFsnThfYp-zVxugEgCLcB/s1600/AS000946_02.gif<br />
*SVG格式具有以下優點:<br />
*#圖檔可讀,易於修改和編輯（理論上如此,但實際上卻是因為各種不同的SVG檔編輯器而可能儲存成不易解讀的SVG檔案）<br />
*#與現有技術可以互動融合,例如,SVG技術本身的動態部分（包括時序控制和動畫）就是基於SMIL標準,另外,SVG檔案還可嵌入JavaScript（嚴格地說，應該是ECMAScript）指令碼來控制SVG物件<br />
*#SVG圖形格式可以方便的建立文字索引,從而實現基於內容的圖像搜尋<br />
*#SVG圖形格式支援多種濾鏡和特殊效果,在不改變圖像內容的前提下可以實現點陣圖格式中類似文字陰影的效果<br />
*#SVG圖形格式可以用來動態生成圖形,例如,可用SVG動態生成具有互動功能的地圖,嵌入網頁中,並顯示給終端用戶<br />
*SVG格式具有以下缺點：<br />
*#如何和已經占有重要市場份額的向量圖形格式Adobe Animate競爭的問題,事實上,Adobe Animate在Flash CC 2014版及以後的版本就都支援直接匯出SVG檔案了<br />
*#SVG的本地執行環境下的廠家支援程度<br />
*#由於原始的SVG檔是遵從XML語法,導致資料採用未壓縮的方式存放,因此相較於其他的向量圖形格式,同樣的檔案內容會比其他的檔案格式稍大,Adobe因此使用gzip壓縮開發出壓縮的SVG檔格式,附檔名為 .svgz, 但此種檔案格式除了Adobe旗下的軟體以外,未被廣泛支援使用<br />
*#舊版的SVG Viewer無法正確顯示出使用新版SVG格式的向量圖形<br />
<br />
===2.♪基本架構♪===<br />
*基本架構:SVG允許3種圖形物件類型：向量圖形,柵格圖像以及文字,圖形物件——包括PNG&JPEG這些柵格圖像——能夠被編組&設計&轉換及整合進先前的彩現物件中,文字可以在任何適用於應用程式的XML命名空間之內,從而提高SVG圖形的搜尋能力和無障礙性,SVG提供的功能集涵蓋了巢狀轉換&裁剪路徑&Alpha通道&濾鏡效果&模板物件以及可延伸性,SVG嚴格遵從XML語法,並用文字格式的描述性語言來描述圖像內容,因此是一種和圖像解析度無關的向量圖形格式,SVG可以實現動態和互動功能,在DOM模型的基礎上,SVG開發設計人員可以利用ECMAScript或者SMIL來進行時序控制或物件的操縱,SVG雖然是文字格式,但是SVG支援利用gzip壓縮演算法減少檔案尺寸,壓縮後的檔案通常用被稱為「SVGZ檔案」<br />
*SVG主要支援以下幾種顯示物件：<br />
*#向量顯示物件,基本向量顯示物件包括矩形&圓&橢圓&多邊形&直線&任意曲線等<br />
*#嵌入式外部圖像,包括PNG&JPEG&SVG等<br />
*#文字物件<br />
*基本樣式:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/arrow.svg<br />
*基本圖形:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/bearFace.svg<br />
<br />
===3.♪文字♪===<br />
*TEXT<br />
*#在「text」標籤開始與結束之間夾字,可用中英文,而使用「屬性」來規定文字的表現,所有的屬性都可以改用樣式來表達<br />
*#可用中文字形：<br />
*##屬性dx和dy基於前一個字的位置去做變化：值可為'10,20,30,40'，字的距離一個比一個更遠<br />
*##屬性x和y標示字的起點：值可為'10,20,30,40'，表示每個字的x或y座標<br />
*##屬性fill控制填入字的顏色,預設黑色<br />
*##屬性stroke控制字描框的顏色,預設 none<br />
*##屬性rotate='30'順時鐘轉30°。rotate='30,60,90,120,150,180,210'指定每個字的轉動角度<br />
*##用style控制字體&字形&尺寸,但顏色是用fill不是用color <br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/text.svg<br />
<br />
===4.♪位移&旋轉&縮放&歪斜♪===<br />
*相關屬性說明：<br />
*#平移變換(translate)：transform="translate(x,y)",即新坐標系的原點在原坐標系的(x,y)處,坐標軸的方向不變<br />
*#旋轉變換(rotate)：transform="rotate(angle cx,cy)",angle代表旋轉角度,預設單位是「度」,順時針為正,逆時針為負,(cx,cy)是旋轉中心所在的坐標,若省略旋轉中心坐標,則預設值是(0,0)<br />
*#伸縮變換(scale)：transform="scale(sx,sy)",sx,sy分別代表x軸方向和y方向拉伸或縮小的比例因子,拉伸：大於1；縮小：小於1,若省略sy，即sy=sx，作等比例縮放<br />
*#歪斜變換(skew)：transform='skewX(x-angle)'或transform='skewY(y-angle)',x-angle,y-angle分別代表沿x軸和y軸歪斜的角度<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/transform.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/bearFace.svg<br />
<br />
===5.♪群組♪===<br />
*步驟:<br />
*#先添加svg標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，其中才有href屬性的定義<br />
*#在defs段落中定義圖形，並賦予id<br />
*#用<use xlink:href='#某id'/>來引用既有的定義<br />
<br />
===6.♪定義一次,引用多次♪===<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/uses.svg<br />
<br />
===7.♪漸層♪===<br />
*漸層和濾鏡如果取中文名稱,瀏覽器還認得,但Inkscape和線上轉檔軟體就會不認得<br />
*「漸層」工具可以在多種顏色之間建立漸層混合,您可以從預設漸層填色中選擇,或是建立自己的漸層填色<br />
*線性漸層沿著直線從起點到終點建立陰影<br />
*放射性漸層沿著圓形圖樣從起點到終點建立陰影<br />
*尖角漸層繞著起點以逆時針掃射的方式建立陰影<br />
*反射性漸層在起點的一側建立相同的鏡像線性漸層<br />
*菱形漸層從菱形圖樣的中央往外建立陰影<br />
====(1)☆線性漸層☆====<br />
*步驟：<br />
*#不用添加svg標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，不會用到href屬性<br />
*#在defs段落中定義漸層,並賦予id<br />
*#用fill='url(#某id)'屬性來引用既有的漸層定義<br />
*linearGradient 線性漸層定義語法說明:<br />
*#漸層標籤中的 100%，指的是整個圖形<br />
*#其中的 id 屬性定出漸層名稱<br />
*#由x1,y1,x2,y2四個屬性決定漸層範圍,以及水平,垂直或角形漸層,四個屬性都以百分比表示：<br />
*##x1,y1,x2,y2屬性決定漸層開始和結束位置,x1,x2以圖形的寬度為準,y1,y2以圖形的高度為準<br />
*##當y1和y2相等,而x1和x2不同時,可創建水平漸層<br />
*##當x1和x2相等,而y1和y2不同時,可創建垂直漸層<br />
*##當x1和x2不同,且y1和y2不同時,可創建角形漸層<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/h.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/v.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/arrow.svg<br />
<br />
====(2)☆放射漸層☆====<br />
*radialGradient 放設漸層定義語法說明:<br />
*#漸層範圍：由cx,cy,r三個屬性決定,三個屬性都以百分比表示,漸層範圍是一個圓或橢圓<br />
<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball1.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball2.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball3.svg<br />
<br />
===八、♪柔焦濾鏡♪===<br />
===九、♪path♪===<br />
===十、♪動畫♪===<br />
<br />
==Inkscape==<br />
==GIS==<br />
*何謂 GIS ？<br />
*兩種主要的 GIS 。<br />
*基本框架。<br />
*marks<br />
*overlays<br />
*google 我的地圖<br />
*結合我的地圖與 GIS<br />
==圖形計算機==<br />
*取得 svgdraw.php<br />
*基本框架<br />
*繪製基本圖形<br />
*函式繪圖<br />
*google 圖形計算機</div>
蕭卉均
http://well-being-ng.net/wiki1231/index.php?title=%E8%A8%8E%E8%AB%96:%E8%B3%87%E8%A8%8A%E5%9F%BA%E7%A4%8E%E6%87%89%E7%94%A8/%E8%95%AD%E5%8D%89%E5%9D%87&diff=37897
討論:資訊基礎應用/蕭卉均
2018-01-16T09:27:29Z
<p>蕭卉均：/* (2)放射漸層 */</p>
<hr />
<div>=ღ完整筆記ღ=<br />
==♡環境&工具♡==<br />
===1.環境===<br />
*伺服器與域名,伺服器DS216,網址6years.jendo.org<br />
*wifi,區網wifi：jendod&jendoa<br />
*網站空間,瀏覽器：firefox,優先於chrome,盡量不用IE<br />
*wiki上的個人頁,filezilla→開啟filezilla,並新增一個站台叫♕DS216+(共用)♕→主機設定:6years.jendo.org→協定:SFTP→使用者:共用→字碼集:UTF-8→連線,然後到♕home/www♕→建自己帳號的連線→可用的文字編輯器,如emeditor→連結filezilla&慣用的文字編輯器：♕編輯/設定/檔案編輯♕，選用♕使用自訂編輯器♕&♕總是使用預設的編輯器♕，並指定編輯器的路徑<br />
*課後重點筆記:<br />
*#table是開始,/table是結束<br />
*#IP:IP4,最多表達到255字,IPV4一般網頁使用,IP6,物聯網用<br />
*#物聯網:簡單說一切事物,得失相兼<br />
*#域名:域名伺服器(HOSTS)<br />
*#AI(人工智慧)<br />
*#big5,早期,只有繁體中文<br />
*#UTF-8,萬國碼<br />
<br />
===2.工具與設定===<br />
*firefox:Mozilla Firefox（簡稱Firefox）,中文俗稱火狐（中國大陸官方有使用但未註冊為商標）,是一個自由及開放原始碼的網頁瀏覽器,由Mozilla基金會及其子公司Mozilla公司開發<br />
*filezilla:ileZilla是一種快速&可信賴的FTP用戶端以及伺服器端開放原始碼程式,具有多種特色&直覺的介面,FileZilla在2003年11月獲選為SourceForge.net當月最佳推薦專案<br />
*EmEditor:EmEditor是江村軟體公司（Emurasoft,坐落於美國華盛頓州）所開發的一款在Windows平台上運行的文字編輯程式,EmEditor以運作輕巧&敏捷而又功能強大&豐富著稱而得到許多用戶的好評<br />
<br />
==♡HTML&HTTP♡==<br />
*發有者及發明年代:於西元1993年,W3C&WHATWG開發<br />
*HTML:超文件標示語言（英語：HyperText Markup Language,簡稱：HTML）是一種用於建立網頁的標準標示語言,HTML是一種基礎技術常與CSS&JavaScript一起被眾多網站用於設計令人賞心悅目的網頁&網頁應用程式以及行動應用程式的使用者介面<br />
*HTTP:超文本傳輸協定（英文：HyperText Transfer Protocol,縮寫：HTTP）是一種用於分佈式&協作式和超媒體資訊系統的應用層協議,HTTP是全球資訊網的資料通訊的基礎<br />
*xml:可延伸標記式語言（英語：Extensible Markup Language,簡稱：XML）是一種標記式語言,標記指電腦所能理解的資訊符號,通過此種標記,電腦之間可以處理包含各種資訊的文章等<br />
*課後筆記:<br />
*#筆記網頁建設:登入後搜尋{資訊基礎應用/蕭卉均}→點一下，開始編輯→編輯完點儲存頁面<br />
*#色碼表:https://www.toodoo.com/db/color.html<br />
*通訊錄:<br />
*<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
<table class='nicetable'><br />
<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
</table><br />
<br />
==♡ wiki ♡==<br />
*何謂wiki:Wiki是一種在全球資訊網上開放且可供多人協同創作的超文字系統,由沃德·坎寧安於1995年首先開發,沃德·坎寧安將wiki定義為「一種允許一群用戶用簡單的描述來建立和連線一組網頁的社會計算系統」<br />
*CC授權:創用CC授權條款（英語：Creative Commons license,簡稱CC授權）是一種公共版權授權條款,其允許分發受版權保護的作品,一個創用CC授權用於一個作者想給他人分享&使用&甚至創作衍生作品的權利<br />
*wiki語法:http://jendo.synology.me/wiki1231/index.php?title=Wiki_%E5%85%A5%E9%96%80%E8%AA%9E%E6%B3%95<br />
*wiki的word適應:履歷表<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E5%B1%A5%E6%AD%B7%E8%A1%A8.html<br />
==♡CSS♡==<br />
*何謂CSS:層疊樣式表（英語：Cascading Style Sheets,簡寫CSS）又稱串樣式列表&級聯樣式表&串接樣式表&層疊樣式表&階層式樣式表,一種用來為結構化文件（如HTML文件或XML應用）添加樣式（字型、間距和顏色等）的電腦語言,由W3C定義和維護,目前最新版本是CSS2.1，為W3C的推薦標準,CSS3現在已被大部分現代瀏覽器支援,而下一版的CSS4仍在開發中<br />
*用法:限制者才有標章,不限制者沒有標章<br />
*重要語法:<br />
*#Attribution(BY):姓名標示,您（使用者）可以複製&發行&展覽&表演&放映&廣播或通過資訊網路傳播本作品；您必須按照作者或者授權人指定的方式對作品進行姓名標示<br />
*#NonCommercial(NC):非商業性使用,您可以自由複製&散布&展示及演出本作品；您不得為商業目的而使用本作品<br />
*#NoDerivs(ND):禁止改作,您可以自由複製&散布&展示及演出本作品；您不得改變&轉變或更改本作品<br />
*#ShareAlike(SA):相同方式分享,您可以自由複製&散布&展示及演出本作品；若您改變&轉變或更改本作品,僅在遵守與本作品相同的授權條款下,您才能散布由本作品產生的衍生作品<br />
<br />
==♡SVG♡==<br />
===1.概述===<br />
*何謂SVG:可縮放向量圖形（英語：Scalable Vector Graphics,SVG）是一種基於可延伸標記式語言（XML）,用於描述二維向量圖形的圖形格式,SVG由W3C制定,是一個開放標準<br />
*點陣圖與向量圖的比較(含附檔名):<br />
*#SVG:又為向量圖,特色,放大不毛邊,https://upload.wikimedia.org/wikipedia/commons/5/53/Skull_and_crossbones.svg<br />
*#JPG:又名JEPG,失真,壓縮,http://wportfolio.wzu.edu.tw/blog/attach/995/27995/89/bf_51402_8868906_99219_2yzUdJnLy0AsZ9VdwaKNCA.jpg<br />
*#PNG:不失真,公開格式,https://s-media-cache-ak0.pinimg.com/originals/96/94/ef/9694ef6ecfd562c83e7a445ee9ee19ba.png<br />
*#GIF:可動畫,256色,https://2.bp.blogspot.com/-Ra6UuzwDGQg/WDfdq3X1GjI/AAAAAAAD0gc/MfVErIwBENYRH_DvvFsnThfYp-zVxugEgCLcB/s1600/AS000946_02.gif<br />
*SVG格式具有以下優點:<br />
*#圖檔可讀,易於修改和編輯（理論上如此,但實際上卻是因為各種不同的SVG檔編輯器而可能儲存成不易解讀的SVG檔案）<br />
*#與現有技術可以互動融合,例如,SVG技術本身的動態部分（包括時序控制和動畫）就是基於SMIL標準,另外,SVG檔案還可嵌入JavaScript（嚴格地說，應該是ECMAScript）指令碼來控制SVG物件<br />
*#SVG圖形格式可以方便的建立文字索引,從而實現基於內容的圖像搜尋<br />
*#SVG圖形格式支援多種濾鏡和特殊效果,在不改變圖像內容的前提下可以實現點陣圖格式中類似文字陰影的效果<br />
*#SVG圖形格式可以用來動態生成圖形,例如,可用SVG動態生成具有互動功能的地圖,嵌入網頁中,並顯示給終端用戶<br />
*SVG格式具有以下缺點：<br />
*#如何和已經占有重要市場份額的向量圖形格式Adobe Animate競爭的問題,事實上,Adobe Animate在Flash CC 2014版及以後的版本就都支援直接匯出SVG檔案了<br />
*#SVG的本地執行環境下的廠家支援程度<br />
*#由於原始的SVG檔是遵從XML語法,導致資料採用未壓縮的方式存放,因此相較於其他的向量圖形格式,同樣的檔案內容會比其他的檔案格式稍大,Adobe因此使用gzip壓縮開發出壓縮的SVG檔格式,附檔名為 .svgz, 但此種檔案格式除了Adobe旗下的軟體以外,未被廣泛支援使用<br />
*#舊版的SVG Viewer無法正確顯示出使用新版SVG格式的向量圖形<br />
<br />
===2.基本架構===<br />
*基本架構:SVG允許3種圖形物件類型：向量圖形,柵格圖像以及文字,圖形物件——包括PNG&JPEG這些柵格圖像——能夠被編組&設計&轉換及整合進先前的彩現物件中,文字可以在任何適用於應用程式的XML命名空間之內,從而提高SVG圖形的搜尋能力和無障礙性,SVG提供的功能集涵蓋了巢狀轉換&裁剪路徑&Alpha通道&濾鏡效果&模板物件以及可延伸性,SVG嚴格遵從XML語法,並用文字格式的描述性語言來描述圖像內容,因此是一種和圖像解析度無關的向量圖形格式,SVG可以實現動態和互動功能,在DOM模型的基礎上,SVG開發設計人員可以利用ECMAScript或者SMIL來進行時序控制或物件的操縱,SVG雖然是文字格式,但是SVG支援利用gzip壓縮演算法減少檔案尺寸,壓縮後的檔案通常用被稱為「SVGZ檔案」<br />
*SVG主要支援以下幾種顯示物件：<br />
*#向量顯示物件,基本向量顯示物件包括矩形&圓&橢圓&多邊形&直線&任意曲線等<br />
*#嵌入式外部圖像,包括PNG&JPEG&SVG等<br />
*#文字物件<br />
*基本樣式:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/arrow.svg<br />
*基本圖形:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/bearFace.svg<br />
<br />
===3.文字===<br />
*TEXT<br />
*#在「text」標籤開始與結束之間夾字,可用中英文,而使用「屬性」來規定文字的表現,所有的屬性都可以改用樣式來表達<br />
*#可用中文字形：<br />
*##屬性dx和dy基於前一個字的位置去做變化：值可為'10,20,30,40'，字的距離一個比一個更遠<br />
*##屬性x和y標示字的起點：值可為'10,20,30,40'，表示每個字的x或y座標<br />
*##屬性fill控制填入字的顏色,預設黑色<br />
*##屬性stroke控制字描框的顏色,預設 none<br />
*##屬性rotate='30'順時鐘轉30°。rotate='30,60,90,120,150,180,210'指定每個字的轉動角度<br />
*##用style控制字體&字形&尺寸,但顏色是用fill不是用color <br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/text.svg<br />
<br />
===4.位移&旋轉&縮放&歪斜===<br />
*相關屬性說明：<br />
*#平移變換(translate)：transform="translate(x,y)",即新坐標系的原點在原坐標系的(x,y)處,坐標軸的方向不變<br />
*#旋轉變換(rotate)：transform="rotate(angle cx,cy)",angle代表旋轉角度,預設單位是「度」,順時針為正,逆時針為負,(cx,cy)是旋轉中心所在的坐標,若省略旋轉中心坐標,則預設值是(0,0)<br />
*#伸縮變換(scale)：transform="scale(sx,sy)",sx,sy分別代表x軸方向和y方向拉伸或縮小的比例因子,拉伸：大於1；縮小：小於1,若省略sy，即sy=sx，作等比例縮放<br />
*#歪斜變換(skew)：transform='skewX(x-angle)'或transform='skewY(y-angle)',x-angle,y-angle分別代表沿x軸和y軸歪斜的角度<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/transform.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/bearFace.svg<br />
<br />
===5.群組===<br />
*步驟:<br />
*#先添加svg標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，其中才有href屬性的定義<br />
*#在defs段落中定義圖形，並賦予id<br />
*#用<use xlink:href='#某id'/>來引用既有的定義<br />
<br />
===6.定義一次,引用多次===<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/uses.svg<br />
<br />
===7.漸層===<br />
*漸層和濾鏡如果取中文名稱,瀏覽器還認得,但Inkscape和線上轉檔軟體就會不認得<br />
*「漸層」工具可以在多種顏色之間建立漸層混合,您可以從預設漸層填色中選擇,或是建立自己的漸層填色<br />
*線性漸層沿著直線從起點到終點建立陰影<br />
*放射性漸層沿著圓形圖樣從起點到終點建立陰影<br />
*尖角漸層繞著起點以逆時針掃射的方式建立陰影<br />
*反射性漸層在起點的一側建立相同的鏡像線性漸層<br />
*菱形漸層從菱形圖樣的中央往外建立陰影<br />
====(1)線性漸層====<br />
*步驟：<br />
*#不用添加svg標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，不會用到href屬性<br />
*#在defs段落中定義漸層,並賦予id<br />
*#用fill='url(#某id)'屬性來引用既有的漸層定義<br />
*linearGradient 線性漸層定義語法說明:<br />
*#漸層標籤中的 100%，指的是整個圖形<br />
*#其中的 id 屬性定出漸層名稱<br />
*#由x1,y1,x2,y2四個屬性決定漸層範圍,以及水平,垂直或角形漸層,四個屬性都以百分比表示：<br />
*##x1,y1,x2,y2屬性決定漸層開始和結束位置,x1,x2以圖形的寬度為準,y1,y2以圖形的高度為準<br />
*##當y1和y2相等,而x1和x2不同時,可創建水平漸層<br />
*##當x1和x2相等,而y1和y2不同時,可創建垂直漸層<br />
*##當x1和x2不同,且y1和y2不同時,可創建角形漸層<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/h.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/v.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/arrow.svg<br />
<br />
====(2)放射漸層====<br />
*radialGradient 放設漸層定義語法說明:<br />
*#漸層範圍：由cx,cy,r三個屬性決定,三個屬性都以百分比表示,漸層範圍是一個圓或橢圓<br />
<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball1.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball2.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball3.svg<br />
<br />
===八、柔焦濾鏡===<br />
===九、path===<br />
===十、動畫===<br />
<br />
==Inkscape==<br />
==GIS==<br />
*何謂 GIS ？<br />
*兩種主要的 GIS 。<br />
*基本框架。<br />
*marks<br />
*overlays<br />
*google 我的地圖<br />
*結合我的地圖與 GIS<br />
==圖形計算機==<br />
*取得 svgdraw.php<br />
*基本框架<br />
*繪製基本圖形<br />
*函式繪圖<br />
*google 圖形計算機</div>
蕭卉均
http://well-being-ng.net/wiki1231/index.php?title=%E8%A8%8E%E8%AB%96:%E8%B3%87%E8%A8%8A%E5%9F%BA%E7%A4%8E%E6%87%89%E7%94%A8/%E8%95%AD%E5%8D%89%E5%9D%87&diff=37896
討論:資訊基礎應用/蕭卉均
2018-01-16T09:25:35Z
<p>蕭卉均：/* 2.基本架構 */</p>
<hr />
<div>=ღ完整筆記ღ=<br />
==♡環境&工具♡==<br />
===1.環境===<br />
*伺服器與域名,伺服器DS216,網址6years.jendo.org<br />
*wifi,區網wifi：jendod&jendoa<br />
*網站空間,瀏覽器：firefox,優先於chrome,盡量不用IE<br />
*wiki上的個人頁,filezilla→開啟filezilla,並新增一個站台叫♕DS216+(共用)♕→主機設定:6years.jendo.org→協定:SFTP→使用者:共用→字碼集:UTF-8→連線,然後到♕home/www♕→建自己帳號的連線→可用的文字編輯器,如emeditor→連結filezilla&慣用的文字編輯器：♕編輯/設定/檔案編輯♕，選用♕使用自訂編輯器♕&♕總是使用預設的編輯器♕，並指定編輯器的路徑<br />
*課後重點筆記:<br />
*#table是開始,/table是結束<br />
*#IP:IP4,最多表達到255字,IPV4一般網頁使用,IP6,物聯網用<br />
*#物聯網:簡單說一切事物,得失相兼<br />
*#域名:域名伺服器(HOSTS)<br />
*#AI(人工智慧)<br />
*#big5,早期,只有繁體中文<br />
*#UTF-8,萬國碼<br />
<br />
===2.工具與設定===<br />
*firefox:Mozilla Firefox（簡稱Firefox）,中文俗稱火狐（中國大陸官方有使用但未註冊為商標）,是一個自由及開放原始碼的網頁瀏覽器,由Mozilla基金會及其子公司Mozilla公司開發<br />
*filezilla:ileZilla是一種快速&可信賴的FTP用戶端以及伺服器端開放原始碼程式,具有多種特色&直覺的介面,FileZilla在2003年11月獲選為SourceForge.net當月最佳推薦專案<br />
*EmEditor:EmEditor是江村軟體公司（Emurasoft,坐落於美國華盛頓州）所開發的一款在Windows平台上運行的文字編輯程式,EmEditor以運作輕巧&敏捷而又功能強大&豐富著稱而得到許多用戶的好評<br />
<br />
==♡HTML&HTTP♡==<br />
*發有者及發明年代:於西元1993年,W3C&WHATWG開發<br />
*HTML:超文件標示語言（英語：HyperText Markup Language,簡稱：HTML）是一種用於建立網頁的標準標示語言,HTML是一種基礎技術常與CSS&JavaScript一起被眾多網站用於設計令人賞心悅目的網頁&網頁應用程式以及行動應用程式的使用者介面<br />
*HTTP:超文本傳輸協定（英文：HyperText Transfer Protocol,縮寫：HTTP）是一種用於分佈式&協作式和超媒體資訊系統的應用層協議,HTTP是全球資訊網的資料通訊的基礎<br />
*xml:可延伸標記式語言（英語：Extensible Markup Language,簡稱：XML）是一種標記式語言,標記指電腦所能理解的資訊符號,通過此種標記,電腦之間可以處理包含各種資訊的文章等<br />
*課後筆記:<br />
*#筆記網頁建設:登入後搜尋{資訊基礎應用/蕭卉均}→點一下，開始編輯→編輯完點儲存頁面<br />
*#色碼表:https://www.toodoo.com/db/color.html<br />
*通訊錄:<br />
*<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
<table class='nicetable'><br />
<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
</table><br />
<br />
==♡ wiki ♡==<br />
*何謂wiki:Wiki是一種在全球資訊網上開放且可供多人協同創作的超文字系統,由沃德·坎寧安於1995年首先開發,沃德·坎寧安將wiki定義為「一種允許一群用戶用簡單的描述來建立和連線一組網頁的社會計算系統」<br />
*CC授權:創用CC授權條款（英語：Creative Commons license,簡稱CC授權）是一種公共版權授權條款,其允許分發受版權保護的作品,一個創用CC授權用於一個作者想給他人分享&使用&甚至創作衍生作品的權利<br />
*wiki語法:http://jendo.synology.me/wiki1231/index.php?title=Wiki_%E5%85%A5%E9%96%80%E8%AA%9E%E6%B3%95<br />
*wiki的word適應:履歷表<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E5%B1%A5%E6%AD%B7%E8%A1%A8.html<br />
==♡CSS♡==<br />
*何謂CSS:層疊樣式表（英語：Cascading Style Sheets,簡寫CSS）又稱串樣式列表&級聯樣式表&串接樣式表&層疊樣式表&階層式樣式表,一種用來為結構化文件（如HTML文件或XML應用）添加樣式（字型、間距和顏色等）的電腦語言,由W3C定義和維護,目前最新版本是CSS2.1，為W3C的推薦標準,CSS3現在已被大部分現代瀏覽器支援,而下一版的CSS4仍在開發中<br />
*用法:限制者才有標章,不限制者沒有標章<br />
*重要語法:<br />
*#Attribution(BY):姓名標示,您（使用者）可以複製&發行&展覽&表演&放映&廣播或通過資訊網路傳播本作品；您必須按照作者或者授權人指定的方式對作品進行姓名標示<br />
*#NonCommercial(NC):非商業性使用,您可以自由複製&散布&展示及演出本作品；您不得為商業目的而使用本作品<br />
*#NoDerivs(ND):禁止改作,您可以自由複製&散布&展示及演出本作品；您不得改變&轉變或更改本作品<br />
*#ShareAlike(SA):相同方式分享,您可以自由複製&散布&展示及演出本作品；若您改變&轉變或更改本作品,僅在遵守與本作品相同的授權條款下,您才能散布由本作品產生的衍生作品<br />
<br />
==♡SVG♡==<br />
===1.概述===<br />
*何謂SVG:可縮放向量圖形（英語：Scalable Vector Graphics,SVG）是一種基於可延伸標記式語言（XML）,用於描述二維向量圖形的圖形格式,SVG由W3C制定,是一個開放標準<br />
*點陣圖與向量圖的比較(含附檔名):<br />
*#SVG:又為向量圖,特色,放大不毛邊,https://upload.wikimedia.org/wikipedia/commons/5/53/Skull_and_crossbones.svg<br />
*#JPG:又名JEPG,失真,壓縮,http://wportfolio.wzu.edu.tw/blog/attach/995/27995/89/bf_51402_8868906_99219_2yzUdJnLy0AsZ9VdwaKNCA.jpg<br />
*#PNG:不失真,公開格式,https://s-media-cache-ak0.pinimg.com/originals/96/94/ef/9694ef6ecfd562c83e7a445ee9ee19ba.png<br />
*#GIF:可動畫,256色,https://2.bp.blogspot.com/-Ra6UuzwDGQg/WDfdq3X1GjI/AAAAAAAD0gc/MfVErIwBENYRH_DvvFsnThfYp-zVxugEgCLcB/s1600/AS000946_02.gif<br />
*SVG格式具有以下優點:<br />
*#圖檔可讀,易於修改和編輯（理論上如此,但實際上卻是因為各種不同的SVG檔編輯器而可能儲存成不易解讀的SVG檔案）<br />
*#與現有技術可以互動融合,例如,SVG技術本身的動態部分（包括時序控制和動畫）就是基於SMIL標準,另外,SVG檔案還可嵌入JavaScript（嚴格地說，應該是ECMAScript）指令碼來控制SVG物件<br />
*#SVG圖形格式可以方便的建立文字索引,從而實現基於內容的圖像搜尋<br />
*#SVG圖形格式支援多種濾鏡和特殊效果,在不改變圖像內容的前提下可以實現點陣圖格式中類似文字陰影的效果<br />
*#SVG圖形格式可以用來動態生成圖形,例如,可用SVG動態生成具有互動功能的地圖,嵌入網頁中,並顯示給終端用戶<br />
*SVG格式具有以下缺點：<br />
*#如何和已經占有重要市場份額的向量圖形格式Adobe Animate競爭的問題,事實上,Adobe Animate在Flash CC 2014版及以後的版本就都支援直接匯出SVG檔案了<br />
*#SVG的本地執行環境下的廠家支援程度<br />
*#由於原始的SVG檔是遵從XML語法,導致資料採用未壓縮的方式存放,因此相較於其他的向量圖形格式,同樣的檔案內容會比其他的檔案格式稍大,Adobe因此使用gzip壓縮開發出壓縮的SVG檔格式,附檔名為 .svgz, 但此種檔案格式除了Adobe旗下的軟體以外,未被廣泛支援使用<br />
*#舊版的SVG Viewer無法正確顯示出使用新版SVG格式的向量圖形<br />
<br />
===2.基本架構===<br />
*基本架構:SVG允許3種圖形物件類型：向量圖形,柵格圖像以及文字,圖形物件——包括PNG&JPEG這些柵格圖像——能夠被編組&設計&轉換及整合進先前的彩現物件中,文字可以在任何適用於應用程式的XML命名空間之內,從而提高SVG圖形的搜尋能力和無障礙性,SVG提供的功能集涵蓋了巢狀轉換&裁剪路徑&Alpha通道&濾鏡效果&模板物件以及可延伸性,SVG嚴格遵從XML語法,並用文字格式的描述性語言來描述圖像內容,因此是一種和圖像解析度無關的向量圖形格式,SVG可以實現動態和互動功能,在DOM模型的基礎上,SVG開發設計人員可以利用ECMAScript或者SMIL來進行時序控制或物件的操縱,SVG雖然是文字格式,但是SVG支援利用gzip壓縮演算法減少檔案尺寸,壓縮後的檔案通常用被稱為「SVGZ檔案」<br />
*SVG主要支援以下幾種顯示物件：<br />
*#向量顯示物件,基本向量顯示物件包括矩形&圓&橢圓&多邊形&直線&任意曲線等<br />
*#嵌入式外部圖像,包括PNG&JPEG&SVG等<br />
*#文字物件<br />
*基本樣式:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/arrow.svg<br />
*基本圖形:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/bearFace.svg<br />
<br />
===3.文字===<br />
*TEXT<br />
*#在「text」標籤開始與結束之間夾字,可用中英文,而使用「屬性」來規定文字的表現,所有的屬性都可以改用樣式來表達<br />
*#可用中文字形：<br />
*##屬性dx和dy基於前一個字的位置去做變化：值可為'10,20,30,40'，字的距離一個比一個更遠<br />
*##屬性x和y標示字的起點：值可為'10,20,30,40'，表示每個字的x或y座標<br />
*##屬性fill控制填入字的顏色,預設黑色<br />
*##屬性stroke控制字描框的顏色,預設 none<br />
*##屬性rotate='30'順時鐘轉30°。rotate='30,60,90,120,150,180,210'指定每個字的轉動角度<br />
*##用style控制字體&字形&尺寸,但顏色是用fill不是用color <br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/text.svg<br />
<br />
===4.位移&旋轉&縮放&歪斜===<br />
*相關屬性說明：<br />
*#平移變換(translate)：transform="translate(x,y)",即新坐標系的原點在原坐標系的(x,y)處,坐標軸的方向不變<br />
*#旋轉變換(rotate)：transform="rotate(angle cx,cy)",angle代表旋轉角度,預設單位是「度」,順時針為正,逆時針為負,(cx,cy)是旋轉中心所在的坐標,若省略旋轉中心坐標,則預設值是(0,0)<br />
*#伸縮變換(scale)：transform="scale(sx,sy)",sx,sy分別代表x軸方向和y方向拉伸或縮小的比例因子,拉伸：大於1；縮小：小於1,若省略sy，即sy=sx，作等比例縮放<br />
*#歪斜變換(skew)：transform='skewX(x-angle)'或transform='skewY(y-angle)',x-angle,y-angle分別代表沿x軸和y軸歪斜的角度<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/transform.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/bearFace.svg<br />
<br />
===5.群組===<br />
*步驟:<br />
*#先添加svg標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，其中才有href屬性的定義<br />
*#在defs段落中定義圖形，並賦予id<br />
*#用<use xlink:href='#某id'/>來引用既有的定義<br />
<br />
===6.定義一次,引用多次===<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/uses.svg<br />
<br />
===7.漸層===<br />
*漸層和濾鏡如果取中文名稱,瀏覽器還認得,但Inkscape和線上轉檔軟體就會不認得<br />
*「漸層」工具可以在多種顏色之間建立漸層混合,您可以從預設漸層填色中選擇,或是建立自己的漸層填色<br />
*線性漸層沿著直線從起點到終點建立陰影<br />
*放射性漸層沿著圓形圖樣從起點到終點建立陰影<br />
*尖角漸層繞著起點以逆時針掃射的方式建立陰影<br />
*反射性漸層在起點的一側建立相同的鏡像線性漸層<br />
*菱形漸層從菱形圖樣的中央往外建立陰影<br />
====(1)線性漸層====<br />
*步驟：<br />
*#不用添加svg標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，不會用到href屬性<br />
*#在defs段落中定義漸層,並賦予id<br />
*#用fill='url(#某id)'屬性來引用既有的漸層定義<br />
*linearGradient 線性漸層定義語法說明:<br />
*#漸層標籤中的 100%，指的是整個圖形<br />
*#其中的 id 屬性定出漸層名稱<br />
*#由x1,y1,x2,y2四個屬性決定漸層範圍,以及水平,垂直或角形漸層,四個屬性都以百分比表示：<br />
*##x1,y1,x2,y2屬性決定漸層開始和結束位置,x1,x2以圖形的寬度為準,y1,y2以圖形的高度為準<br />
*##當y1和y2相等,而x1和x2不同時,可創建水平漸層<br />
*##當x1和x2相等,而y1和y2不同時,可創建垂直漸層<br />
*##當x1和x2不同,且y1和y2不同時,可創建角形漸層<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/h.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/v.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/arrow.svg<br />
<br />
====(2)放射漸層====<br />
<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball1.svg<br />
<br />
===八、柔焦濾鏡===<br />
===九、path===<br />
===十、動畫===<br />
<br />
==Inkscape==<br />
==GIS==<br />
*何謂 GIS ？<br />
*兩種主要的 GIS 。<br />
*基本框架。<br />
*marks<br />
*overlays<br />
*google 我的地圖<br />
*結合我的地圖與 GIS<br />
==圖形計算機==<br />
*取得 svgdraw.php<br />
*基本框架<br />
*繪製基本圖形<br />
*函式繪圖<br />
*google 圖形計算機</div>
蕭卉均
http://well-being-ng.net/wiki1231/index.php?title=%E8%A8%8E%E8%AB%96:%E8%B3%87%E8%A8%8A%E5%9F%BA%E7%A4%8E%E6%87%89%E7%94%A8/%E8%95%AD%E5%8D%89%E5%9D%87&diff=37895
討論:資訊基礎應用/蕭卉均
2018-01-16T09:25:02Z
<p>蕭卉均：/* (2)放射漸層 */</p>
<hr />
<div>=ღ完整筆記ღ=<br />
==♡環境&工具♡==<br />
===1.環境===<br />
*伺服器與域名,伺服器DS216,網址6years.jendo.org<br />
*wifi,區網wifi：jendod&jendoa<br />
*網站空間,瀏覽器：firefox,優先於chrome,盡量不用IE<br />
*wiki上的個人頁,filezilla→開啟filezilla,並新增一個站台叫♕DS216+(共用)♕→主機設定:6years.jendo.org→協定:SFTP→使用者:共用→字碼集:UTF-8→連線,然後到♕home/www♕→建自己帳號的連線→可用的文字編輯器,如emeditor→連結filezilla&慣用的文字編輯器：♕編輯/設定/檔案編輯♕，選用♕使用自訂編輯器♕&♕總是使用預設的編輯器♕，並指定編輯器的路徑<br />
*課後重點筆記:<br />
*#table是開始,/table是結束<br />
*#IP:IP4,最多表達到255字,IPV4一般網頁使用,IP6,物聯網用<br />
*#物聯網:簡單說一切事物,得失相兼<br />
*#域名:域名伺服器(HOSTS)<br />
*#AI(人工智慧)<br />
*#big5,早期,只有繁體中文<br />
*#UTF-8,萬國碼<br />
<br />
===2.工具與設定===<br />
*firefox:Mozilla Firefox（簡稱Firefox）,中文俗稱火狐（中國大陸官方有使用但未註冊為商標）,是一個自由及開放原始碼的網頁瀏覽器,由Mozilla基金會及其子公司Mozilla公司開發<br />
*filezilla:ileZilla是一種快速&可信賴的FTP用戶端以及伺服器端開放原始碼程式,具有多種特色&直覺的介面,FileZilla在2003年11月獲選為SourceForge.net當月最佳推薦專案<br />
*EmEditor:EmEditor是江村軟體公司（Emurasoft,坐落於美國華盛頓州）所開發的一款在Windows平台上運行的文字編輯程式,EmEditor以運作輕巧&敏捷而又功能強大&豐富著稱而得到許多用戶的好評<br />
<br />
==♡HTML&HTTP♡==<br />
*發有者及發明年代:於西元1993年,W3C&WHATWG開發<br />
*HTML:超文件標示語言（英語：HyperText Markup Language,簡稱：HTML）是一種用於建立網頁的標準標示語言,HTML是一種基礎技術常與CSS&JavaScript一起被眾多網站用於設計令人賞心悅目的網頁&網頁應用程式以及行動應用程式的使用者介面<br />
*HTTP:超文本傳輸協定（英文：HyperText Transfer Protocol,縮寫：HTTP）是一種用於分佈式&協作式和超媒體資訊系統的應用層協議,HTTP是全球資訊網的資料通訊的基礎<br />
*xml:可延伸標記式語言（英語：Extensible Markup Language,簡稱：XML）是一種標記式語言,標記指電腦所能理解的資訊符號,通過此種標記,電腦之間可以處理包含各種資訊的文章等<br />
*課後筆記:<br />
*#筆記網頁建設:登入後搜尋{資訊基礎應用/蕭卉均}→點一下，開始編輯→編輯完點儲存頁面<br />
*#色碼表:https://www.toodoo.com/db/color.html<br />
*通訊錄:<br />
*<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
<table class='nicetable'><br />
<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
</table><br />
<br />
==♡ wiki ♡==<br />
*何謂wiki:Wiki是一種在全球資訊網上開放且可供多人協同創作的超文字系統,由沃德·坎寧安於1995年首先開發,沃德·坎寧安將wiki定義為「一種允許一群用戶用簡單的描述來建立和連線一組網頁的社會計算系統」<br />
*CC授權:創用CC授權條款（英語：Creative Commons license,簡稱CC授權）是一種公共版權授權條款,其允許分發受版權保護的作品,一個創用CC授權用於一個作者想給他人分享&使用&甚至創作衍生作品的權利<br />
*wiki語法:http://jendo.synology.me/wiki1231/index.php?title=Wiki_%E5%85%A5%E9%96%80%E8%AA%9E%E6%B3%95<br />
*wiki的word適應:履歷表<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E5%B1%A5%E6%AD%B7%E8%A1%A8.html<br />
==♡CSS♡==<br />
*何謂CSS:層疊樣式表（英語：Cascading Style Sheets,簡寫CSS）又稱串樣式列表&級聯樣式表&串接樣式表&層疊樣式表&階層式樣式表,一種用來為結構化文件（如HTML文件或XML應用）添加樣式（字型、間距和顏色等）的電腦語言,由W3C定義和維護,目前最新版本是CSS2.1，為W3C的推薦標準,CSS3現在已被大部分現代瀏覽器支援,而下一版的CSS4仍在開發中<br />
*用法:限制者才有標章,不限制者沒有標章<br />
*重要語法:<br />
*#Attribution(BY):姓名標示,您（使用者）可以複製&發行&展覽&表演&放映&廣播或通過資訊網路傳播本作品；您必須按照作者或者授權人指定的方式對作品進行姓名標示<br />
*#NonCommercial(NC):非商業性使用,您可以自由複製&散布&展示及演出本作品；您不得為商業目的而使用本作品<br />
*#NoDerivs(ND):禁止改作,您可以自由複製&散布&展示及演出本作品；您不得改變&轉變或更改本作品<br />
*#ShareAlike(SA):相同方式分享,您可以自由複製&散布&展示及演出本作品；若您改變&轉變或更改本作品,僅在遵守與本作品相同的授權條款下,您才能散布由本作品產生的衍生作品<br />
<br />
==♡SVG♡==<br />
===1.概述===<br />
*何謂SVG:可縮放向量圖形（英語：Scalable Vector Graphics,SVG）是一種基於可延伸標記式語言（XML）,用於描述二維向量圖形的圖形格式,SVG由W3C制定,是一個開放標準<br />
*點陣圖與向量圖的比較(含附檔名):<br />
*#SVG:又為向量圖,特色,放大不毛邊,https://upload.wikimedia.org/wikipedia/commons/5/53/Skull_and_crossbones.svg<br />
*#JPG:又名JEPG,失真,壓縮,http://wportfolio.wzu.edu.tw/blog/attach/995/27995/89/bf_51402_8868906_99219_2yzUdJnLy0AsZ9VdwaKNCA.jpg<br />
*#PNG:不失真,公開格式,https://s-media-cache-ak0.pinimg.com/originals/96/94/ef/9694ef6ecfd562c83e7a445ee9ee19ba.png<br />
*#GIF:可動畫,256色,https://2.bp.blogspot.com/-Ra6UuzwDGQg/WDfdq3X1GjI/AAAAAAAD0gc/MfVErIwBENYRH_DvvFsnThfYp-zVxugEgCLcB/s1600/AS000946_02.gif<br />
*SVG格式具有以下優點:<br />
*#圖檔可讀,易於修改和編輯（理論上如此,但實際上卻是因為各種不同的SVG檔編輯器而可能儲存成不易解讀的SVG檔案）<br />
*#與現有技術可以互動融合,例如,SVG技術本身的動態部分（包括時序控制和動畫）就是基於SMIL標準,另外,SVG檔案還可嵌入JavaScript（嚴格地說，應該是ECMAScript）指令碼來控制SVG物件<br />
*#SVG圖形格式可以方便的建立文字索引,從而實現基於內容的圖像搜尋<br />
*#SVG圖形格式支援多種濾鏡和特殊效果,在不改變圖像內容的前提下可以實現點陣圖格式中類似文字陰影的效果<br />
*#SVG圖形格式可以用來動態生成圖形,例如,可用SVG動態生成具有互動功能的地圖,嵌入網頁中,並顯示給終端用戶<br />
*SVG格式具有以下缺點：<br />
*#如何和已經占有重要市場份額的向量圖形格式Adobe Animate競爭的問題,事實上,Adobe Animate在Flash CC 2014版及以後的版本就都支援直接匯出SVG檔案了<br />
*#SVG的本地執行環境下的廠家支援程度<br />
*#由於原始的SVG檔是遵從XML語法,導致資料採用未壓縮的方式存放,因此相較於其他的向量圖形格式,同樣的檔案內容會比其他的檔案格式稍大,Adobe因此使用gzip壓縮開發出壓縮的SVG檔格式,附檔名為 .svgz, 但此種檔案格式除了Adobe旗下的軟體以外,未被廣泛支援使用<br />
*#舊版的SVG Viewer無法正確顯示出使用新版SVG格式的向量圖形<br />
<br />
===2.基本架構===<br />
*基本架構:SVG允許3種圖形物件類型：向量圖形,柵格圖像以及文字,圖形物件——包括PNG&JPEG這些柵格圖像——能夠被編組&設計&轉換及整合進先前的彩現物件中,文字可以在任何適用於應用程式的XML命名空間之內,從而提高SVG圖形的搜尋能力和無障礙性,SVG提供的功能集涵蓋了巢狀轉換&裁剪路徑&Alpha通道&濾鏡效果&模板物件以及可延伸性,SVG嚴格遵從XML語法,並用文字格式的描述性語言來描述圖像內容,因此是一種和圖像解析度無關的向量圖形格式,SVG可以實現動態和互動功能,在DOM模型的基礎上,SVG開發設計人員可以利用ECMAScript或者SMIL來進行時序控制或物件的操縱,SVG雖然是文字格式,但是SVG支援利用gzip壓縮演算法減少檔案尺寸,壓縮後的檔案通常用被稱為「SVGZ檔案」<br />
*基本樣式:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/arrow.svg<br />
*基本圖形:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/bearFace.svg<br />
*SVG主要支援以下幾種顯示物件：<br />
*#向量顯示物件,基本向量顯示物件包括矩形&圓&橢圓&多邊形&直線&任意曲線等<br />
*#嵌入式外部圖像,包括PNG&JPEG&SVG等<br />
*#文字物件<br />
<br />
===3.文字===<br />
*TEXT<br />
*#在「text」標籤開始與結束之間夾字,可用中英文,而使用「屬性」來規定文字的表現,所有的屬性都可以改用樣式來表達<br />
*#可用中文字形：<br />
*##屬性dx和dy基於前一個字的位置去做變化：值可為'10,20,30,40'，字的距離一個比一個更遠<br />
*##屬性x和y標示字的起點：值可為'10,20,30,40'，表示每個字的x或y座標<br />
*##屬性fill控制填入字的顏色,預設黑色<br />
*##屬性stroke控制字描框的顏色,預設 none<br />
*##屬性rotate='30'順時鐘轉30°。rotate='30,60,90,120,150,180,210'指定每個字的轉動角度<br />
*##用style控制字體&字形&尺寸,但顏色是用fill不是用color <br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/text.svg<br />
<br />
===4.位移&旋轉&縮放&歪斜===<br />
*相關屬性說明：<br />
*#平移變換(translate)：transform="translate(x,y)",即新坐標系的原點在原坐標系的(x,y)處,坐標軸的方向不變<br />
*#旋轉變換(rotate)：transform="rotate(angle cx,cy)",angle代表旋轉角度,預設單位是「度」,順時針為正,逆時針為負,(cx,cy)是旋轉中心所在的坐標,若省略旋轉中心坐標,則預設值是(0,0)<br />
*#伸縮變換(scale)：transform="scale(sx,sy)",sx,sy分別代表x軸方向和y方向拉伸或縮小的比例因子,拉伸：大於1；縮小：小於1,若省略sy，即sy=sx，作等比例縮放<br />
*#歪斜變換(skew)：transform='skewX(x-angle)'或transform='skewY(y-angle)',x-angle,y-angle分別代表沿x軸和y軸歪斜的角度<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/transform.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/bearFace.svg<br />
<br />
===5.群組===<br />
*步驟:<br />
*#先添加svg標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，其中才有href屬性的定義<br />
*#在defs段落中定義圖形，並賦予id<br />
*#用<use xlink:href='#某id'/>來引用既有的定義<br />
<br />
===6.定義一次,引用多次===<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/uses.svg<br />
<br />
===7.漸層===<br />
*漸層和濾鏡如果取中文名稱,瀏覽器還認得,但Inkscape和線上轉檔軟體就會不認得<br />
*「漸層」工具可以在多種顏色之間建立漸層混合,您可以從預設漸層填色中選擇,或是建立自己的漸層填色<br />
*線性漸層沿著直線從起點到終點建立陰影<br />
*放射性漸層沿著圓形圖樣從起點到終點建立陰影<br />
*尖角漸層繞著起點以逆時針掃射的方式建立陰影<br />
*反射性漸層在起點的一側建立相同的鏡像線性漸層<br />
*菱形漸層從菱形圖樣的中央往外建立陰影<br />
====(1)線性漸層====<br />
*步驟：<br />
*#不用添加svg標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，不會用到href屬性<br />
*#在defs段落中定義漸層,並賦予id<br />
*#用fill='url(#某id)'屬性來引用既有的漸層定義<br />
*linearGradient 線性漸層定義語法說明:<br />
*#漸層標籤中的 100%，指的是整個圖形<br />
*#其中的 id 屬性定出漸層名稱<br />
*#由x1,y1,x2,y2四個屬性決定漸層範圍,以及水平,垂直或角形漸層,四個屬性都以百分比表示：<br />
*##x1,y1,x2,y2屬性決定漸層開始和結束位置,x1,x2以圖形的寬度為準,y1,y2以圖形的高度為準<br />
*##當y1和y2相等,而x1和x2不同時,可創建水平漸層<br />
*##當x1和x2相等,而y1和y2不同時,可創建垂直漸層<br />
*##當x1和x2不同,且y1和y2不同時,可創建角形漸層<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/h.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/v.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/arrow.svg<br />
<br />
====(2)放射漸層====<br />
<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball1.svg<br />
<br />
===八、柔焦濾鏡===<br />
===九、path===<br />
===十、動畫===<br />
<br />
==Inkscape==<br />
==GIS==<br />
*何謂 GIS ？<br />
*兩種主要的 GIS 。<br />
*基本框架。<br />
*marks<br />
*overlays<br />
*google 我的地圖<br />
*結合我的地圖與 GIS<br />
==圖形計算機==<br />
*取得 svgdraw.php<br />
*基本框架<br />
*繪製基本圖形<br />
*函式繪圖<br />
*google 圖形計算機</div>
蕭卉均
http://well-being-ng.net/wiki1231/index.php?title=%E8%A8%8E%E8%AB%96:%E8%B3%87%E8%A8%8A%E5%9F%BA%E7%A4%8E%E6%87%89%E7%94%A8/%E8%95%AD%E5%8D%89%E5%9D%87&diff=37894
討論:資訊基礎應用/蕭卉均
2018-01-16T09:24:44Z
<p>蕭卉均：/* 4.位移&旋轉&縮放&歪斜 */</p>
<hr />
<div>=ღ完整筆記ღ=<br />
==♡環境&工具♡==<br />
===1.環境===<br />
*伺服器與域名,伺服器DS216,網址6years.jendo.org<br />
*wifi,區網wifi：jendod&jendoa<br />
*網站空間,瀏覽器：firefox,優先於chrome,盡量不用IE<br />
*wiki上的個人頁,filezilla→開啟filezilla,並新增一個站台叫♕DS216+(共用)♕→主機設定:6years.jendo.org→協定:SFTP→使用者:共用→字碼集:UTF-8→連線,然後到♕home/www♕→建自己帳號的連線→可用的文字編輯器,如emeditor→連結filezilla&慣用的文字編輯器：♕編輯/設定/檔案編輯♕，選用♕使用自訂編輯器♕&♕總是使用預設的編輯器♕，並指定編輯器的路徑<br />
*課後重點筆記:<br />
*#table是開始,/table是結束<br />
*#IP:IP4,最多表達到255字,IPV4一般網頁使用,IP6,物聯網用<br />
*#物聯網:簡單說一切事物,得失相兼<br />
*#域名:域名伺服器(HOSTS)<br />
*#AI(人工智慧)<br />
*#big5,早期,只有繁體中文<br />
*#UTF-8,萬國碼<br />
<br />
===2.工具與設定===<br />
*firefox:Mozilla Firefox（簡稱Firefox）,中文俗稱火狐（中國大陸官方有使用但未註冊為商標）,是一個自由及開放原始碼的網頁瀏覽器,由Mozilla基金會及其子公司Mozilla公司開發<br />
*filezilla:ileZilla是一種快速&可信賴的FTP用戶端以及伺服器端開放原始碼程式,具有多種特色&直覺的介面,FileZilla在2003年11月獲選為SourceForge.net當月最佳推薦專案<br />
*EmEditor:EmEditor是江村軟體公司（Emurasoft,坐落於美國華盛頓州）所開發的一款在Windows平台上運行的文字編輯程式,EmEditor以運作輕巧&敏捷而又功能強大&豐富著稱而得到許多用戶的好評<br />
<br />
==♡HTML&HTTP♡==<br />
*發有者及發明年代:於西元1993年,W3C&WHATWG開發<br />
*HTML:超文件標示語言（英語：HyperText Markup Language,簡稱：HTML）是一種用於建立網頁的標準標示語言,HTML是一種基礎技術常與CSS&JavaScript一起被眾多網站用於設計令人賞心悅目的網頁&網頁應用程式以及行動應用程式的使用者介面<br />
*HTTP:超文本傳輸協定（英文：HyperText Transfer Protocol,縮寫：HTTP）是一種用於分佈式&協作式和超媒體資訊系統的應用層協議,HTTP是全球資訊網的資料通訊的基礎<br />
*xml:可延伸標記式語言（英語：Extensible Markup Language,簡稱：XML）是一種標記式語言,標記指電腦所能理解的資訊符號,通過此種標記,電腦之間可以處理包含各種資訊的文章等<br />
*課後筆記:<br />
*#筆記網頁建設:登入後搜尋{資訊基礎應用/蕭卉均}→點一下，開始編輯→編輯完點儲存頁面<br />
*#色碼表:https://www.toodoo.com/db/color.html<br />
*通訊錄:<br />
*<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
<table class='nicetable'><br />
<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
</table><br />
<br />
==♡ wiki ♡==<br />
*何謂wiki:Wiki是一種在全球資訊網上開放且可供多人協同創作的超文字系統,由沃德·坎寧安於1995年首先開發,沃德·坎寧安將wiki定義為「一種允許一群用戶用簡單的描述來建立和連線一組網頁的社會計算系統」<br />
*CC授權:創用CC授權條款（英語：Creative Commons license,簡稱CC授權）是一種公共版權授權條款,其允許分發受版權保護的作品,一個創用CC授權用於一個作者想給他人分享&使用&甚至創作衍生作品的權利<br />
*wiki語法:http://jendo.synology.me/wiki1231/index.php?title=Wiki_%E5%85%A5%E9%96%80%E8%AA%9E%E6%B3%95<br />
*wiki的word適應:履歷表<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E5%B1%A5%E6%AD%B7%E8%A1%A8.html<br />
==♡CSS♡==<br />
*何謂CSS:層疊樣式表（英語：Cascading Style Sheets,簡寫CSS）又稱串樣式列表&級聯樣式表&串接樣式表&層疊樣式表&階層式樣式表,一種用來為結構化文件（如HTML文件或XML應用）添加樣式（字型、間距和顏色等）的電腦語言,由W3C定義和維護,目前最新版本是CSS2.1，為W3C的推薦標準,CSS3現在已被大部分現代瀏覽器支援,而下一版的CSS4仍在開發中<br />
*用法:限制者才有標章,不限制者沒有標章<br />
*重要語法:<br />
*#Attribution(BY):姓名標示,您（使用者）可以複製&發行&展覽&表演&放映&廣播或通過資訊網路傳播本作品；您必須按照作者或者授權人指定的方式對作品進行姓名標示<br />
*#NonCommercial(NC):非商業性使用,您可以自由複製&散布&展示及演出本作品；您不得為商業目的而使用本作品<br />
*#NoDerivs(ND):禁止改作,您可以自由複製&散布&展示及演出本作品；您不得改變&轉變或更改本作品<br />
*#ShareAlike(SA):相同方式分享,您可以自由複製&散布&展示及演出本作品；若您改變&轉變或更改本作品,僅在遵守與本作品相同的授權條款下,您才能散布由本作品產生的衍生作品<br />
<br />
==♡SVG♡==<br />
===1.概述===<br />
*何謂SVG:可縮放向量圖形（英語：Scalable Vector Graphics,SVG）是一種基於可延伸標記式語言（XML）,用於描述二維向量圖形的圖形格式,SVG由W3C制定,是一個開放標準<br />
*點陣圖與向量圖的比較(含附檔名):<br />
*#SVG:又為向量圖,特色,放大不毛邊,https://upload.wikimedia.org/wikipedia/commons/5/53/Skull_and_crossbones.svg<br />
*#JPG:又名JEPG,失真,壓縮,http://wportfolio.wzu.edu.tw/blog/attach/995/27995/89/bf_51402_8868906_99219_2yzUdJnLy0AsZ9VdwaKNCA.jpg<br />
*#PNG:不失真,公開格式,https://s-media-cache-ak0.pinimg.com/originals/96/94/ef/9694ef6ecfd562c83e7a445ee9ee19ba.png<br />
*#GIF:可動畫,256色,https://2.bp.blogspot.com/-Ra6UuzwDGQg/WDfdq3X1GjI/AAAAAAAD0gc/MfVErIwBENYRH_DvvFsnThfYp-zVxugEgCLcB/s1600/AS000946_02.gif<br />
*SVG格式具有以下優點:<br />
*#圖檔可讀,易於修改和編輯（理論上如此,但實際上卻是因為各種不同的SVG檔編輯器而可能儲存成不易解讀的SVG檔案）<br />
*#與現有技術可以互動融合,例如,SVG技術本身的動態部分（包括時序控制和動畫）就是基於SMIL標準,另外,SVG檔案還可嵌入JavaScript（嚴格地說，應該是ECMAScript）指令碼來控制SVG物件<br />
*#SVG圖形格式可以方便的建立文字索引,從而實現基於內容的圖像搜尋<br />
*#SVG圖形格式支援多種濾鏡和特殊效果,在不改變圖像內容的前提下可以實現點陣圖格式中類似文字陰影的效果<br />
*#SVG圖形格式可以用來動態生成圖形,例如,可用SVG動態生成具有互動功能的地圖,嵌入網頁中,並顯示給終端用戶<br />
*SVG格式具有以下缺點：<br />
*#如何和已經占有重要市場份額的向量圖形格式Adobe Animate競爭的問題,事實上,Adobe Animate在Flash CC 2014版及以後的版本就都支援直接匯出SVG檔案了<br />
*#SVG的本地執行環境下的廠家支援程度<br />
*#由於原始的SVG檔是遵從XML語法,導致資料採用未壓縮的方式存放,因此相較於其他的向量圖形格式,同樣的檔案內容會比其他的檔案格式稍大,Adobe因此使用gzip壓縮開發出壓縮的SVG檔格式,附檔名為 .svgz, 但此種檔案格式除了Adobe旗下的軟體以外,未被廣泛支援使用<br />
*#舊版的SVG Viewer無法正確顯示出使用新版SVG格式的向量圖形<br />
<br />
===2.基本架構===<br />
*基本架構:SVG允許3種圖形物件類型：向量圖形,柵格圖像以及文字,圖形物件——包括PNG&JPEG這些柵格圖像——能夠被編組&設計&轉換及整合進先前的彩現物件中,文字可以在任何適用於應用程式的XML命名空間之內,從而提高SVG圖形的搜尋能力和無障礙性,SVG提供的功能集涵蓋了巢狀轉換&裁剪路徑&Alpha通道&濾鏡效果&模板物件以及可延伸性,SVG嚴格遵從XML語法,並用文字格式的描述性語言來描述圖像內容,因此是一種和圖像解析度無關的向量圖形格式,SVG可以實現動態和互動功能,在DOM模型的基礎上,SVG開發設計人員可以利用ECMAScript或者SMIL來進行時序控制或物件的操縱,SVG雖然是文字格式,但是SVG支援利用gzip壓縮演算法減少檔案尺寸,壓縮後的檔案通常用被稱為「SVGZ檔案」<br />
*基本樣式:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/arrow.svg<br />
*基本圖形:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/bearFace.svg<br />
*SVG主要支援以下幾種顯示物件：<br />
*#向量顯示物件,基本向量顯示物件包括矩形&圓&橢圓&多邊形&直線&任意曲線等<br />
*#嵌入式外部圖像,包括PNG&JPEG&SVG等<br />
*#文字物件<br />
<br />
===3.文字===<br />
*TEXT<br />
*#在「text」標籤開始與結束之間夾字,可用中英文,而使用「屬性」來規定文字的表現,所有的屬性都可以改用樣式來表達<br />
*#可用中文字形：<br />
*##屬性dx和dy基於前一個字的位置去做變化：值可為'10,20,30,40'，字的距離一個比一個更遠<br />
*##屬性x和y標示字的起點：值可為'10,20,30,40'，表示每個字的x或y座標<br />
*##屬性fill控制填入字的顏色,預設黑色<br />
*##屬性stroke控制字描框的顏色,預設 none<br />
*##屬性rotate='30'順時鐘轉30°。rotate='30,60,90,120,150,180,210'指定每個字的轉動角度<br />
*##用style控制字體&字形&尺寸,但顏色是用fill不是用color <br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/text.svg<br />
<br />
===4.位移&旋轉&縮放&歪斜===<br />
*相關屬性說明：<br />
*#平移變換(translate)：transform="translate(x,y)",即新坐標系的原點在原坐標系的(x,y)處,坐標軸的方向不變<br />
*#旋轉變換(rotate)：transform="rotate(angle cx,cy)",angle代表旋轉角度,預設單位是「度」,順時針為正,逆時針為負,(cx,cy)是旋轉中心所在的坐標,若省略旋轉中心坐標,則預設值是(0,0)<br />
*#伸縮變換(scale)：transform="scale(sx,sy)",sx,sy分別代表x軸方向和y方向拉伸或縮小的比例因子,拉伸：大於1；縮小：小於1,若省略sy，即sy=sx，作等比例縮放<br />
*#歪斜變換(skew)：transform='skewX(x-angle)'或transform='skewY(y-angle)',x-angle,y-angle分別代表沿x軸和y軸歪斜的角度<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/transform.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/bearFace.svg<br />
<br />
===5.群組===<br />
*步驟:<br />
*#先添加svg標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，其中才有href屬性的定義<br />
*#在defs段落中定義圖形，並賦予id<br />
*#用<use xlink:href='#某id'/>來引用既有的定義<br />
<br />
===6.定義一次,引用多次===<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/uses.svg<br />
<br />
===7.漸層===<br />
*漸層和濾鏡如果取中文名稱,瀏覽器還認得,但Inkscape和線上轉檔軟體就會不認得<br />
*「漸層」工具可以在多種顏色之間建立漸層混合,您可以從預設漸層填色中選擇,或是建立自己的漸層填色<br />
*線性漸層沿著直線從起點到終點建立陰影<br />
*放射性漸層沿著圓形圖樣從起點到終點建立陰影<br />
*尖角漸層繞著起點以逆時針掃射的方式建立陰影<br />
*反射性漸層在起點的一側建立相同的鏡像線性漸層<br />
*菱形漸層從菱形圖樣的中央往外建立陰影<br />
====(1)線性漸層====<br />
*步驟：<br />
*#不用添加svg標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，不會用到href屬性<br />
*#在defs段落中定義漸層,並賦予id<br />
*#用fill='url(#某id)'屬性來引用既有的漸層定義<br />
*linearGradient 線性漸層定義語法說明:<br />
*#漸層標籤中的 100%，指的是整個圖形<br />
*#其中的 id 屬性定出漸層名稱<br />
*#由x1,y1,x2,y2四個屬性決定漸層範圍,以及水平,垂直或角形漸層,四個屬性都以百分比表示：<br />
*##x1,y1,x2,y2屬性決定漸層開始和結束位置,x1,x2以圖形的寬度為準,y1,y2以圖形的高度為準<br />
*##當y1和y2相等,而x1和x2不同時,可創建水平漸層<br />
*##當x1和x2相等,而y1和y2不同時,可創建垂直漸層<br />
*##當x1和x2不同,且y1和y2不同時,可創建角形漸層<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/h.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/v.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/arrow.svg<br />
<br />
====(2)放射漸層====<br />
<br />
===八、柔焦濾鏡===<br />
===九、path===<br />
===十、動畫===<br />
<br />
==Inkscape==<br />
==GIS==<br />
*何謂 GIS ？<br />
*兩種主要的 GIS 。<br />
*基本框架。<br />
*marks<br />
*overlays<br />
*google 我的地圖<br />
*結合我的地圖與 GIS<br />
==圖形計算機==<br />
*取得 svgdraw.php<br />
*基本框架<br />
*繪製基本圖形<br />
*函式繪圖<br />
*google 圖形計算機</div>
蕭卉均
http://well-being-ng.net/wiki1231/index.php?title=%E8%A8%8E%E8%AB%96:%E8%B3%87%E8%A8%8A%E5%9F%BA%E7%A4%8E%E6%87%89%E7%94%A8/%E8%95%AD%E5%8D%89%E5%9D%87&diff=37893
討論:資訊基礎應用/蕭卉均
2018-01-16T09:22:47Z
<p>蕭卉均：/* (1)線性漸層 */</p>
<hr />
<div>=ღ完整筆記ღ=<br />
==♡環境&工具♡==<br />
===1.環境===<br />
*伺服器與域名,伺服器DS216,網址6years.jendo.org<br />
*wifi,區網wifi：jendod&jendoa<br />
*網站空間,瀏覽器：firefox,優先於chrome,盡量不用IE<br />
*wiki上的個人頁,filezilla→開啟filezilla,並新增一個站台叫♕DS216+(共用)♕→主機設定:6years.jendo.org→協定:SFTP→使用者:共用→字碼集:UTF-8→連線,然後到♕home/www♕→建自己帳號的連線→可用的文字編輯器,如emeditor→連結filezilla&慣用的文字編輯器：♕編輯/設定/檔案編輯♕，選用♕使用自訂編輯器♕&♕總是使用預設的編輯器♕，並指定編輯器的路徑<br />
*課後重點筆記:<br />
*#table是開始,/table是結束<br />
*#IP:IP4,最多表達到255字,IPV4一般網頁使用,IP6,物聯網用<br />
*#物聯網:簡單說一切事物,得失相兼<br />
*#域名:域名伺服器(HOSTS)<br />
*#AI(人工智慧)<br />
*#big5,早期,只有繁體中文<br />
*#UTF-8,萬國碼<br />
<br />
===2.工具與設定===<br />
*firefox:Mozilla Firefox（簡稱Firefox）,中文俗稱火狐（中國大陸官方有使用但未註冊為商標）,是一個自由及開放原始碼的網頁瀏覽器,由Mozilla基金會及其子公司Mozilla公司開發<br />
*filezilla:ileZilla是一種快速&可信賴的FTP用戶端以及伺服器端開放原始碼程式,具有多種特色&直覺的介面,FileZilla在2003年11月獲選為SourceForge.net當月最佳推薦專案<br />
*EmEditor:EmEditor是江村軟體公司（Emurasoft,坐落於美國華盛頓州）所開發的一款在Windows平台上運行的文字編輯程式,EmEditor以運作輕巧&敏捷而又功能強大&豐富著稱而得到許多用戶的好評<br />
<br />
==♡HTML&HTTP♡==<br />
*發有者及發明年代:於西元1993年,W3C&WHATWG開發<br />
*HTML:超文件標示語言（英語：HyperText Markup Language,簡稱：HTML）是一種用於建立網頁的標準標示語言,HTML是一種基礎技術常與CSS&JavaScript一起被眾多網站用於設計令人賞心悅目的網頁&網頁應用程式以及行動應用程式的使用者介面<br />
*HTTP:超文本傳輸協定（英文：HyperText Transfer Protocol,縮寫：HTTP）是一種用於分佈式&協作式和超媒體資訊系統的應用層協議,HTTP是全球資訊網的資料通訊的基礎<br />
*xml:可延伸標記式語言（英語：Extensible Markup Language,簡稱：XML）是一種標記式語言,標記指電腦所能理解的資訊符號,通過此種標記,電腦之間可以處理包含各種資訊的文章等<br />
*課後筆記:<br />
*#筆記網頁建設:登入後搜尋{資訊基礎應用/蕭卉均}→點一下，開始編輯→編輯完點儲存頁面<br />
*#色碼表:https://www.toodoo.com/db/color.html<br />
*通訊錄:<br />
*<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
<table class='nicetable'><br />
<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
</table><br />
<br />
==♡ wiki ♡==<br />
*何謂wiki:Wiki是一種在全球資訊網上開放且可供多人協同創作的超文字系統,由沃德·坎寧安於1995年首先開發,沃德·坎寧安將wiki定義為「一種允許一群用戶用簡單的描述來建立和連線一組網頁的社會計算系統」<br />
*CC授權:創用CC授權條款（英語：Creative Commons license,簡稱CC授權）是一種公共版權授權條款,其允許分發受版權保護的作品,一個創用CC授權用於一個作者想給他人分享&使用&甚至創作衍生作品的權利<br />
*wiki語法:http://jendo.synology.me/wiki1231/index.php?title=Wiki_%E5%85%A5%E9%96%80%E8%AA%9E%E6%B3%95<br />
*wiki的word適應:履歷表<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E5%B1%A5%E6%AD%B7%E8%A1%A8.html<br />
==♡CSS♡==<br />
*何謂CSS:層疊樣式表（英語：Cascading Style Sheets,簡寫CSS）又稱串樣式列表&級聯樣式表&串接樣式表&層疊樣式表&階層式樣式表,一種用來為結構化文件（如HTML文件或XML應用）添加樣式（字型、間距和顏色等）的電腦語言,由W3C定義和維護,目前最新版本是CSS2.1，為W3C的推薦標準,CSS3現在已被大部分現代瀏覽器支援,而下一版的CSS4仍在開發中<br />
*用法:限制者才有標章,不限制者沒有標章<br />
*重要語法:<br />
*#Attribution(BY):姓名標示,您（使用者）可以複製&發行&展覽&表演&放映&廣播或通過資訊網路傳播本作品；您必須按照作者或者授權人指定的方式對作品進行姓名標示<br />
*#NonCommercial(NC):非商業性使用,您可以自由複製&散布&展示及演出本作品；您不得為商業目的而使用本作品<br />
*#NoDerivs(ND):禁止改作,您可以自由複製&散布&展示及演出本作品；您不得改變&轉變或更改本作品<br />
*#ShareAlike(SA):相同方式分享,您可以自由複製&散布&展示及演出本作品；若您改變&轉變或更改本作品,僅在遵守與本作品相同的授權條款下,您才能散布由本作品產生的衍生作品<br />
<br />
==♡SVG♡==<br />
===1.概述===<br />
*何謂SVG:可縮放向量圖形（英語：Scalable Vector Graphics,SVG）是一種基於可延伸標記式語言（XML）,用於描述二維向量圖形的圖形格式,SVG由W3C制定,是一個開放標準<br />
*點陣圖與向量圖的比較(含附檔名):<br />
*#SVG:又為向量圖,特色,放大不毛邊,https://upload.wikimedia.org/wikipedia/commons/5/53/Skull_and_crossbones.svg<br />
*#JPG:又名JEPG,失真,壓縮,http://wportfolio.wzu.edu.tw/blog/attach/995/27995/89/bf_51402_8868906_99219_2yzUdJnLy0AsZ9VdwaKNCA.jpg<br />
*#PNG:不失真,公開格式,https://s-media-cache-ak0.pinimg.com/originals/96/94/ef/9694ef6ecfd562c83e7a445ee9ee19ba.png<br />
*#GIF:可動畫,256色,https://2.bp.blogspot.com/-Ra6UuzwDGQg/WDfdq3X1GjI/AAAAAAAD0gc/MfVErIwBENYRH_DvvFsnThfYp-zVxugEgCLcB/s1600/AS000946_02.gif<br />
*SVG格式具有以下優點:<br />
*#圖檔可讀,易於修改和編輯（理論上如此,但實際上卻是因為各種不同的SVG檔編輯器而可能儲存成不易解讀的SVG檔案）<br />
*#與現有技術可以互動融合,例如,SVG技術本身的動態部分（包括時序控制和動畫）就是基於SMIL標準,另外,SVG檔案還可嵌入JavaScript（嚴格地說，應該是ECMAScript）指令碼來控制SVG物件<br />
*#SVG圖形格式可以方便的建立文字索引,從而實現基於內容的圖像搜尋<br />
*#SVG圖形格式支援多種濾鏡和特殊效果,在不改變圖像內容的前提下可以實現點陣圖格式中類似文字陰影的效果<br />
*#SVG圖形格式可以用來動態生成圖形,例如,可用SVG動態生成具有互動功能的地圖,嵌入網頁中,並顯示給終端用戶<br />
*SVG格式具有以下缺點：<br />
*#如何和已經占有重要市場份額的向量圖形格式Adobe Animate競爭的問題,事實上,Adobe Animate在Flash CC 2014版及以後的版本就都支援直接匯出SVG檔案了<br />
*#SVG的本地執行環境下的廠家支援程度<br />
*#由於原始的SVG檔是遵從XML語法,導致資料採用未壓縮的方式存放,因此相較於其他的向量圖形格式,同樣的檔案內容會比其他的檔案格式稍大,Adobe因此使用gzip壓縮開發出壓縮的SVG檔格式,附檔名為 .svgz, 但此種檔案格式除了Adobe旗下的軟體以外,未被廣泛支援使用<br />
*#舊版的SVG Viewer無法正確顯示出使用新版SVG格式的向量圖形<br />
<br />
===2.基本架構===<br />
*基本架構:SVG允許3種圖形物件類型：向量圖形,柵格圖像以及文字,圖形物件——包括PNG&JPEG這些柵格圖像——能夠被編組&設計&轉換及整合進先前的彩現物件中,文字可以在任何適用於應用程式的XML命名空間之內,從而提高SVG圖形的搜尋能力和無障礙性,SVG提供的功能集涵蓋了巢狀轉換&裁剪路徑&Alpha通道&濾鏡效果&模板物件以及可延伸性,SVG嚴格遵從XML語法,並用文字格式的描述性語言來描述圖像內容,因此是一種和圖像解析度無關的向量圖形格式,SVG可以實現動態和互動功能,在DOM模型的基礎上,SVG開發設計人員可以利用ECMAScript或者SMIL來進行時序控制或物件的操縱,SVG雖然是文字格式,但是SVG支援利用gzip壓縮演算法減少檔案尺寸,壓縮後的檔案通常用被稱為「SVGZ檔案」<br />
*基本樣式:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/arrow.svg<br />
*基本圖形:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/bearFace.svg<br />
*SVG主要支援以下幾種顯示物件：<br />
*#向量顯示物件,基本向量顯示物件包括矩形&圓&橢圓&多邊形&直線&任意曲線等<br />
*#嵌入式外部圖像,包括PNG&JPEG&SVG等<br />
*#文字物件<br />
<br />
===3.文字===<br />
*TEXT<br />
*#在「text」標籤開始與結束之間夾字,可用中英文,而使用「屬性」來規定文字的表現,所有的屬性都可以改用樣式來表達<br />
*#可用中文字形：<br />
*##屬性dx和dy基於前一個字的位置去做變化：值可為'10,20,30,40'，字的距離一個比一個更遠<br />
*##屬性x和y標示字的起點：值可為'10,20,30,40'，表示每個字的x或y座標<br />
*##屬性fill控制填入字的顏色,預設黑色<br />
*##屬性stroke控制字描框的顏色,預設 none<br />
*##屬性rotate='30'順時鐘轉30°。rotate='30,60,90,120,150,180,210'指定每個字的轉動角度<br />
*##用style控制字體&字形&尺寸,但顏色是用fill不是用color <br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/text.svg<br />
<br />
===4.位移&旋轉&縮放&歪斜===<br />
*相關屬性說明：<br />
*#平移變換(translate)：transform="translate(x,y)",即新坐標系的原點在原坐標系的(x,y)處,坐標軸的方向不變<br />
*#旋轉變換(rotate)：transform="rotate(angle cx,cy)",angle代表旋轉角度,預設單位是「度」,順時針為正,逆時針為負,(cx,cy)是旋轉中心所在的坐標,若省略旋轉中心坐標,則預設值是(0,0)<br />
*#伸縮變換(scale)：transform="scale(sx,sy)",sx,sy分別代表x軸方向和y方向拉伸或縮小的比例因子,拉伸：大於1；縮小：小於1,若省略sy，即sy=sx，作等比例縮放<br />
*#歪斜變換(skew)：transform='skewX(x-angle)'或transform='skewY(y-angle)',x-angle,y-angle分別代表沿x軸和y軸歪斜的角度<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/transform.svg<br />
<br />
===5.群組===<br />
*步驟:<br />
*#先添加svg標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，其中才有href屬性的定義<br />
*#在defs段落中定義圖形，並賦予id<br />
*#用<use xlink:href='#某id'/>來引用既有的定義<br />
<br />
===6.定義一次,引用多次===<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/uses.svg<br />
<br />
===7.漸層===<br />
*漸層和濾鏡如果取中文名稱,瀏覽器還認得,但Inkscape和線上轉檔軟體就會不認得<br />
*「漸層」工具可以在多種顏色之間建立漸層混合,您可以從預設漸層填色中選擇,或是建立自己的漸層填色<br />
*線性漸層沿著直線從起點到終點建立陰影<br />
*放射性漸層沿著圓形圖樣從起點到終點建立陰影<br />
*尖角漸層繞著起點以逆時針掃射的方式建立陰影<br />
*反射性漸層在起點的一側建立相同的鏡像線性漸層<br />
*菱形漸層從菱形圖樣的中央往外建立陰影<br />
====(1)線性漸層====<br />
*步驟：<br />
*#不用添加svg標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，不會用到href屬性<br />
*#在defs段落中定義漸層,並賦予id<br />
*#用fill='url(#某id)'屬性來引用既有的漸層定義<br />
*linearGradient 線性漸層定義語法說明:<br />
*#漸層標籤中的 100%，指的是整個圖形<br />
*#其中的 id 屬性定出漸層名稱<br />
*#由x1,y1,x2,y2四個屬性決定漸層範圍,以及水平,垂直或角形漸層,四個屬性都以百分比表示：<br />
*##x1,y1,x2,y2屬性決定漸層開始和結束位置,x1,x2以圖形的寬度為準,y1,y2以圖形的高度為準<br />
*##當y1和y2相等,而x1和x2不同時,可創建水平漸層<br />
*##當x1和x2相等,而y1和y2不同時,可創建垂直漸層<br />
*##當x1和x2不同,且y1和y2不同時,可創建角形漸層<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/h.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/v.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/arrow.svg<br />
<br />
====(2)放射漸層====<br />
<br />
===八、柔焦濾鏡===<br />
===九、path===<br />
===十、動畫===<br />
<br />
==Inkscape==<br />
==GIS==<br />
*何謂 GIS ？<br />
*兩種主要的 GIS 。<br />
*基本框架。<br />
*marks<br />
*overlays<br />
*google 我的地圖<br />
*結合我的地圖與 GIS<br />
==圖形計算機==<br />
*取得 svgdraw.php<br />
*基本框架<br />
*繪製基本圖形<br />
*函式繪圖<br />
*google 圖形計算機</div>
蕭卉均
http://well-being-ng.net/wiki1231/index.php?title=%E8%A8%8E%E8%AB%96:%E8%B3%87%E8%A8%8A%E5%9F%BA%E7%A4%8E%E6%87%89%E7%94%A8/%E8%95%AD%E5%8D%89%E5%9D%87&diff=37892
討論:資訊基礎應用/蕭卉均
2018-01-16T09:20:14Z
<p>蕭卉均：/* (1)線性漸層 */</p>
<hr />
<div>=ღ完整筆記ღ=<br />
==♡環境&工具♡==<br />
===1.環境===<br />
*伺服器與域名,伺服器DS216,網址6years.jendo.org<br />
*wifi,區網wifi：jendod&jendoa<br />
*網站空間,瀏覽器：firefox,優先於chrome,盡量不用IE<br />
*wiki上的個人頁,filezilla→開啟filezilla,並新增一個站台叫♕DS216+(共用)♕→主機設定:6years.jendo.org→協定:SFTP→使用者:共用→字碼集:UTF-8→連線,然後到♕home/www♕→建自己帳號的連線→可用的文字編輯器,如emeditor→連結filezilla&慣用的文字編輯器：♕編輯/設定/檔案編輯♕，選用♕使用自訂編輯器♕&♕總是使用預設的編輯器♕，並指定編輯器的路徑<br />
*課後重點筆記:<br />
*#table是開始,/table是結束<br />
*#IP:IP4,最多表達到255字,IPV4一般網頁使用,IP6,物聯網用<br />
*#物聯網:簡單說一切事物,得失相兼<br />
*#域名:域名伺服器(HOSTS)<br />
*#AI(人工智慧)<br />
*#big5,早期,只有繁體中文<br />
*#UTF-8,萬國碼<br />
<br />
===2.工具與設定===<br />
*firefox:Mozilla Firefox（簡稱Firefox）,中文俗稱火狐（中國大陸官方有使用但未註冊為商標）,是一個自由及開放原始碼的網頁瀏覽器,由Mozilla基金會及其子公司Mozilla公司開發<br />
*filezilla:ileZilla是一種快速&可信賴的FTP用戶端以及伺服器端開放原始碼程式,具有多種特色&直覺的介面,FileZilla在2003年11月獲選為SourceForge.net當月最佳推薦專案<br />
*EmEditor:EmEditor是江村軟體公司（Emurasoft,坐落於美國華盛頓州）所開發的一款在Windows平台上運行的文字編輯程式,EmEditor以運作輕巧&敏捷而又功能強大&豐富著稱而得到許多用戶的好評<br />
<br />
==♡HTML&HTTP♡==<br />
*發有者及發明年代:於西元1993年,W3C&WHATWG開發<br />
*HTML:超文件標示語言（英語：HyperText Markup Language,簡稱：HTML）是一種用於建立網頁的標準標示語言,HTML是一種基礎技術常與CSS&JavaScript一起被眾多網站用於設計令人賞心悅目的網頁&網頁應用程式以及行動應用程式的使用者介面<br />
*HTTP:超文本傳輸協定（英文：HyperText Transfer Protocol,縮寫：HTTP）是一種用於分佈式&協作式和超媒體資訊系統的應用層協議,HTTP是全球資訊網的資料通訊的基礎<br />
*xml:可延伸標記式語言（英語：Extensible Markup Language,簡稱：XML）是一種標記式語言,標記指電腦所能理解的資訊符號,通過此種標記,電腦之間可以處理包含各種資訊的文章等<br />
*課後筆記:<br />
*#筆記網頁建設:登入後搜尋{資訊基礎應用/蕭卉均}→點一下，開始編輯→編輯完點儲存頁面<br />
*#色碼表:https://www.toodoo.com/db/color.html<br />
*通訊錄:<br />
*<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
<table class='nicetable'><br />
<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
</table><br />
<br />
==♡ wiki ♡==<br />
*何謂wiki:Wiki是一種在全球資訊網上開放且可供多人協同創作的超文字系統,由沃德·坎寧安於1995年首先開發,沃德·坎寧安將wiki定義為「一種允許一群用戶用簡單的描述來建立和連線一組網頁的社會計算系統」<br />
*CC授權:創用CC授權條款（英語：Creative Commons license,簡稱CC授權）是一種公共版權授權條款,其允許分發受版權保護的作品,一個創用CC授權用於一個作者想給他人分享&使用&甚至創作衍生作品的權利<br />
*wiki語法:http://jendo.synology.me/wiki1231/index.php?title=Wiki_%E5%85%A5%E9%96%80%E8%AA%9E%E6%B3%95<br />
*wiki的word適應:履歷表<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E5%B1%A5%E6%AD%B7%E8%A1%A8.html<br />
==♡CSS♡==<br />
*何謂CSS:層疊樣式表（英語：Cascading Style Sheets,簡寫CSS）又稱串樣式列表&級聯樣式表&串接樣式表&層疊樣式表&階層式樣式表,一種用來為結構化文件（如HTML文件或XML應用）添加樣式（字型、間距和顏色等）的電腦語言,由W3C定義和維護,目前最新版本是CSS2.1，為W3C的推薦標準,CSS3現在已被大部分現代瀏覽器支援,而下一版的CSS4仍在開發中<br />
*用法:限制者才有標章,不限制者沒有標章<br />
*重要語法:<br />
*#Attribution(BY):姓名標示,您（使用者）可以複製&發行&展覽&表演&放映&廣播或通過資訊網路傳播本作品；您必須按照作者或者授權人指定的方式對作品進行姓名標示<br />
*#NonCommercial(NC):非商業性使用,您可以自由複製&散布&展示及演出本作品；您不得為商業目的而使用本作品<br />
*#NoDerivs(ND):禁止改作,您可以自由複製&散布&展示及演出本作品；您不得改變&轉變或更改本作品<br />
*#ShareAlike(SA):相同方式分享,您可以自由複製&散布&展示及演出本作品；若您改變&轉變或更改本作品,僅在遵守與本作品相同的授權條款下,您才能散布由本作品產生的衍生作品<br />
<br />
==♡SVG♡==<br />
===1.概述===<br />
*何謂SVG:可縮放向量圖形（英語：Scalable Vector Graphics,SVG）是一種基於可延伸標記式語言（XML）,用於描述二維向量圖形的圖形格式,SVG由W3C制定,是一個開放標準<br />
*點陣圖與向量圖的比較(含附檔名):<br />
*#SVG:又為向量圖,特色,放大不毛邊,https://upload.wikimedia.org/wikipedia/commons/5/53/Skull_and_crossbones.svg<br />
*#JPG:又名JEPG,失真,壓縮,http://wportfolio.wzu.edu.tw/blog/attach/995/27995/89/bf_51402_8868906_99219_2yzUdJnLy0AsZ9VdwaKNCA.jpg<br />
*#PNG:不失真,公開格式,https://s-media-cache-ak0.pinimg.com/originals/96/94/ef/9694ef6ecfd562c83e7a445ee9ee19ba.png<br />
*#GIF:可動畫,256色,https://2.bp.blogspot.com/-Ra6UuzwDGQg/WDfdq3X1GjI/AAAAAAAD0gc/MfVErIwBENYRH_DvvFsnThfYp-zVxugEgCLcB/s1600/AS000946_02.gif<br />
*SVG格式具有以下優點:<br />
*#圖檔可讀,易於修改和編輯（理論上如此,但實際上卻是因為各種不同的SVG檔編輯器而可能儲存成不易解讀的SVG檔案）<br />
*#與現有技術可以互動融合,例如,SVG技術本身的動態部分（包括時序控制和動畫）就是基於SMIL標準,另外,SVG檔案還可嵌入JavaScript（嚴格地說，應該是ECMAScript）指令碼來控制SVG物件<br />
*#SVG圖形格式可以方便的建立文字索引,從而實現基於內容的圖像搜尋<br />
*#SVG圖形格式支援多種濾鏡和特殊效果,在不改變圖像內容的前提下可以實現點陣圖格式中類似文字陰影的效果<br />
*#SVG圖形格式可以用來動態生成圖形,例如,可用SVG動態生成具有互動功能的地圖,嵌入網頁中,並顯示給終端用戶<br />
*SVG格式具有以下缺點：<br />
*#如何和已經占有重要市場份額的向量圖形格式Adobe Animate競爭的問題,事實上,Adobe Animate在Flash CC 2014版及以後的版本就都支援直接匯出SVG檔案了<br />
*#SVG的本地執行環境下的廠家支援程度<br />
*#由於原始的SVG檔是遵從XML語法,導致資料採用未壓縮的方式存放,因此相較於其他的向量圖形格式,同樣的檔案內容會比其他的檔案格式稍大,Adobe因此使用gzip壓縮開發出壓縮的SVG檔格式,附檔名為 .svgz, 但此種檔案格式除了Adobe旗下的軟體以外,未被廣泛支援使用<br />
*#舊版的SVG Viewer無法正確顯示出使用新版SVG格式的向量圖形<br />
<br />
===2.基本架構===<br />
*基本架構:SVG允許3種圖形物件類型：向量圖形,柵格圖像以及文字,圖形物件——包括PNG&JPEG這些柵格圖像——能夠被編組&設計&轉換及整合進先前的彩現物件中,文字可以在任何適用於應用程式的XML命名空間之內,從而提高SVG圖形的搜尋能力和無障礙性,SVG提供的功能集涵蓋了巢狀轉換&裁剪路徑&Alpha通道&濾鏡效果&模板物件以及可延伸性,SVG嚴格遵從XML語法,並用文字格式的描述性語言來描述圖像內容,因此是一種和圖像解析度無關的向量圖形格式,SVG可以實現動態和互動功能,在DOM模型的基礎上,SVG開發設計人員可以利用ECMAScript或者SMIL來進行時序控制或物件的操縱,SVG雖然是文字格式,但是SVG支援利用gzip壓縮演算法減少檔案尺寸,壓縮後的檔案通常用被稱為「SVGZ檔案」<br />
*基本樣式:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/arrow.svg<br />
*基本圖形:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/bearFace.svg<br />
*SVG主要支援以下幾種顯示物件：<br />
*#向量顯示物件,基本向量顯示物件包括矩形&圓&橢圓&多邊形&直線&任意曲線等<br />
*#嵌入式外部圖像,包括PNG&JPEG&SVG等<br />
*#文字物件<br />
<br />
===3.文字===<br />
*TEXT<br />
*#在「text」標籤開始與結束之間夾字,可用中英文,而使用「屬性」來規定文字的表現,所有的屬性都可以改用樣式來表達<br />
*#可用中文字形：<br />
*##屬性dx和dy基於前一個字的位置去做變化：值可為'10,20,30,40'，字的距離一個比一個更遠<br />
*##屬性x和y標示字的起點：值可為'10,20,30,40'，表示每個字的x或y座標<br />
*##屬性fill控制填入字的顏色,預設黑色<br />
*##屬性stroke控制字描框的顏色,預設 none<br />
*##屬性rotate='30'順時鐘轉30°。rotate='30,60,90,120,150,180,210'指定每個字的轉動角度<br />
*##用style控制字體&字形&尺寸,但顏色是用fill不是用color <br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/text.svg<br />
<br />
===4.位移&旋轉&縮放&歪斜===<br />
*相關屬性說明：<br />
*#平移變換(translate)：transform="translate(x,y)",即新坐標系的原點在原坐標系的(x,y)處,坐標軸的方向不變<br />
*#旋轉變換(rotate)：transform="rotate(angle cx,cy)",angle代表旋轉角度,預設單位是「度」,順時針為正,逆時針為負,(cx,cy)是旋轉中心所在的坐標,若省略旋轉中心坐標,則預設值是(0,0)<br />
*#伸縮變換(scale)：transform="scale(sx,sy)",sx,sy分別代表x軸方向和y方向拉伸或縮小的比例因子,拉伸：大於1；縮小：小於1,若省略sy，即sy=sx，作等比例縮放<br />
*#歪斜變換(skew)：transform='skewX(x-angle)'或transform='skewY(y-angle)',x-angle,y-angle分別代表沿x軸和y軸歪斜的角度<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/transform.svg<br />
<br />
===5.群組===<br />
*步驟:<br />
*#先添加svg標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，其中才有href屬性的定義<br />
*#在defs段落中定義圖形，並賦予id<br />
*#用<use xlink:href='#某id'/>來引用既有的定義<br />
<br />
===6.定義一次,引用多次===<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/uses.svg<br />
<br />
===7.漸層===<br />
*漸層和濾鏡如果取中文名稱,瀏覽器還認得,但Inkscape和線上轉檔軟體就會不認得<br />
*「漸層」工具可以在多種顏色之間建立漸層混合,您可以從預設漸層填色中選擇,或是建立自己的漸層填色<br />
*線性漸層沿著直線從起點到終點建立陰影<br />
*放射性漸層沿著圓形圖樣從起點到終點建立陰影<br />
*尖角漸層繞著起點以逆時針掃射的方式建立陰影<br />
*反射性漸層在起點的一側建立相同的鏡像線性漸層<br />
*菱形漸層從菱形圖樣的中央往外建立陰影<br />
====(1)線性漸層====<br />
*步驟：<br />
*#不用添加svg標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，不會用到href屬性<br />
*#在defs段落中定義漸層,並賦予id<br />
*#用fill='url(#某id)'屬性來引用既有的漸層定義<br />
*linearGradient 線性漸層定義語法說明:<br />
*#漸層標籤中的 100%，指的是整個圖形<br />
*#其中的 id 屬性定出漸層名稱<br />
*#由x1,y1,x2,y2四個屬性決定漸層範圍,以及水平,垂直或角形漸層,四個屬性都以百分比表示：<br />
*##x1,y1,x2,y2屬性決定漸層開始和結束位置,x1,x2以圖形的寬度為準,y1,y2以圖形的高度為準<br />
*##當y1和y2相等,而x1和x2不同時,可創建水平漸層<br />
*##當x1和x2相等,而y1和y2不同時,可創建垂直漸層<br />
*##當x1和x2不同,且y1和y2不同時,可創建角形漸層<br />
<br />
====(2)放射漸層====<br />
<br />
===八、柔焦濾鏡===<br />
===九、path===<br />
===十、動畫===<br />
<br />
==Inkscape==<br />
==GIS==<br />
*何謂 GIS ？<br />
*兩種主要的 GIS 。<br />
*基本框架。<br />
*marks<br />
*overlays<br />
*google 我的地圖<br />
*結合我的地圖與 GIS<br />
==圖形計算機==<br />
*取得 svgdraw.php<br />
*基本框架<br />
*繪製基本圖形<br />
*函式繪圖<br />
*google 圖形計算機</div>
蕭卉均
http://well-being-ng.net/wiki1231/index.php?title=%E8%A8%8E%E8%AB%96:%E8%B3%87%E8%A8%8A%E5%9F%BA%E7%A4%8E%E6%87%89%E7%94%A8/%E8%95%AD%E5%8D%89%E5%9D%87&diff=37891
討論:資訊基礎應用/蕭卉均
2018-01-16T09:17:42Z
<p>蕭卉均：/* 7.漸層 */</p>
<hr />
<div>=ღ完整筆記ღ=<br />
==♡環境&工具♡==<br />
===1.環境===<br />
*伺服器與域名,伺服器DS216,網址6years.jendo.org<br />
*wifi,區網wifi：jendod&jendoa<br />
*網站空間,瀏覽器：firefox,優先於chrome,盡量不用IE<br />
*wiki上的個人頁,filezilla→開啟filezilla,並新增一個站台叫♕DS216+(共用)♕→主機設定:6years.jendo.org→協定:SFTP→使用者:共用→字碼集:UTF-8→連線,然後到♕home/www♕→建自己帳號的連線→可用的文字編輯器,如emeditor→連結filezilla&慣用的文字編輯器：♕編輯/設定/檔案編輯♕，選用♕使用自訂編輯器♕&♕總是使用預設的編輯器♕，並指定編輯器的路徑<br />
*課後重點筆記:<br />
*#table是開始,/table是結束<br />
*#IP:IP4,最多表達到255字,IPV4一般網頁使用,IP6,物聯網用<br />
*#物聯網:簡單說一切事物,得失相兼<br />
*#域名:域名伺服器(HOSTS)<br />
*#AI(人工智慧)<br />
*#big5,早期,只有繁體中文<br />
*#UTF-8,萬國碼<br />
<br />
===2.工具與設定===<br />
*firefox:Mozilla Firefox（簡稱Firefox）,中文俗稱火狐（中國大陸官方有使用但未註冊為商標）,是一個自由及開放原始碼的網頁瀏覽器,由Mozilla基金會及其子公司Mozilla公司開發<br />
*filezilla:ileZilla是一種快速&可信賴的FTP用戶端以及伺服器端開放原始碼程式,具有多種特色&直覺的介面,FileZilla在2003年11月獲選為SourceForge.net當月最佳推薦專案<br />
*EmEditor:EmEditor是江村軟體公司（Emurasoft,坐落於美國華盛頓州）所開發的一款在Windows平台上運行的文字編輯程式,EmEditor以運作輕巧&敏捷而又功能強大&豐富著稱而得到許多用戶的好評<br />
<br />
==♡HTML&HTTP♡==<br />
*發有者及發明年代:於西元1993年,W3C&WHATWG開發<br />
*HTML:超文件標示語言（英語：HyperText Markup Language,簡稱：HTML）是一種用於建立網頁的標準標示語言,HTML是一種基礎技術常與CSS&JavaScript一起被眾多網站用於設計令人賞心悅目的網頁&網頁應用程式以及行動應用程式的使用者介面<br />
*HTTP:超文本傳輸協定（英文：HyperText Transfer Protocol,縮寫：HTTP）是一種用於分佈式&協作式和超媒體資訊系統的應用層協議,HTTP是全球資訊網的資料通訊的基礎<br />
*xml:可延伸標記式語言（英語：Extensible Markup Language,簡稱：XML）是一種標記式語言,標記指電腦所能理解的資訊符號,通過此種標記,電腦之間可以處理包含各種資訊的文章等<br />
*課後筆記:<br />
*#筆記網頁建設:登入後搜尋{資訊基礎應用/蕭卉均}→點一下，開始編輯→編輯完點儲存頁面<br />
*#色碼表:https://www.toodoo.com/db/color.html<br />
*通訊錄:<br />
*<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
<table class='nicetable'><br />
<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
</table><br />
<br />
==♡ wiki ♡==<br />
*何謂wiki:Wiki是一種在全球資訊網上開放且可供多人協同創作的超文字系統,由沃德·坎寧安於1995年首先開發,沃德·坎寧安將wiki定義為「一種允許一群用戶用簡單的描述來建立和連線一組網頁的社會計算系統」<br />
*CC授權:創用CC授權條款（英語：Creative Commons license,簡稱CC授權）是一種公共版權授權條款,其允許分發受版權保護的作品,一個創用CC授權用於一個作者想給他人分享&使用&甚至創作衍生作品的權利<br />
*wiki語法:http://jendo.synology.me/wiki1231/index.php?title=Wiki_%E5%85%A5%E9%96%80%E8%AA%9E%E6%B3%95<br />
*wiki的word適應:履歷表<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E5%B1%A5%E6%AD%B7%E8%A1%A8.html<br />
==♡CSS♡==<br />
*何謂CSS:層疊樣式表（英語：Cascading Style Sheets,簡寫CSS）又稱串樣式列表&級聯樣式表&串接樣式表&層疊樣式表&階層式樣式表,一種用來為結構化文件（如HTML文件或XML應用）添加樣式（字型、間距和顏色等）的電腦語言,由W3C定義和維護,目前最新版本是CSS2.1，為W3C的推薦標準,CSS3現在已被大部分現代瀏覽器支援,而下一版的CSS4仍在開發中<br />
*用法:限制者才有標章,不限制者沒有標章<br />
*重要語法:<br />
*#Attribution(BY):姓名標示,您（使用者）可以複製&發行&展覽&表演&放映&廣播或通過資訊網路傳播本作品；您必須按照作者或者授權人指定的方式對作品進行姓名標示<br />
*#NonCommercial(NC):非商業性使用,您可以自由複製&散布&展示及演出本作品；您不得為商業目的而使用本作品<br />
*#NoDerivs(ND):禁止改作,您可以自由複製&散布&展示及演出本作品；您不得改變&轉變或更改本作品<br />
*#ShareAlike(SA):相同方式分享,您可以自由複製&散布&展示及演出本作品；若您改變&轉變或更改本作品,僅在遵守與本作品相同的授權條款下,您才能散布由本作品產生的衍生作品<br />
<br />
==♡SVG♡==<br />
===1.概述===<br />
*何謂SVG:可縮放向量圖形（英語：Scalable Vector Graphics,SVG）是一種基於可延伸標記式語言（XML）,用於描述二維向量圖形的圖形格式,SVG由W3C制定,是一個開放標準<br />
*點陣圖與向量圖的比較(含附檔名):<br />
*#SVG:又為向量圖,特色,放大不毛邊,https://upload.wikimedia.org/wikipedia/commons/5/53/Skull_and_crossbones.svg<br />
*#JPG:又名JEPG,失真,壓縮,http://wportfolio.wzu.edu.tw/blog/attach/995/27995/89/bf_51402_8868906_99219_2yzUdJnLy0AsZ9VdwaKNCA.jpg<br />
*#PNG:不失真,公開格式,https://s-media-cache-ak0.pinimg.com/originals/96/94/ef/9694ef6ecfd562c83e7a445ee9ee19ba.png<br />
*#GIF:可動畫,256色,https://2.bp.blogspot.com/-Ra6UuzwDGQg/WDfdq3X1GjI/AAAAAAAD0gc/MfVErIwBENYRH_DvvFsnThfYp-zVxugEgCLcB/s1600/AS000946_02.gif<br />
*SVG格式具有以下優點:<br />
*#圖檔可讀,易於修改和編輯（理論上如此,但實際上卻是因為各種不同的SVG檔編輯器而可能儲存成不易解讀的SVG檔案）<br />
*#與現有技術可以互動融合,例如,SVG技術本身的動態部分（包括時序控制和動畫）就是基於SMIL標準,另外,SVG檔案還可嵌入JavaScript（嚴格地說，應該是ECMAScript）指令碼來控制SVG物件<br />
*#SVG圖形格式可以方便的建立文字索引,從而實現基於內容的圖像搜尋<br />
*#SVG圖形格式支援多種濾鏡和特殊效果,在不改變圖像內容的前提下可以實現點陣圖格式中類似文字陰影的效果<br />
*#SVG圖形格式可以用來動態生成圖形,例如,可用SVG動態生成具有互動功能的地圖,嵌入網頁中,並顯示給終端用戶<br />
*SVG格式具有以下缺點：<br />
*#如何和已經占有重要市場份額的向量圖形格式Adobe Animate競爭的問題,事實上,Adobe Animate在Flash CC 2014版及以後的版本就都支援直接匯出SVG檔案了<br />
*#SVG的本地執行環境下的廠家支援程度<br />
*#由於原始的SVG檔是遵從XML語法,導致資料採用未壓縮的方式存放,因此相較於其他的向量圖形格式,同樣的檔案內容會比其他的檔案格式稍大,Adobe因此使用gzip壓縮開發出壓縮的SVG檔格式,附檔名為 .svgz, 但此種檔案格式除了Adobe旗下的軟體以外,未被廣泛支援使用<br />
*#舊版的SVG Viewer無法正確顯示出使用新版SVG格式的向量圖形<br />
<br />
===2.基本架構===<br />
*基本架構:SVG允許3種圖形物件類型：向量圖形,柵格圖像以及文字,圖形物件——包括PNG&JPEG這些柵格圖像——能夠被編組&設計&轉換及整合進先前的彩現物件中,文字可以在任何適用於應用程式的XML命名空間之內,從而提高SVG圖形的搜尋能力和無障礙性,SVG提供的功能集涵蓋了巢狀轉換&裁剪路徑&Alpha通道&濾鏡效果&模板物件以及可延伸性,SVG嚴格遵從XML語法,並用文字格式的描述性語言來描述圖像內容,因此是一種和圖像解析度無關的向量圖形格式,SVG可以實現動態和互動功能,在DOM模型的基礎上,SVG開發設計人員可以利用ECMAScript或者SMIL來進行時序控制或物件的操縱,SVG雖然是文字格式,但是SVG支援利用gzip壓縮演算法減少檔案尺寸,壓縮後的檔案通常用被稱為「SVGZ檔案」<br />
*基本樣式:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/arrow.svg<br />
*基本圖形:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/bearFace.svg<br />
*SVG主要支援以下幾種顯示物件：<br />
*#向量顯示物件,基本向量顯示物件包括矩形&圓&橢圓&多邊形&直線&任意曲線等<br />
*#嵌入式外部圖像,包括PNG&JPEG&SVG等<br />
*#文字物件<br />
<br />
===3.文字===<br />
*TEXT<br />
*#在「text」標籤開始與結束之間夾字,可用中英文,而使用「屬性」來規定文字的表現,所有的屬性都可以改用樣式來表達<br />
*#可用中文字形：<br />
*##屬性dx和dy基於前一個字的位置去做變化：值可為'10,20,30,40'，字的距離一個比一個更遠<br />
*##屬性x和y標示字的起點：值可為'10,20,30,40'，表示每個字的x或y座標<br />
*##屬性fill控制填入字的顏色,預設黑色<br />
*##屬性stroke控制字描框的顏色,預設 none<br />
*##屬性rotate='30'順時鐘轉30°。rotate='30,60,90,120,150,180,210'指定每個字的轉動角度<br />
*##用style控制字體&字形&尺寸,但顏色是用fill不是用color <br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/text.svg<br />
<br />
===4.位移&旋轉&縮放&歪斜===<br />
*相關屬性說明：<br />
*#平移變換(translate)：transform="translate(x,y)",即新坐標系的原點在原坐標系的(x,y)處,坐標軸的方向不變<br />
*#旋轉變換(rotate)：transform="rotate(angle cx,cy)",angle代表旋轉角度,預設單位是「度」,順時針為正,逆時針為負,(cx,cy)是旋轉中心所在的坐標,若省略旋轉中心坐標,則預設值是(0,0)<br />
*#伸縮變換(scale)：transform="scale(sx,sy)",sx,sy分別代表x軸方向和y方向拉伸或縮小的比例因子,拉伸：大於1；縮小：小於1,若省略sy，即sy=sx，作等比例縮放<br />
*#歪斜變換(skew)：transform='skewX(x-angle)'或transform='skewY(y-angle)',x-angle,y-angle分別代表沿x軸和y軸歪斜的角度<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/transform.svg<br />
<br />
===5.群組===<br />
*步驟:<br />
*#先添加svg標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，其中才有href屬性的定義<br />
*#在defs段落中定義圖形，並賦予id<br />
*#用<use xlink:href='#某id'/>來引用既有的定義<br />
<br />
===6.定義一次,引用多次===<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/uses.svg<br />
<br />
===7.漸層===<br />
*漸層和濾鏡如果取中文名稱,瀏覽器還認得,但Inkscape和線上轉檔軟體就會不認得<br />
*「漸層」工具可以在多種顏色之間建立漸層混合,您可以從預設漸層填色中選擇,或是建立自己的漸層填色<br />
*線性漸層沿著直線從起點到終點建立陰影<br />
*放射性漸層沿著圓形圖樣從起點到終點建立陰影<br />
*尖角漸層繞著起點以逆時針掃射的方式建立陰影<br />
*反射性漸層在起點的一側建立相同的鏡像線性漸層<br />
*菱形漸層從菱形圖樣的中央往外建立陰影<br />
====(1)線性漸層====<br />
*步驟：<br />
*#不用添加svg標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，不會用到href屬性<br />
*#在defs段落中定義漸層,並賦予id<br />
*#用fill='url(#某id)'屬性來引用既有的漸層定義<br />
*linearGradient 線性漸層定義語法說明:<br />
*#漸層標籤中的 100%，指的是整個圖形<br />
*#其中的 id 屬性定出漸層名稱<br />
<br />
====(2)放射漸層====<br />
<br />
===八、柔焦濾鏡===<br />
===九、path===<br />
===十、動畫===<br />
<br />
==Inkscape==<br />
==GIS==<br />
*何謂 GIS ？<br />
*兩種主要的 GIS 。<br />
*基本框架。<br />
*marks<br />
*overlays<br />
*google 我的地圖<br />
*結合我的地圖與 GIS<br />
==圖形計算機==<br />
*取得 svgdraw.php<br />
*基本框架<br />
*繪製基本圖形<br />
*函式繪圖<br />
*google 圖形計算機</div>
蕭卉均
http://well-being-ng.net/wiki1231/index.php?title=%E8%A8%8E%E8%AB%96:%E8%B3%87%E8%A8%8A%E5%9F%BA%E7%A4%8E%E6%87%89%E7%94%A8/%E8%95%AD%E5%8D%89%E5%9D%87&diff=37890
討論:資訊基礎應用/蕭卉均
2018-01-16T09:11:51Z
<p>蕭卉均：/* (1)線性漸層 */</p>
<hr />
<div>=ღ完整筆記ღ=<br />
==♡環境&工具♡==<br />
===1.環境===<br />
*伺服器與域名,伺服器DS216,網址6years.jendo.org<br />
*wifi,區網wifi：jendod&jendoa<br />
*網站空間,瀏覽器：firefox,優先於chrome,盡量不用IE<br />
*wiki上的個人頁,filezilla→開啟filezilla,並新增一個站台叫♕DS216+(共用)♕→主機設定:6years.jendo.org→協定:SFTP→使用者:共用→字碼集:UTF-8→連線,然後到♕home/www♕→建自己帳號的連線→可用的文字編輯器,如emeditor→連結filezilla&慣用的文字編輯器：♕編輯/設定/檔案編輯♕，選用♕使用自訂編輯器♕&♕總是使用預設的編輯器♕，並指定編輯器的路徑<br />
*課後重點筆記:<br />
*#table是開始,/table是結束<br />
*#IP:IP4,最多表達到255字,IPV4一般網頁使用,IP6,物聯網用<br />
*#物聯網:簡單說一切事物,得失相兼<br />
*#域名:域名伺服器(HOSTS)<br />
*#AI(人工智慧)<br />
*#big5,早期,只有繁體中文<br />
*#UTF-8,萬國碼<br />
<br />
===2.工具與設定===<br />
*firefox:Mozilla Firefox（簡稱Firefox）,中文俗稱火狐（中國大陸官方有使用但未註冊為商標）,是一個自由及開放原始碼的網頁瀏覽器,由Mozilla基金會及其子公司Mozilla公司開發<br />
*filezilla:ileZilla是一種快速&可信賴的FTP用戶端以及伺服器端開放原始碼程式,具有多種特色&直覺的介面,FileZilla在2003年11月獲選為SourceForge.net當月最佳推薦專案<br />
*EmEditor:EmEditor是江村軟體公司（Emurasoft,坐落於美國華盛頓州）所開發的一款在Windows平台上運行的文字編輯程式,EmEditor以運作輕巧&敏捷而又功能強大&豐富著稱而得到許多用戶的好評<br />
<br />
==♡HTML&HTTP♡==<br />
*發有者及發明年代:於西元1993年,W3C&WHATWG開發<br />
*HTML:超文件標示語言（英語：HyperText Markup Language,簡稱：HTML）是一種用於建立網頁的標準標示語言,HTML是一種基礎技術常與CSS&JavaScript一起被眾多網站用於設計令人賞心悅目的網頁&網頁應用程式以及行動應用程式的使用者介面<br />
*HTTP:超文本傳輸協定（英文：HyperText Transfer Protocol,縮寫：HTTP）是一種用於分佈式&協作式和超媒體資訊系統的應用層協議,HTTP是全球資訊網的資料通訊的基礎<br />
*xml:可延伸標記式語言（英語：Extensible Markup Language,簡稱：XML）是一種標記式語言,標記指電腦所能理解的資訊符號,通過此種標記,電腦之間可以處理包含各種資訊的文章等<br />
*課後筆記:<br />
*#筆記網頁建設:登入後搜尋{資訊基礎應用/蕭卉均}→點一下，開始編輯→編輯完點儲存頁面<br />
*#色碼表:https://www.toodoo.com/db/color.html<br />
*通訊錄:<br />
*<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
<table class='nicetable'><br />
<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
</table><br />
<br />
==♡ wiki ♡==<br />
*何謂wiki:Wiki是一種在全球資訊網上開放且可供多人協同創作的超文字系統,由沃德·坎寧安於1995年首先開發,沃德·坎寧安將wiki定義為「一種允許一群用戶用簡單的描述來建立和連線一組網頁的社會計算系統」<br />
*CC授權:創用CC授權條款（英語：Creative Commons license,簡稱CC授權）是一種公共版權授權條款,其允許分發受版權保護的作品,一個創用CC授權用於一個作者想給他人分享&使用&甚至創作衍生作品的權利<br />
*wiki語法:http://jendo.synology.me/wiki1231/index.php?title=Wiki_%E5%85%A5%E9%96%80%E8%AA%9E%E6%B3%95<br />
*wiki的word適應:履歷表<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E5%B1%A5%E6%AD%B7%E8%A1%A8.html<br />
==♡CSS♡==<br />
*何謂CSS:層疊樣式表（英語：Cascading Style Sheets,簡寫CSS）又稱串樣式列表&級聯樣式表&串接樣式表&層疊樣式表&階層式樣式表,一種用來為結構化文件（如HTML文件或XML應用）添加樣式（字型、間距和顏色等）的電腦語言,由W3C定義和維護,目前最新版本是CSS2.1，為W3C的推薦標準,CSS3現在已被大部分現代瀏覽器支援,而下一版的CSS4仍在開發中<br />
*用法:限制者才有標章,不限制者沒有標章<br />
*重要語法:<br />
*#Attribution(BY):姓名標示,您（使用者）可以複製&發行&展覽&表演&放映&廣播或通過資訊網路傳播本作品；您必須按照作者或者授權人指定的方式對作品進行姓名標示<br />
*#NonCommercial(NC):非商業性使用,您可以自由複製&散布&展示及演出本作品；您不得為商業目的而使用本作品<br />
*#NoDerivs(ND):禁止改作,您可以自由複製&散布&展示及演出本作品；您不得改變&轉變或更改本作品<br />
*#ShareAlike(SA):相同方式分享,您可以自由複製&散布&展示及演出本作品；若您改變&轉變或更改本作品,僅在遵守與本作品相同的授權條款下,您才能散布由本作品產生的衍生作品<br />
<br />
==♡SVG♡==<br />
===1.概述===<br />
*何謂SVG:可縮放向量圖形（英語：Scalable Vector Graphics,SVG）是一種基於可延伸標記式語言（XML）,用於描述二維向量圖形的圖形格式,SVG由W3C制定,是一個開放標準<br />
*點陣圖與向量圖的比較(含附檔名):<br />
*#SVG:又為向量圖,特色,放大不毛邊,https://upload.wikimedia.org/wikipedia/commons/5/53/Skull_and_crossbones.svg<br />
*#JPG:又名JEPG,失真,壓縮,http://wportfolio.wzu.edu.tw/blog/attach/995/27995/89/bf_51402_8868906_99219_2yzUdJnLy0AsZ9VdwaKNCA.jpg<br />
*#PNG:不失真,公開格式,https://s-media-cache-ak0.pinimg.com/originals/96/94/ef/9694ef6ecfd562c83e7a445ee9ee19ba.png<br />
*#GIF:可動畫,256色,https://2.bp.blogspot.com/-Ra6UuzwDGQg/WDfdq3X1GjI/AAAAAAAD0gc/MfVErIwBENYRH_DvvFsnThfYp-zVxugEgCLcB/s1600/AS000946_02.gif<br />
*SVG格式具有以下優點:<br />
*#圖檔可讀,易於修改和編輯（理論上如此,但實際上卻是因為各種不同的SVG檔編輯器而可能儲存成不易解讀的SVG檔案）<br />
*#與現有技術可以互動融合,例如,SVG技術本身的動態部分（包括時序控制和動畫）就是基於SMIL標準,另外,SVG檔案還可嵌入JavaScript（嚴格地說，應該是ECMAScript）指令碼來控制SVG物件<br />
*#SVG圖形格式可以方便的建立文字索引,從而實現基於內容的圖像搜尋<br />
*#SVG圖形格式支援多種濾鏡和特殊效果,在不改變圖像內容的前提下可以實現點陣圖格式中類似文字陰影的效果<br />
*#SVG圖形格式可以用來動態生成圖形,例如,可用SVG動態生成具有互動功能的地圖,嵌入網頁中,並顯示給終端用戶<br />
*SVG格式具有以下缺點：<br />
*#如何和已經占有重要市場份額的向量圖形格式Adobe Animate競爭的問題,事實上,Adobe Animate在Flash CC 2014版及以後的版本就都支援直接匯出SVG檔案了<br />
*#SVG的本地執行環境下的廠家支援程度<br />
*#由於原始的SVG檔是遵從XML語法,導致資料採用未壓縮的方式存放,因此相較於其他的向量圖形格式,同樣的檔案內容會比其他的檔案格式稍大,Adobe因此使用gzip壓縮開發出壓縮的SVG檔格式,附檔名為 .svgz, 但此種檔案格式除了Adobe旗下的軟體以外,未被廣泛支援使用<br />
*#舊版的SVG Viewer無法正確顯示出使用新版SVG格式的向量圖形<br />
<br />
===2.基本架構===<br />
*基本架構:SVG允許3種圖形物件類型：向量圖形,柵格圖像以及文字,圖形物件——包括PNG&JPEG這些柵格圖像——能夠被編組&設計&轉換及整合進先前的彩現物件中,文字可以在任何適用於應用程式的XML命名空間之內,從而提高SVG圖形的搜尋能力和無障礙性,SVG提供的功能集涵蓋了巢狀轉換&裁剪路徑&Alpha通道&濾鏡效果&模板物件以及可延伸性,SVG嚴格遵從XML語法,並用文字格式的描述性語言來描述圖像內容,因此是一種和圖像解析度無關的向量圖形格式,SVG可以實現動態和互動功能,在DOM模型的基礎上,SVG開發設計人員可以利用ECMAScript或者SMIL來進行時序控制或物件的操縱,SVG雖然是文字格式,但是SVG支援利用gzip壓縮演算法減少檔案尺寸,壓縮後的檔案通常用被稱為「SVGZ檔案」<br />
*基本樣式:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/arrow.svg<br />
*基本圖形:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/bearFace.svg<br />
*SVG主要支援以下幾種顯示物件：<br />
*#向量顯示物件,基本向量顯示物件包括矩形&圓&橢圓&多邊形&直線&任意曲線等<br />
*#嵌入式外部圖像,包括PNG&JPEG&SVG等<br />
*#文字物件<br />
<br />
===3.文字===<br />
*TEXT<br />
*#在「text」標籤開始與結束之間夾字,可用中英文,而使用「屬性」來規定文字的表現,所有的屬性都可以改用樣式來表達<br />
*#可用中文字形：<br />
*##屬性dx和dy基於前一個字的位置去做變化：值可為'10,20,30,40'，字的距離一個比一個更遠<br />
*##屬性x和y標示字的起點：值可為'10,20,30,40'，表示每個字的x或y座標<br />
*##屬性fill控制填入字的顏色,預設黑色<br />
*##屬性stroke控制字描框的顏色,預設 none<br />
*##屬性rotate='30'順時鐘轉30°。rotate='30,60,90,120,150,180,210'指定每個字的轉動角度<br />
*##用style控制字體&字形&尺寸,但顏色是用fill不是用color <br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/text.svg<br />
<br />
===4.位移&旋轉&縮放&歪斜===<br />
*相關屬性說明：<br />
*#平移變換(translate)：transform="translate(x,y)",即新坐標系的原點在原坐標系的(x,y)處,坐標軸的方向不變<br />
*#旋轉變換(rotate)：transform="rotate(angle cx,cy)",angle代表旋轉角度,預設單位是「度」,順時針為正,逆時針為負,(cx,cy)是旋轉中心所在的坐標,若省略旋轉中心坐標,則預設值是(0,0)<br />
*#伸縮變換(scale)：transform="scale(sx,sy)",sx,sy分別代表x軸方向和y方向拉伸或縮小的比例因子,拉伸：大於1；縮小：小於1,若省略sy，即sy=sx，作等比例縮放<br />
*#歪斜變換(skew)：transform='skewX(x-angle)'或transform='skewY(y-angle)',x-angle,y-angle分別代表沿x軸和y軸歪斜的角度<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/transform.svg<br />
<br />
===5.群組===<br />
*步驟:<br />
*#先添加svg標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，其中才有href屬性的定義<br />
*#在defs段落中定義圖形，並賦予id<br />
*#用<use xlink:href='#某id'/>來引用既有的定義<br />
<br />
===6.定義一次,引用多次===<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/uses.svg<br />
<br />
===7.漸層===<br />
*漸層和濾鏡如果取中文名稱,瀏覽器還認得,但Inkscape和線上轉檔軟體就會不認得<br />
====(1)線性漸層====<br />
*步驟：<br />
*#不用添加svg標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，不會用到href屬性<br />
*#在defs段落中定義漸層,並賦予id<br />
*#用fill='url(#某id)'屬性來引用既有的漸層定義<br />
*linearGradient 線性漸層定義語法說明:<br />
*#漸層標籤中的 100%，指的是整個圖形<br />
*#其中的 id 屬性定出漸層名稱<br />
<br />
====(2)放射漸層====<br />
<br />
===八、柔焦濾鏡===<br />
===九、path===<br />
===十、動畫===<br />
<br />
==Inkscape==<br />
==GIS==<br />
*何謂 GIS ？<br />
*兩種主要的 GIS 。<br />
*基本框架。<br />
*marks<br />
*overlays<br />
*google 我的地圖<br />
*結合我的地圖與 GIS<br />
==圖形計算機==<br />
*取得 svgdraw.php<br />
*基本框架<br />
*繪製基本圖形<br />
*函式繪圖<br />
*google 圖形計算機</div>
蕭卉均
http://well-being-ng.net/wiki1231/index.php?title=%E8%A8%8E%E8%AB%96:%E8%B3%87%E8%A8%8A%E5%9F%BA%E7%A4%8E%E6%87%89%E7%94%A8/%E8%95%AD%E5%8D%89%E5%9D%87&diff=37889
討論:資訊基礎應用/蕭卉均
2018-01-16T09:10:21Z
<p>蕭卉均：/* (1)線性漸層 */</p>
<hr />
<div>=ღ完整筆記ღ=<br />
==♡環境&工具♡==<br />
===1.環境===<br />
*伺服器與域名,伺服器DS216,網址6years.jendo.org<br />
*wifi,區網wifi：jendod&jendoa<br />
*網站空間,瀏覽器：firefox,優先於chrome,盡量不用IE<br />
*wiki上的個人頁,filezilla→開啟filezilla,並新增一個站台叫♕DS216+(共用)♕→主機設定:6years.jendo.org→協定:SFTP→使用者:共用→字碼集:UTF-8→連線,然後到♕home/www♕→建自己帳號的連線→可用的文字編輯器,如emeditor→連結filezilla&慣用的文字編輯器：♕編輯/設定/檔案編輯♕，選用♕使用自訂編輯器♕&♕總是使用預設的編輯器♕，並指定編輯器的路徑<br />
*課後重點筆記:<br />
*#table是開始,/table是結束<br />
*#IP:IP4,最多表達到255字,IPV4一般網頁使用,IP6,物聯網用<br />
*#物聯網:簡單說一切事物,得失相兼<br />
*#域名:域名伺服器(HOSTS)<br />
*#AI(人工智慧)<br />
*#big5,早期,只有繁體中文<br />
*#UTF-8,萬國碼<br />
<br />
===2.工具與設定===<br />
*firefox:Mozilla Firefox（簡稱Firefox）,中文俗稱火狐（中國大陸官方有使用但未註冊為商標）,是一個自由及開放原始碼的網頁瀏覽器,由Mozilla基金會及其子公司Mozilla公司開發<br />
*filezilla:ileZilla是一種快速&可信賴的FTP用戶端以及伺服器端開放原始碼程式,具有多種特色&直覺的介面,FileZilla在2003年11月獲選為SourceForge.net當月最佳推薦專案<br />
*EmEditor:EmEditor是江村軟體公司（Emurasoft,坐落於美國華盛頓州）所開發的一款在Windows平台上運行的文字編輯程式,EmEditor以運作輕巧&敏捷而又功能強大&豐富著稱而得到許多用戶的好評<br />
<br />
==♡HTML&HTTP♡==<br />
*發有者及發明年代:於西元1993年,W3C&WHATWG開發<br />
*HTML:超文件標示語言（英語：HyperText Markup Language,簡稱：HTML）是一種用於建立網頁的標準標示語言,HTML是一種基礎技術常與CSS&JavaScript一起被眾多網站用於設計令人賞心悅目的網頁&網頁應用程式以及行動應用程式的使用者介面<br />
*HTTP:超文本傳輸協定（英文：HyperText Transfer Protocol,縮寫：HTTP）是一種用於分佈式&協作式和超媒體資訊系統的應用層協議,HTTP是全球資訊網的資料通訊的基礎<br />
*xml:可延伸標記式語言（英語：Extensible Markup Language,簡稱：XML）是一種標記式語言,標記指電腦所能理解的資訊符號,通過此種標記,電腦之間可以處理包含各種資訊的文章等<br />
*課後筆記:<br />
*#筆記網頁建設:登入後搜尋{資訊基礎應用/蕭卉均}→點一下，開始編輯→編輯完點儲存頁面<br />
*#色碼表:https://www.toodoo.com/db/color.html<br />
*通訊錄:<br />
*<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
<table class='nicetable'><br />
<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
</table><br />
<br />
==♡ wiki ♡==<br />
*何謂wiki:Wiki是一種在全球資訊網上開放且可供多人協同創作的超文字系統,由沃德·坎寧安於1995年首先開發,沃德·坎寧安將wiki定義為「一種允許一群用戶用簡單的描述來建立和連線一組網頁的社會計算系統」<br />
*CC授權:創用CC授權條款（英語：Creative Commons license,簡稱CC授權）是一種公共版權授權條款,其允許分發受版權保護的作品,一個創用CC授權用於一個作者想給他人分享&使用&甚至創作衍生作品的權利<br />
*wiki語法:http://jendo.synology.me/wiki1231/index.php?title=Wiki_%E5%85%A5%E9%96%80%E8%AA%9E%E6%B3%95<br />
*wiki的word適應:履歷表<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E5%B1%A5%E6%AD%B7%E8%A1%A8.html<br />
==♡CSS♡==<br />
*何謂CSS:層疊樣式表（英語：Cascading Style Sheets,簡寫CSS）又稱串樣式列表&級聯樣式表&串接樣式表&層疊樣式表&階層式樣式表,一種用來為結構化文件（如HTML文件或XML應用）添加樣式（字型、間距和顏色等）的電腦語言,由W3C定義和維護,目前最新版本是CSS2.1，為W3C的推薦標準,CSS3現在已被大部分現代瀏覽器支援,而下一版的CSS4仍在開發中<br />
*用法:限制者才有標章,不限制者沒有標章<br />
*重要語法:<br />
*#Attribution(BY):姓名標示,您（使用者）可以複製&發行&展覽&表演&放映&廣播或通過資訊網路傳播本作品；您必須按照作者或者授權人指定的方式對作品進行姓名標示<br />
*#NonCommercial(NC):非商業性使用,您可以自由複製&散布&展示及演出本作品；您不得為商業目的而使用本作品<br />
*#NoDerivs(ND):禁止改作,您可以自由複製&散布&展示及演出本作品；您不得改變&轉變或更改本作品<br />
*#ShareAlike(SA):相同方式分享,您可以自由複製&散布&展示及演出本作品；若您改變&轉變或更改本作品,僅在遵守與本作品相同的授權條款下,您才能散布由本作品產生的衍生作品<br />
<br />
==♡SVG♡==<br />
===1.概述===<br />
*何謂SVG:可縮放向量圖形（英語：Scalable Vector Graphics,SVG）是一種基於可延伸標記式語言（XML）,用於描述二維向量圖形的圖形格式,SVG由W3C制定,是一個開放標準<br />
*點陣圖與向量圖的比較(含附檔名):<br />
*#SVG:又為向量圖,特色,放大不毛邊,https://upload.wikimedia.org/wikipedia/commons/5/53/Skull_and_crossbones.svg<br />
*#JPG:又名JEPG,失真,壓縮,http://wportfolio.wzu.edu.tw/blog/attach/995/27995/89/bf_51402_8868906_99219_2yzUdJnLy0AsZ9VdwaKNCA.jpg<br />
*#PNG:不失真,公開格式,https://s-media-cache-ak0.pinimg.com/originals/96/94/ef/9694ef6ecfd562c83e7a445ee9ee19ba.png<br />
*#GIF:可動畫,256色,https://2.bp.blogspot.com/-Ra6UuzwDGQg/WDfdq3X1GjI/AAAAAAAD0gc/MfVErIwBENYRH_DvvFsnThfYp-zVxugEgCLcB/s1600/AS000946_02.gif<br />
*SVG格式具有以下優點:<br />
*#圖檔可讀,易於修改和編輯（理論上如此,但實際上卻是因為各種不同的SVG檔編輯器而可能儲存成不易解讀的SVG檔案）<br />
*#與現有技術可以互動融合,例如,SVG技術本身的動態部分（包括時序控制和動畫）就是基於SMIL標準,另外,SVG檔案還可嵌入JavaScript（嚴格地說，應該是ECMAScript）指令碼來控制SVG物件<br />
*#SVG圖形格式可以方便的建立文字索引,從而實現基於內容的圖像搜尋<br />
*#SVG圖形格式支援多種濾鏡和特殊效果,在不改變圖像內容的前提下可以實現點陣圖格式中類似文字陰影的效果<br />
*#SVG圖形格式可以用來動態生成圖形,例如,可用SVG動態生成具有互動功能的地圖,嵌入網頁中,並顯示給終端用戶<br />
*SVG格式具有以下缺點：<br />
*#如何和已經占有重要市場份額的向量圖形格式Adobe Animate競爭的問題,事實上,Adobe Animate在Flash CC 2014版及以後的版本就都支援直接匯出SVG檔案了<br />
*#SVG的本地執行環境下的廠家支援程度<br />
*#由於原始的SVG檔是遵從XML語法,導致資料採用未壓縮的方式存放,因此相較於其他的向量圖形格式,同樣的檔案內容會比其他的檔案格式稍大,Adobe因此使用gzip壓縮開發出壓縮的SVG檔格式,附檔名為 .svgz, 但此種檔案格式除了Adobe旗下的軟體以外,未被廣泛支援使用<br />
*#舊版的SVG Viewer無法正確顯示出使用新版SVG格式的向量圖形<br />
<br />
===2.基本架構===<br />
*基本架構:SVG允許3種圖形物件類型：向量圖形,柵格圖像以及文字,圖形物件——包括PNG&JPEG這些柵格圖像——能夠被編組&設計&轉換及整合進先前的彩現物件中,文字可以在任何適用於應用程式的XML命名空間之內,從而提高SVG圖形的搜尋能力和無障礙性,SVG提供的功能集涵蓋了巢狀轉換&裁剪路徑&Alpha通道&濾鏡效果&模板物件以及可延伸性,SVG嚴格遵從XML語法,並用文字格式的描述性語言來描述圖像內容,因此是一種和圖像解析度無關的向量圖形格式,SVG可以實現動態和互動功能,在DOM模型的基礎上,SVG開發設計人員可以利用ECMAScript或者SMIL來進行時序控制或物件的操縱,SVG雖然是文字格式,但是SVG支援利用gzip壓縮演算法減少檔案尺寸,壓縮後的檔案通常用被稱為「SVGZ檔案」<br />
*基本樣式:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/arrow.svg<br />
*基本圖形:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/bearFace.svg<br />
*SVG主要支援以下幾種顯示物件：<br />
*#向量顯示物件,基本向量顯示物件包括矩形&圓&橢圓&多邊形&直線&任意曲線等<br />
*#嵌入式外部圖像,包括PNG&JPEG&SVG等<br />
*#文字物件<br />
<br />
===3.文字===<br />
*TEXT<br />
*#在「text」標籤開始與結束之間夾字,可用中英文,而使用「屬性」來規定文字的表現,所有的屬性都可以改用樣式來表達<br />
*#可用中文字形：<br />
*##屬性dx和dy基於前一個字的位置去做變化：值可為'10,20,30,40'，字的距離一個比一個更遠<br />
*##屬性x和y標示字的起點：值可為'10,20,30,40'，表示每個字的x或y座標<br />
*##屬性fill控制填入字的顏色,預設黑色<br />
*##屬性stroke控制字描框的顏色,預設 none<br />
*##屬性rotate='30'順時鐘轉30°。rotate='30,60,90,120,150,180,210'指定每個字的轉動角度<br />
*##用style控制字體&字形&尺寸,但顏色是用fill不是用color <br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/text.svg<br />
<br />
===4.位移&旋轉&縮放&歪斜===<br />
*相關屬性說明：<br />
*#平移變換(translate)：transform="translate(x,y)",即新坐標系的原點在原坐標系的(x,y)處,坐標軸的方向不變<br />
*#旋轉變換(rotate)：transform="rotate(angle cx,cy)",angle代表旋轉角度,預設單位是「度」,順時針為正,逆時針為負,(cx,cy)是旋轉中心所在的坐標,若省略旋轉中心坐標,則預設值是(0,0)<br />
*#伸縮變換(scale)：transform="scale(sx,sy)",sx,sy分別代表x軸方向和y方向拉伸或縮小的比例因子,拉伸：大於1；縮小：小於1,若省略sy，即sy=sx，作等比例縮放<br />
*#歪斜變換(skew)：transform='skewX(x-angle)'或transform='skewY(y-angle)',x-angle,y-angle分別代表沿x軸和y軸歪斜的角度<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/transform.svg<br />
<br />
===5.群組===<br />
*步驟:<br />
*#先添加svg標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，其中才有href屬性的定義<br />
*#在defs段落中定義圖形，並賦予id<br />
*#用<use xlink:href='#某id'/>來引用既有的定義<br />
<br />
===6.定義一次,引用多次===<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/uses.svg<br />
<br />
===7.漸層===<br />
*漸層和濾鏡如果取中文名稱,瀏覽器還認得,但Inkscape和線上轉檔軟體就會不認得<br />
====(1)線性漸層====<br />
*步驟：<br />
*#不用添加svg標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，不會用到href屬性<br />
*#在defs段落中定義漸層,並賦予id<br />
*#用fill='url(#某id)'屬性來引用既有的漸層定義<br />
<br />
====(2)放射漸層====<br />
<br />
===八、柔焦濾鏡===<br />
===九、path===<br />
===十、動畫===<br />
<br />
==Inkscape==<br />
==GIS==<br />
*何謂 GIS ？<br />
*兩種主要的 GIS 。<br />
*基本框架。<br />
*marks<br />
*overlays<br />
*google 我的地圖<br />
*結合我的地圖與 GIS<br />
==圖形計算機==<br />
*取得 svgdraw.php<br />
*基本框架<br />
*繪製基本圖形<br />
*函式繪圖<br />
*google 圖形計算機</div>
蕭卉均
http://well-being-ng.net/wiki1231/index.php?title=%E8%A8%8E%E8%AB%96:%E8%B3%87%E8%A8%8A%E5%9F%BA%E7%A4%8E%E6%87%89%E7%94%A8/%E8%95%AD%E5%8D%89%E5%9D%87&diff=37888
討論:資訊基礎應用/蕭卉均
2018-01-16T09:09:38Z
<p>蕭卉均：/* (1)線性漸層 */</p>
<hr />
<div>=ღ完整筆記ღ=<br />
==♡環境&工具♡==<br />
===1.環境===<br />
*伺服器與域名,伺服器DS216,網址6years.jendo.org<br />
*wifi,區網wifi：jendod&jendoa<br />
*網站空間,瀏覽器：firefox,優先於chrome,盡量不用IE<br />
*wiki上的個人頁,filezilla→開啟filezilla,並新增一個站台叫♕DS216+(共用)♕→主機設定:6years.jendo.org→協定:SFTP→使用者:共用→字碼集:UTF-8→連線,然後到♕home/www♕→建自己帳號的連線→可用的文字編輯器,如emeditor→連結filezilla&慣用的文字編輯器：♕編輯/設定/檔案編輯♕，選用♕使用自訂編輯器♕&♕總是使用預設的編輯器♕，並指定編輯器的路徑<br />
*課後重點筆記:<br />
*#table是開始,/table是結束<br />
*#IP:IP4,最多表達到255字,IPV4一般網頁使用,IP6,物聯網用<br />
*#物聯網:簡單說一切事物,得失相兼<br />
*#域名:域名伺服器(HOSTS)<br />
*#AI(人工智慧)<br />
*#big5,早期,只有繁體中文<br />
*#UTF-8,萬國碼<br />
<br />
===2.工具與設定===<br />
*firefox:Mozilla Firefox（簡稱Firefox）,中文俗稱火狐（中國大陸官方有使用但未註冊為商標）,是一個自由及開放原始碼的網頁瀏覽器,由Mozilla基金會及其子公司Mozilla公司開發<br />
*filezilla:ileZilla是一種快速&可信賴的FTP用戶端以及伺服器端開放原始碼程式,具有多種特色&直覺的介面,FileZilla在2003年11月獲選為SourceForge.net當月最佳推薦專案<br />
*EmEditor:EmEditor是江村軟體公司（Emurasoft,坐落於美國華盛頓州）所開發的一款在Windows平台上運行的文字編輯程式,EmEditor以運作輕巧&敏捷而又功能強大&豐富著稱而得到許多用戶的好評<br />
<br />
==♡HTML&HTTP♡==<br />
*發有者及發明年代:於西元1993年,W3C&WHATWG開發<br />
*HTML:超文件標示語言（英語：HyperText Markup Language,簡稱：HTML）是一種用於建立網頁的標準標示語言,HTML是一種基礎技術常與CSS&JavaScript一起被眾多網站用於設計令人賞心悅目的網頁&網頁應用程式以及行動應用程式的使用者介面<br />
*HTTP:超文本傳輸協定（英文：HyperText Transfer Protocol,縮寫：HTTP）是一種用於分佈式&協作式和超媒體資訊系統的應用層協議,HTTP是全球資訊網的資料通訊的基礎<br />
*xml:可延伸標記式語言（英語：Extensible Markup Language,簡稱：XML）是一種標記式語言,標記指電腦所能理解的資訊符號,通過此種標記,電腦之間可以處理包含各種資訊的文章等<br />
*課後筆記:<br />
*#筆記網頁建設:登入後搜尋{資訊基礎應用/蕭卉均}→點一下，開始編輯→編輯完點儲存頁面<br />
*#色碼表:https://www.toodoo.com/db/color.html<br />
*通訊錄:<br />
*<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
<table class='nicetable'><br />
<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
</table><br />
<br />
==♡ wiki ♡==<br />
*何謂wiki:Wiki是一種在全球資訊網上開放且可供多人協同創作的超文字系統,由沃德·坎寧安於1995年首先開發,沃德·坎寧安將wiki定義為「一種允許一群用戶用簡單的描述來建立和連線一組網頁的社會計算系統」<br />
*CC授權:創用CC授權條款（英語：Creative Commons license,簡稱CC授權）是一種公共版權授權條款,其允許分發受版權保護的作品,一個創用CC授權用於一個作者想給他人分享&使用&甚至創作衍生作品的權利<br />
*wiki語法:http://jendo.synology.me/wiki1231/index.php?title=Wiki_%E5%85%A5%E9%96%80%E8%AA%9E%E6%B3%95<br />
*wiki的word適應:履歷表<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E5%B1%A5%E6%AD%B7%E8%A1%A8.html<br />
==♡CSS♡==<br />
*何謂CSS:層疊樣式表（英語：Cascading Style Sheets,簡寫CSS）又稱串樣式列表&級聯樣式表&串接樣式表&層疊樣式表&階層式樣式表,一種用來為結構化文件（如HTML文件或XML應用）添加樣式（字型、間距和顏色等）的電腦語言,由W3C定義和維護,目前最新版本是CSS2.1，為W3C的推薦標準,CSS3現在已被大部分現代瀏覽器支援,而下一版的CSS4仍在開發中<br />
*用法:限制者才有標章,不限制者沒有標章<br />
*重要語法:<br />
*#Attribution(BY):姓名標示,您（使用者）可以複製&發行&展覽&表演&放映&廣播或通過資訊網路傳播本作品；您必須按照作者或者授權人指定的方式對作品進行姓名標示<br />
*#NonCommercial(NC):非商業性使用,您可以自由複製&散布&展示及演出本作品；您不得為商業目的而使用本作品<br />
*#NoDerivs(ND):禁止改作,您可以自由複製&散布&展示及演出本作品；您不得改變&轉變或更改本作品<br />
*#ShareAlike(SA):相同方式分享,您可以自由複製&散布&展示及演出本作品；若您改變&轉變或更改本作品,僅在遵守與本作品相同的授權條款下,您才能散布由本作品產生的衍生作品<br />
<br />
==♡SVG♡==<br />
===1.概述===<br />
*何謂SVG:可縮放向量圖形（英語：Scalable Vector Graphics,SVG）是一種基於可延伸標記式語言（XML）,用於描述二維向量圖形的圖形格式,SVG由W3C制定,是一個開放標準<br />
*點陣圖與向量圖的比較(含附檔名):<br />
*#SVG:又為向量圖,特色,放大不毛邊,https://upload.wikimedia.org/wikipedia/commons/5/53/Skull_and_crossbones.svg<br />
*#JPG:又名JEPG,失真,壓縮,http://wportfolio.wzu.edu.tw/blog/attach/995/27995/89/bf_51402_8868906_99219_2yzUdJnLy0AsZ9VdwaKNCA.jpg<br />
*#PNG:不失真,公開格式,https://s-media-cache-ak0.pinimg.com/originals/96/94/ef/9694ef6ecfd562c83e7a445ee9ee19ba.png<br />
*#GIF:可動畫,256色,https://2.bp.blogspot.com/-Ra6UuzwDGQg/WDfdq3X1GjI/AAAAAAAD0gc/MfVErIwBENYRH_DvvFsnThfYp-zVxugEgCLcB/s1600/AS000946_02.gif<br />
*SVG格式具有以下優點:<br />
*#圖檔可讀,易於修改和編輯（理論上如此,但實際上卻是因為各種不同的SVG檔編輯器而可能儲存成不易解讀的SVG檔案）<br />
*#與現有技術可以互動融合,例如,SVG技術本身的動態部分（包括時序控制和動畫）就是基於SMIL標準,另外,SVG檔案還可嵌入JavaScript（嚴格地說，應該是ECMAScript）指令碼來控制SVG物件<br />
*#SVG圖形格式可以方便的建立文字索引,從而實現基於內容的圖像搜尋<br />
*#SVG圖形格式支援多種濾鏡和特殊效果,在不改變圖像內容的前提下可以實現點陣圖格式中類似文字陰影的效果<br />
*#SVG圖形格式可以用來動態生成圖形,例如,可用SVG動態生成具有互動功能的地圖,嵌入網頁中,並顯示給終端用戶<br />
*SVG格式具有以下缺點：<br />
*#如何和已經占有重要市場份額的向量圖形格式Adobe Animate競爭的問題,事實上,Adobe Animate在Flash CC 2014版及以後的版本就都支援直接匯出SVG檔案了<br />
*#SVG的本地執行環境下的廠家支援程度<br />
*#由於原始的SVG檔是遵從XML語法,導致資料採用未壓縮的方式存放,因此相較於其他的向量圖形格式,同樣的檔案內容會比其他的檔案格式稍大,Adobe因此使用gzip壓縮開發出壓縮的SVG檔格式,附檔名為 .svgz, 但此種檔案格式除了Adobe旗下的軟體以外,未被廣泛支援使用<br />
*#舊版的SVG Viewer無法正確顯示出使用新版SVG格式的向量圖形<br />
<br />
===2.基本架構===<br />
*基本架構:SVG允許3種圖形物件類型：向量圖形,柵格圖像以及文字,圖形物件——包括PNG&JPEG這些柵格圖像——能夠被編組&設計&轉換及整合進先前的彩現物件中,文字可以在任何適用於應用程式的XML命名空間之內,從而提高SVG圖形的搜尋能力和無障礙性,SVG提供的功能集涵蓋了巢狀轉換&裁剪路徑&Alpha通道&濾鏡效果&模板物件以及可延伸性,SVG嚴格遵從XML語法,並用文字格式的描述性語言來描述圖像內容,因此是一種和圖像解析度無關的向量圖形格式,SVG可以實現動態和互動功能,在DOM模型的基礎上,SVG開發設計人員可以利用ECMAScript或者SMIL來進行時序控制或物件的操縱,SVG雖然是文字格式,但是SVG支援利用gzip壓縮演算法減少檔案尺寸,壓縮後的檔案通常用被稱為「SVGZ檔案」<br />
*基本樣式:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/arrow.svg<br />
*基本圖形:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/bearFace.svg<br />
*SVG主要支援以下幾種顯示物件：<br />
*#向量顯示物件,基本向量顯示物件包括矩形&圓&橢圓&多邊形&直線&任意曲線等<br />
*#嵌入式外部圖像,包括PNG&JPEG&SVG等<br />
*#文字物件<br />
<br />
===3.文字===<br />
*TEXT<br />
*#在「text」標籤開始與結束之間夾字,可用中英文,而使用「屬性」來規定文字的表現,所有的屬性都可以改用樣式來表達<br />
*#可用中文字形：<br />
*##屬性dx和dy基於前一個字的位置去做變化：值可為'10,20,30,40'，字的距離一個比一個更遠<br />
*##屬性x和y標示字的起點：值可為'10,20,30,40'，表示每個字的x或y座標<br />
*##屬性fill控制填入字的顏色,預設黑色<br />
*##屬性stroke控制字描框的顏色,預設 none<br />
*##屬性rotate='30'順時鐘轉30°。rotate='30,60,90,120,150,180,210'指定每個字的轉動角度<br />
*##用style控制字體&字形&尺寸,但顏色是用fill不是用color <br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/text.svg<br />
<br />
===4.位移&旋轉&縮放&歪斜===<br />
*相關屬性說明：<br />
*#平移變換(translate)：transform="translate(x,y)",即新坐標系的原點在原坐標系的(x,y)處,坐標軸的方向不變<br />
*#旋轉變換(rotate)：transform="rotate(angle cx,cy)",angle代表旋轉角度,預設單位是「度」,順時針為正,逆時針為負,(cx,cy)是旋轉中心所在的坐標,若省略旋轉中心坐標,則預設值是(0,0)<br />
*#伸縮變換(scale)：transform="scale(sx,sy)",sx,sy分別代表x軸方向和y方向拉伸或縮小的比例因子,拉伸：大於1；縮小：小於1,若省略sy，即sy=sx，作等比例縮放<br />
*#歪斜變換(skew)：transform='skewX(x-angle)'或transform='skewY(y-angle)',x-angle,y-angle分別代表沿x軸和y軸歪斜的角度<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/transform.svg<br />
<br />
===5.群組===<br />
*步驟:<br />
*#先添加svg標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，其中才有href屬性的定義<br />
*#在defs段落中定義圖形，並賦予id<br />
*#用<use xlink:href='#某id'/>來引用既有的定義<br />
<br />
===6.定義一次,引用多次===<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/uses.svg<br />
<br />
===7.漸層===<br />
*漸層和濾鏡如果取中文名稱,瀏覽器還認得,但Inkscape和線上轉檔軟體就會不認得<br />
====(1)線性漸層====<br />
*步驟：<br />
*#不用添加svg標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，不會用到href屬性<br />
*#在defs段落中定義漸層,並賦予id<br />
*#<br />
<br />
====(2)放射漸層====<br />
<br />
===八、柔焦濾鏡===<br />
===九、path===<br />
===十、動畫===<br />
<br />
==Inkscape==<br />
==GIS==<br />
*何謂 GIS ？<br />
*兩種主要的 GIS 。<br />
*基本框架。<br />
*marks<br />
*overlays<br />
*google 我的地圖<br />
*結合我的地圖與 GIS<br />
==圖形計算機==<br />
*取得 svgdraw.php<br />
*基本框架<br />
*繪製基本圖形<br />
*函式繪圖<br />
*google 圖形計算機</div>
蕭卉均
http://well-being-ng.net/wiki1231/index.php?title=%E8%A8%8E%E8%AB%96:%E8%B3%87%E8%A8%8A%E5%9F%BA%E7%A4%8E%E6%87%89%E7%94%A8/%E8%95%AD%E5%8D%89%E5%9D%87&diff=37887
討論:資訊基礎應用/蕭卉均
2018-01-16T09:07:56Z
<p>蕭卉均：/* 7.漸層 */</p>
<hr />
<div>=ღ完整筆記ღ=<br />
==♡環境&工具♡==<br />
===1.環境===<br />
*伺服器與域名,伺服器DS216,網址6years.jendo.org<br />
*wifi,區網wifi：jendod&jendoa<br />
*網站空間,瀏覽器：firefox,優先於chrome,盡量不用IE<br />
*wiki上的個人頁,filezilla→開啟filezilla,並新增一個站台叫♕DS216+(共用)♕→主機設定:6years.jendo.org→協定:SFTP→使用者:共用→字碼集:UTF-8→連線,然後到♕home/www♕→建自己帳號的連線→可用的文字編輯器,如emeditor→連結filezilla&慣用的文字編輯器：♕編輯/設定/檔案編輯♕，選用♕使用自訂編輯器♕&♕總是使用預設的編輯器♕，並指定編輯器的路徑<br />
*課後重點筆記:<br />
*#table是開始,/table是結束<br />
*#IP:IP4,最多表達到255字,IPV4一般網頁使用,IP6,物聯網用<br />
*#物聯網:簡單說一切事物,得失相兼<br />
*#域名:域名伺服器(HOSTS)<br />
*#AI(人工智慧)<br />
*#big5,早期,只有繁體中文<br />
*#UTF-8,萬國碼<br />
<br />
===2.工具與設定===<br />
*firefox:Mozilla Firefox（簡稱Firefox）,中文俗稱火狐（中國大陸官方有使用但未註冊為商標）,是一個自由及開放原始碼的網頁瀏覽器,由Mozilla基金會及其子公司Mozilla公司開發<br />
*filezilla:ileZilla是一種快速&可信賴的FTP用戶端以及伺服器端開放原始碼程式,具有多種特色&直覺的介面,FileZilla在2003年11月獲選為SourceForge.net當月最佳推薦專案<br />
*EmEditor:EmEditor是江村軟體公司（Emurasoft,坐落於美國華盛頓州）所開發的一款在Windows平台上運行的文字編輯程式,EmEditor以運作輕巧&敏捷而又功能強大&豐富著稱而得到許多用戶的好評<br />
<br />
==♡HTML&HTTP♡==<br />
*發有者及發明年代:於西元1993年,W3C&WHATWG開發<br />
*HTML:超文件標示語言（英語：HyperText Markup Language,簡稱：HTML）是一種用於建立網頁的標準標示語言,HTML是一種基礎技術常與CSS&JavaScript一起被眾多網站用於設計令人賞心悅目的網頁&網頁應用程式以及行動應用程式的使用者介面<br />
*HTTP:超文本傳輸協定（英文：HyperText Transfer Protocol,縮寫：HTTP）是一種用於分佈式&協作式和超媒體資訊系統的應用層協議,HTTP是全球資訊網的資料通訊的基礎<br />
*xml:可延伸標記式語言（英語：Extensible Markup Language,簡稱：XML）是一種標記式語言,標記指電腦所能理解的資訊符號,通過此種標記,電腦之間可以處理包含各種資訊的文章等<br />
*課後筆記:<br />
*#筆記網頁建設:登入後搜尋{資訊基礎應用/蕭卉均}→點一下，開始編輯→編輯完點儲存頁面<br />
*#色碼表:https://www.toodoo.com/db/color.html<br />
*通訊錄:<br />
*<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
<table class='nicetable'><br />
<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
</table><br />
<br />
==♡ wiki ♡==<br />
*何謂wiki:Wiki是一種在全球資訊網上開放且可供多人協同創作的超文字系統,由沃德·坎寧安於1995年首先開發,沃德·坎寧安將wiki定義為「一種允許一群用戶用簡單的描述來建立和連線一組網頁的社會計算系統」<br />
*CC授權:創用CC授權條款（英語：Creative Commons license,簡稱CC授權）是一種公共版權授權條款,其允許分發受版權保護的作品,一個創用CC授權用於一個作者想給他人分享&使用&甚至創作衍生作品的權利<br />
*wiki語法:http://jendo.synology.me/wiki1231/index.php?title=Wiki_%E5%85%A5%E9%96%80%E8%AA%9E%E6%B3%95<br />
*wiki的word適應:履歷表<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E5%B1%A5%E6%AD%B7%E8%A1%A8.html<br />
==♡CSS♡==<br />
*何謂CSS:層疊樣式表（英語：Cascading Style Sheets,簡寫CSS）又稱串樣式列表&級聯樣式表&串接樣式表&層疊樣式表&階層式樣式表,一種用來為結構化文件（如HTML文件或XML應用）添加樣式（字型、間距和顏色等）的電腦語言,由W3C定義和維護,目前最新版本是CSS2.1，為W3C的推薦標準,CSS3現在已被大部分現代瀏覽器支援,而下一版的CSS4仍在開發中<br />
*用法:限制者才有標章,不限制者沒有標章<br />
*重要語法:<br />
*#Attribution(BY):姓名標示,您（使用者）可以複製&發行&展覽&表演&放映&廣播或通過資訊網路傳播本作品；您必須按照作者或者授權人指定的方式對作品進行姓名標示<br />
*#NonCommercial(NC):非商業性使用,您可以自由複製&散布&展示及演出本作品；您不得為商業目的而使用本作品<br />
*#NoDerivs(ND):禁止改作,您可以自由複製&散布&展示及演出本作品；您不得改變&轉變或更改本作品<br />
*#ShareAlike(SA):相同方式分享,您可以自由複製&散布&展示及演出本作品；若您改變&轉變或更改本作品,僅在遵守與本作品相同的授權條款下,您才能散布由本作品產生的衍生作品<br />
<br />
==♡SVG♡==<br />
===1.概述===<br />
*何謂SVG:可縮放向量圖形（英語：Scalable Vector Graphics,SVG）是一種基於可延伸標記式語言（XML）,用於描述二維向量圖形的圖形格式,SVG由W3C制定,是一個開放標準<br />
*點陣圖與向量圖的比較(含附檔名):<br />
*#SVG:又為向量圖,特色,放大不毛邊,https://upload.wikimedia.org/wikipedia/commons/5/53/Skull_and_crossbones.svg<br />
*#JPG:又名JEPG,失真,壓縮,http://wportfolio.wzu.edu.tw/blog/attach/995/27995/89/bf_51402_8868906_99219_2yzUdJnLy0AsZ9VdwaKNCA.jpg<br />
*#PNG:不失真,公開格式,https://s-media-cache-ak0.pinimg.com/originals/96/94/ef/9694ef6ecfd562c83e7a445ee9ee19ba.png<br />
*#GIF:可動畫,256色,https://2.bp.blogspot.com/-Ra6UuzwDGQg/WDfdq3X1GjI/AAAAAAAD0gc/MfVErIwBENYRH_DvvFsnThfYp-zVxugEgCLcB/s1600/AS000946_02.gif<br />
*SVG格式具有以下優點:<br />
*#圖檔可讀,易於修改和編輯（理論上如此,但實際上卻是因為各種不同的SVG檔編輯器而可能儲存成不易解讀的SVG檔案）<br />
*#與現有技術可以互動融合,例如,SVG技術本身的動態部分（包括時序控制和動畫）就是基於SMIL標準,另外,SVG檔案還可嵌入JavaScript（嚴格地說，應該是ECMAScript）指令碼來控制SVG物件<br />
*#SVG圖形格式可以方便的建立文字索引,從而實現基於內容的圖像搜尋<br />
*#SVG圖形格式支援多種濾鏡和特殊效果,在不改變圖像內容的前提下可以實現點陣圖格式中類似文字陰影的效果<br />
*#SVG圖形格式可以用來動態生成圖形,例如,可用SVG動態生成具有互動功能的地圖,嵌入網頁中,並顯示給終端用戶<br />
*SVG格式具有以下缺點：<br />
*#如何和已經占有重要市場份額的向量圖形格式Adobe Animate競爭的問題,事實上,Adobe Animate在Flash CC 2014版及以後的版本就都支援直接匯出SVG檔案了<br />
*#SVG的本地執行環境下的廠家支援程度<br />
*#由於原始的SVG檔是遵從XML語法,導致資料採用未壓縮的方式存放,因此相較於其他的向量圖形格式,同樣的檔案內容會比其他的檔案格式稍大,Adobe因此使用gzip壓縮開發出壓縮的SVG檔格式,附檔名為 .svgz, 但此種檔案格式除了Adobe旗下的軟體以外,未被廣泛支援使用<br />
*#舊版的SVG Viewer無法正確顯示出使用新版SVG格式的向量圖形<br />
<br />
===2.基本架構===<br />
*基本架構:SVG允許3種圖形物件類型：向量圖形,柵格圖像以及文字,圖形物件——包括PNG&JPEG這些柵格圖像——能夠被編組&設計&轉換及整合進先前的彩現物件中,文字可以在任何適用於應用程式的XML命名空間之內,從而提高SVG圖形的搜尋能力和無障礙性,SVG提供的功能集涵蓋了巢狀轉換&裁剪路徑&Alpha通道&濾鏡效果&模板物件以及可延伸性,SVG嚴格遵從XML語法,並用文字格式的描述性語言來描述圖像內容,因此是一種和圖像解析度無關的向量圖形格式,SVG可以實現動態和互動功能,在DOM模型的基礎上,SVG開發設計人員可以利用ECMAScript或者SMIL來進行時序控制或物件的操縱,SVG雖然是文字格式,但是SVG支援利用gzip壓縮演算法減少檔案尺寸,壓縮後的檔案通常用被稱為「SVGZ檔案」<br />
*基本樣式:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/arrow.svg<br />
*基本圖形:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/bearFace.svg<br />
*SVG主要支援以下幾種顯示物件：<br />
*#向量顯示物件,基本向量顯示物件包括矩形&圓&橢圓&多邊形&直線&任意曲線等<br />
*#嵌入式外部圖像,包括PNG&JPEG&SVG等<br />
*#文字物件<br />
<br />
===3.文字===<br />
*TEXT<br />
*#在「text」標籤開始與結束之間夾字,可用中英文,而使用「屬性」來規定文字的表現,所有的屬性都可以改用樣式來表達<br />
*#可用中文字形：<br />
*##屬性dx和dy基於前一個字的位置去做變化：值可為'10,20,30,40'，字的距離一個比一個更遠<br />
*##屬性x和y標示字的起點：值可為'10,20,30,40'，表示每個字的x或y座標<br />
*##屬性fill控制填入字的顏色,預設黑色<br />
*##屬性stroke控制字描框的顏色,預設 none<br />
*##屬性rotate='30'順時鐘轉30°。rotate='30,60,90,120,150,180,210'指定每個字的轉動角度<br />
*##用style控制字體&字形&尺寸,但顏色是用fill不是用color <br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/text.svg<br />
<br />
===4.位移&旋轉&縮放&歪斜===<br />
*相關屬性說明：<br />
*#平移變換(translate)：transform="translate(x,y)",即新坐標系的原點在原坐標系的(x,y)處,坐標軸的方向不變<br />
*#旋轉變換(rotate)：transform="rotate(angle cx,cy)",angle代表旋轉角度,預設單位是「度」,順時針為正,逆時針為負,(cx,cy)是旋轉中心所在的坐標,若省略旋轉中心坐標,則預設值是(0,0)<br />
*#伸縮變換(scale)：transform="scale(sx,sy)",sx,sy分別代表x軸方向和y方向拉伸或縮小的比例因子,拉伸：大於1；縮小：小於1,若省略sy，即sy=sx，作等比例縮放<br />
*#歪斜變換(skew)：transform='skewX(x-angle)'或transform='skewY(y-angle)',x-angle,y-angle分別代表沿x軸和y軸歪斜的角度<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/transform.svg<br />
<br />
===5.群組===<br />
*步驟:<br />
*#先添加svg標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，其中才有href屬性的定義<br />
*#在defs段落中定義圖形，並賦予id<br />
*#用<use xlink:href='#某id'/>來引用既有的定義<br />
<br />
===6.定義一次,引用多次===<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/uses.svg<br />
<br />
===7.漸層===<br />
*漸層和濾鏡如果取中文名稱,瀏覽器還認得,但Inkscape和線上轉檔軟體就會不認得<br />
====(1)線性漸層====<br />
====(2)放射漸層====<br />
<br />
===八、柔焦濾鏡===<br />
===九、path===<br />
===十、動畫===<br />
<br />
==Inkscape==<br />
==GIS==<br />
*何謂 GIS ？<br />
*兩種主要的 GIS 。<br />
*基本框架。<br />
*marks<br />
*overlays<br />
*google 我的地圖<br />
*結合我的地圖與 GIS<br />
==圖形計算機==<br />
*取得 svgdraw.php<br />
*基本框架<br />
*繪製基本圖形<br />
*函式繪圖<br />
*google 圖形計算機</div>
蕭卉均
http://well-being-ng.net/wiki1231/index.php?title=%E8%A8%8E%E8%AB%96:%E8%B3%87%E8%A8%8A%E5%9F%BA%E7%A4%8E%E6%87%89%E7%94%A8/%E8%95%AD%E5%8D%89%E5%9D%87&diff=37886
討論:資訊基礎應用/蕭卉均
2018-01-16T09:06:49Z
<p>蕭卉均：/* 七、漸層 */</p>
<hr />
<div>=ღ完整筆記ღ=<br />
==♡環境&工具♡==<br />
===1.環境===<br />
*伺服器與域名,伺服器DS216,網址6years.jendo.org<br />
*wifi,區網wifi：jendod&jendoa<br />
*網站空間,瀏覽器：firefox,優先於chrome,盡量不用IE<br />
*wiki上的個人頁,filezilla→開啟filezilla,並新增一個站台叫♕DS216+(共用)♕→主機設定:6years.jendo.org→協定:SFTP→使用者:共用→字碼集:UTF-8→連線,然後到♕home/www♕→建自己帳號的連線→可用的文字編輯器,如emeditor→連結filezilla&慣用的文字編輯器：♕編輯/設定/檔案編輯♕，選用♕使用自訂編輯器♕&♕總是使用預設的編輯器♕，並指定編輯器的路徑<br />
*課後重點筆記:<br />
*#table是開始,/table是結束<br />
*#IP:IP4,最多表達到255字,IPV4一般網頁使用,IP6,物聯網用<br />
*#物聯網:簡單說一切事物,得失相兼<br />
*#域名:域名伺服器(HOSTS)<br />
*#AI(人工智慧)<br />
*#big5,早期,只有繁體中文<br />
*#UTF-8,萬國碼<br />
<br />
===2.工具與設定===<br />
*firefox:Mozilla Firefox（簡稱Firefox）,中文俗稱火狐（中國大陸官方有使用但未註冊為商標）,是一個自由及開放原始碼的網頁瀏覽器,由Mozilla基金會及其子公司Mozilla公司開發<br />
*filezilla:ileZilla是一種快速&可信賴的FTP用戶端以及伺服器端開放原始碼程式,具有多種特色&直覺的介面,FileZilla在2003年11月獲選為SourceForge.net當月最佳推薦專案<br />
*EmEditor:EmEditor是江村軟體公司（Emurasoft,坐落於美國華盛頓州）所開發的一款在Windows平台上運行的文字編輯程式,EmEditor以運作輕巧&敏捷而又功能強大&豐富著稱而得到許多用戶的好評<br />
<br />
==♡HTML&HTTP♡==<br />
*發有者及發明年代:於西元1993年,W3C&WHATWG開發<br />
*HTML:超文件標示語言（英語：HyperText Markup Language,簡稱：HTML）是一種用於建立網頁的標準標示語言,HTML是一種基礎技術常與CSS&JavaScript一起被眾多網站用於設計令人賞心悅目的網頁&網頁應用程式以及行動應用程式的使用者介面<br />
*HTTP:超文本傳輸協定（英文：HyperText Transfer Protocol,縮寫：HTTP）是一種用於分佈式&協作式和超媒體資訊系統的應用層協議,HTTP是全球資訊網的資料通訊的基礎<br />
*xml:可延伸標記式語言（英語：Extensible Markup Language,簡稱：XML）是一種標記式語言,標記指電腦所能理解的資訊符號,通過此種標記,電腦之間可以處理包含各種資訊的文章等<br />
*課後筆記:<br />
*#筆記網頁建設:登入後搜尋{資訊基礎應用/蕭卉均}→點一下，開始編輯→編輯完點儲存頁面<br />
*#色碼表:https://www.toodoo.com/db/color.html<br />
*通訊錄:<br />
*<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
<table class='nicetable'><br />
<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
</table><br />
<br />
==♡ wiki ♡==<br />
*何謂wiki:Wiki是一種在全球資訊網上開放且可供多人協同創作的超文字系統,由沃德·坎寧安於1995年首先開發,沃德·坎寧安將wiki定義為「一種允許一群用戶用簡單的描述來建立和連線一組網頁的社會計算系統」<br />
*CC授權:創用CC授權條款（英語：Creative Commons license,簡稱CC授權）是一種公共版權授權條款,其允許分發受版權保護的作品,一個創用CC授權用於一個作者想給他人分享&使用&甚至創作衍生作品的權利<br />
*wiki語法:http://jendo.synology.me/wiki1231/index.php?title=Wiki_%E5%85%A5%E9%96%80%E8%AA%9E%E6%B3%95<br />
*wiki的word適應:履歷表<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E5%B1%A5%E6%AD%B7%E8%A1%A8.html<br />
==♡CSS♡==<br />
*何謂CSS:層疊樣式表（英語：Cascading Style Sheets,簡寫CSS）又稱串樣式列表&級聯樣式表&串接樣式表&層疊樣式表&階層式樣式表,一種用來為結構化文件（如HTML文件或XML應用）添加樣式（字型、間距和顏色等）的電腦語言,由W3C定義和維護,目前最新版本是CSS2.1，為W3C的推薦標準,CSS3現在已被大部分現代瀏覽器支援,而下一版的CSS4仍在開發中<br />
*用法:限制者才有標章,不限制者沒有標章<br />
*重要語法:<br />
*#Attribution(BY):姓名標示,您（使用者）可以複製&發行&展覽&表演&放映&廣播或通過資訊網路傳播本作品；您必須按照作者或者授權人指定的方式對作品進行姓名標示<br />
*#NonCommercial(NC):非商業性使用,您可以自由複製&散布&展示及演出本作品；您不得為商業目的而使用本作品<br />
*#NoDerivs(ND):禁止改作,您可以自由複製&散布&展示及演出本作品；您不得改變&轉變或更改本作品<br />
*#ShareAlike(SA):相同方式分享,您可以自由複製&散布&展示及演出本作品；若您改變&轉變或更改本作品,僅在遵守與本作品相同的授權條款下,您才能散布由本作品產生的衍生作品<br />
<br />
==♡SVG♡==<br />
===1.概述===<br />
*何謂SVG:可縮放向量圖形（英語：Scalable Vector Graphics,SVG）是一種基於可延伸標記式語言（XML）,用於描述二維向量圖形的圖形格式,SVG由W3C制定,是一個開放標準<br />
*點陣圖與向量圖的比較(含附檔名):<br />
*#SVG:又為向量圖,特色,放大不毛邊,https://upload.wikimedia.org/wikipedia/commons/5/53/Skull_and_crossbones.svg<br />
*#JPG:又名JEPG,失真,壓縮,http://wportfolio.wzu.edu.tw/blog/attach/995/27995/89/bf_51402_8868906_99219_2yzUdJnLy0AsZ9VdwaKNCA.jpg<br />
*#PNG:不失真,公開格式,https://s-media-cache-ak0.pinimg.com/originals/96/94/ef/9694ef6ecfd562c83e7a445ee9ee19ba.png<br />
*#GIF:可動畫,256色,https://2.bp.blogspot.com/-Ra6UuzwDGQg/WDfdq3X1GjI/AAAAAAAD0gc/MfVErIwBENYRH_DvvFsnThfYp-zVxugEgCLcB/s1600/AS000946_02.gif<br />
*SVG格式具有以下優點:<br />
*#圖檔可讀,易於修改和編輯（理論上如此,但實際上卻是因為各種不同的SVG檔編輯器而可能儲存成不易解讀的SVG檔案）<br />
*#與現有技術可以互動融合,例如,SVG技術本身的動態部分（包括時序控制和動畫）就是基於SMIL標準,另外,SVG檔案還可嵌入JavaScript（嚴格地說，應該是ECMAScript）指令碼來控制SVG物件<br />
*#SVG圖形格式可以方便的建立文字索引,從而實現基於內容的圖像搜尋<br />
*#SVG圖形格式支援多種濾鏡和特殊效果,在不改變圖像內容的前提下可以實現點陣圖格式中類似文字陰影的效果<br />
*#SVG圖形格式可以用來動態生成圖形,例如,可用SVG動態生成具有互動功能的地圖,嵌入網頁中,並顯示給終端用戶<br />
*SVG格式具有以下缺點：<br />
*#如何和已經占有重要市場份額的向量圖形格式Adobe Animate競爭的問題,事實上,Adobe Animate在Flash CC 2014版及以後的版本就都支援直接匯出SVG檔案了<br />
*#SVG的本地執行環境下的廠家支援程度<br />
*#由於原始的SVG檔是遵從XML語法,導致資料採用未壓縮的方式存放,因此相較於其他的向量圖形格式,同樣的檔案內容會比其他的檔案格式稍大,Adobe因此使用gzip壓縮開發出壓縮的SVG檔格式,附檔名為 .svgz, 但此種檔案格式除了Adobe旗下的軟體以外,未被廣泛支援使用<br />
*#舊版的SVG Viewer無法正確顯示出使用新版SVG格式的向量圖形<br />
<br />
===2.基本架構===<br />
*基本架構:SVG允許3種圖形物件類型：向量圖形,柵格圖像以及文字,圖形物件——包括PNG&JPEG這些柵格圖像——能夠被編組&設計&轉換及整合進先前的彩現物件中,文字可以在任何適用於應用程式的XML命名空間之內,從而提高SVG圖形的搜尋能力和無障礙性,SVG提供的功能集涵蓋了巢狀轉換&裁剪路徑&Alpha通道&濾鏡效果&模板物件以及可延伸性,SVG嚴格遵從XML語法,並用文字格式的描述性語言來描述圖像內容,因此是一種和圖像解析度無關的向量圖形格式,SVG可以實現動態和互動功能,在DOM模型的基礎上,SVG開發設計人員可以利用ECMAScript或者SMIL來進行時序控制或物件的操縱,SVG雖然是文字格式,但是SVG支援利用gzip壓縮演算法減少檔案尺寸,壓縮後的檔案通常用被稱為「SVGZ檔案」<br />
*基本樣式:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/arrow.svg<br />
*基本圖形:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/bearFace.svg<br />
*SVG主要支援以下幾種顯示物件：<br />
*#向量顯示物件,基本向量顯示物件包括矩形&圓&橢圓&多邊形&直線&任意曲線等<br />
*#嵌入式外部圖像,包括PNG&JPEG&SVG等<br />
*#文字物件<br />
<br />
===3.文字===<br />
*TEXT<br />
*#在「text」標籤開始與結束之間夾字,可用中英文,而使用「屬性」來規定文字的表現,所有的屬性都可以改用樣式來表達<br />
*#可用中文字形：<br />
*##屬性dx和dy基於前一個字的位置去做變化：值可為'10,20,30,40'，字的距離一個比一個更遠<br />
*##屬性x和y標示字的起點：值可為'10,20,30,40'，表示每個字的x或y座標<br />
*##屬性fill控制填入字的顏色,預設黑色<br />
*##屬性stroke控制字描框的顏色,預設 none<br />
*##屬性rotate='30'順時鐘轉30°。rotate='30,60,90,120,150,180,210'指定每個字的轉動角度<br />
*##用style控制字體&字形&尺寸,但顏色是用fill不是用color <br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/text.svg<br />
<br />
===4.位移&旋轉&縮放&歪斜===<br />
*相關屬性說明：<br />
*#平移變換(translate)：transform="translate(x,y)",即新坐標系的原點在原坐標系的(x,y)處,坐標軸的方向不變<br />
*#旋轉變換(rotate)：transform="rotate(angle cx,cy)",angle代表旋轉角度,預設單位是「度」,順時針為正,逆時針為負,(cx,cy)是旋轉中心所在的坐標,若省略旋轉中心坐標,則預設值是(0,0)<br />
*#伸縮變換(scale)：transform="scale(sx,sy)",sx,sy分別代表x軸方向和y方向拉伸或縮小的比例因子,拉伸：大於1；縮小：小於1,若省略sy，即sy=sx，作等比例縮放<br />
*#歪斜變換(skew)：transform='skewX(x-angle)'或transform='skewY(y-angle)',x-angle,y-angle分別代表沿x軸和y軸歪斜的角度<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/transform.svg<br />
<br />
===5.群組===<br />
*步驟:<br />
*#先添加svg標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，其中才有href屬性的定義<br />
*#在defs段落中定義圖形，並賦予id<br />
*#用<use xlink:href='#某id'/>來引用既有的定義<br />
<br />
===6.定義一次,引用多次===<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/uses.svg<br />
<br />
===7.漸層===<br />
====(1)線性漸層====<br />
====(2)放射漸層====<br />
<br />
===八、柔焦濾鏡===<br />
===九、path===<br />
===十、動畫===<br />
<br />
==Inkscape==<br />
==GIS==<br />
*何謂 GIS ？<br />
*兩種主要的 GIS 。<br />
*基本框架。<br />
*marks<br />
*overlays<br />
*google 我的地圖<br />
*結合我的地圖與 GIS<br />
==圖形計算機==<br />
*取得 svgdraw.php<br />
*基本框架<br />
*繪製基本圖形<br />
*函式繪圖<br />
*google 圖形計算機</div>
蕭卉均
http://well-being-ng.net/wiki1231/index.php?title=%E8%A8%8E%E8%AB%96:%E8%B3%87%E8%A8%8A%E5%9F%BA%E7%A4%8E%E6%87%89%E7%94%A8/%E8%95%AD%E5%8D%89%E5%9D%87&diff=37885
討論:資訊基礎應用/蕭卉均
2018-01-16T09:06:13Z
<p>蕭卉均：/* 六、定義一次，引用多次 */</p>
<hr />
<div>=ღ完整筆記ღ=<br />
==♡環境&工具♡==<br />
===1.環境===<br />
*伺服器與域名,伺服器DS216,網址6years.jendo.org<br />
*wifi,區網wifi：jendod&jendoa<br />
*網站空間,瀏覽器：firefox,優先於chrome,盡量不用IE<br />
*wiki上的個人頁,filezilla→開啟filezilla,並新增一個站台叫♕DS216+(共用)♕→主機設定:6years.jendo.org→協定:SFTP→使用者:共用→字碼集:UTF-8→連線,然後到♕home/www♕→建自己帳號的連線→可用的文字編輯器,如emeditor→連結filezilla&慣用的文字編輯器：♕編輯/設定/檔案編輯♕，選用♕使用自訂編輯器♕&♕總是使用預設的編輯器♕，並指定編輯器的路徑<br />
*課後重點筆記:<br />
*#table是開始,/table是結束<br />
*#IP:IP4,最多表達到255字,IPV4一般網頁使用,IP6,物聯網用<br />
*#物聯網:簡單說一切事物,得失相兼<br />
*#域名:域名伺服器(HOSTS)<br />
*#AI(人工智慧)<br />
*#big5,早期,只有繁體中文<br />
*#UTF-8,萬國碼<br />
<br />
===2.工具與設定===<br />
*firefox:Mozilla Firefox（簡稱Firefox）,中文俗稱火狐（中國大陸官方有使用但未註冊為商標）,是一個自由及開放原始碼的網頁瀏覽器,由Mozilla基金會及其子公司Mozilla公司開發<br />
*filezilla:ileZilla是一種快速&可信賴的FTP用戶端以及伺服器端開放原始碼程式,具有多種特色&直覺的介面,FileZilla在2003年11月獲選為SourceForge.net當月最佳推薦專案<br />
*EmEditor:EmEditor是江村軟體公司（Emurasoft,坐落於美國華盛頓州）所開發的一款在Windows平台上運行的文字編輯程式,EmEditor以運作輕巧&敏捷而又功能強大&豐富著稱而得到許多用戶的好評<br />
<br />
==♡HTML&HTTP♡==<br />
*發有者及發明年代:於西元1993年,W3C&WHATWG開發<br />
*HTML:超文件標示語言（英語：HyperText Markup Language,簡稱：HTML）是一種用於建立網頁的標準標示語言,HTML是一種基礎技術常與CSS&JavaScript一起被眾多網站用於設計令人賞心悅目的網頁&網頁應用程式以及行動應用程式的使用者介面<br />
*HTTP:超文本傳輸協定（英文：HyperText Transfer Protocol,縮寫：HTTP）是一種用於分佈式&協作式和超媒體資訊系統的應用層協議,HTTP是全球資訊網的資料通訊的基礎<br />
*xml:可延伸標記式語言（英語：Extensible Markup Language,簡稱：XML）是一種標記式語言,標記指電腦所能理解的資訊符號,通過此種標記,電腦之間可以處理包含各種資訊的文章等<br />
*課後筆記:<br />
*#筆記網頁建設:登入後搜尋{資訊基礎應用/蕭卉均}→點一下，開始編輯→編輯完點儲存頁面<br />
*#色碼表:https://www.toodoo.com/db/color.html<br />
*通訊錄:<br />
*<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
<table class='nicetable'><br />
<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
</table><br />
<br />
==♡ wiki ♡==<br />
*何謂wiki:Wiki是一種在全球資訊網上開放且可供多人協同創作的超文字系統,由沃德·坎寧安於1995年首先開發,沃德·坎寧安將wiki定義為「一種允許一群用戶用簡單的描述來建立和連線一組網頁的社會計算系統」<br />
*CC授權:創用CC授權條款（英語：Creative Commons license,簡稱CC授權）是一種公共版權授權條款,其允許分發受版權保護的作品,一個創用CC授權用於一個作者想給他人分享&使用&甚至創作衍生作品的權利<br />
*wiki語法:http://jendo.synology.me/wiki1231/index.php?title=Wiki_%E5%85%A5%E9%96%80%E8%AA%9E%E6%B3%95<br />
*wiki的word適應:履歷表<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E5%B1%A5%E6%AD%B7%E8%A1%A8.html<br />
==♡CSS♡==<br />
*何謂CSS:層疊樣式表（英語：Cascading Style Sheets,簡寫CSS）又稱串樣式列表&級聯樣式表&串接樣式表&層疊樣式表&階層式樣式表,一種用來為結構化文件（如HTML文件或XML應用）添加樣式（字型、間距和顏色等）的電腦語言,由W3C定義和維護,目前最新版本是CSS2.1，為W3C的推薦標準,CSS3現在已被大部分現代瀏覽器支援,而下一版的CSS4仍在開發中<br />
*用法:限制者才有標章,不限制者沒有標章<br />
*重要語法:<br />
*#Attribution(BY):姓名標示,您（使用者）可以複製&發行&展覽&表演&放映&廣播或通過資訊網路傳播本作品；您必須按照作者或者授權人指定的方式對作品進行姓名標示<br />
*#NonCommercial(NC):非商業性使用,您可以自由複製&散布&展示及演出本作品；您不得為商業目的而使用本作品<br />
*#NoDerivs(ND):禁止改作,您可以自由複製&散布&展示及演出本作品；您不得改變&轉變或更改本作品<br />
*#ShareAlike(SA):相同方式分享,您可以自由複製&散布&展示及演出本作品；若您改變&轉變或更改本作品,僅在遵守與本作品相同的授權條款下,您才能散布由本作品產生的衍生作品<br />
<br />
==♡SVG♡==<br />
===1.概述===<br />
*何謂SVG:可縮放向量圖形（英語：Scalable Vector Graphics,SVG）是一種基於可延伸標記式語言（XML）,用於描述二維向量圖形的圖形格式,SVG由W3C制定,是一個開放標準<br />
*點陣圖與向量圖的比較(含附檔名):<br />
*#SVG:又為向量圖,特色,放大不毛邊,https://upload.wikimedia.org/wikipedia/commons/5/53/Skull_and_crossbones.svg<br />
*#JPG:又名JEPG,失真,壓縮,http://wportfolio.wzu.edu.tw/blog/attach/995/27995/89/bf_51402_8868906_99219_2yzUdJnLy0AsZ9VdwaKNCA.jpg<br />
*#PNG:不失真,公開格式,https://s-media-cache-ak0.pinimg.com/originals/96/94/ef/9694ef6ecfd562c83e7a445ee9ee19ba.png<br />
*#GIF:可動畫,256色,https://2.bp.blogspot.com/-Ra6UuzwDGQg/WDfdq3X1GjI/AAAAAAAD0gc/MfVErIwBENYRH_DvvFsnThfYp-zVxugEgCLcB/s1600/AS000946_02.gif<br />
*SVG格式具有以下優點:<br />
*#圖檔可讀,易於修改和編輯（理論上如此,但實際上卻是因為各種不同的SVG檔編輯器而可能儲存成不易解讀的SVG檔案）<br />
*#與現有技術可以互動融合,例如,SVG技術本身的動態部分（包括時序控制和動畫）就是基於SMIL標準,另外,SVG檔案還可嵌入JavaScript（嚴格地說，應該是ECMAScript）指令碼來控制SVG物件<br />
*#SVG圖形格式可以方便的建立文字索引,從而實現基於內容的圖像搜尋<br />
*#SVG圖形格式支援多種濾鏡和特殊效果,在不改變圖像內容的前提下可以實現點陣圖格式中類似文字陰影的效果<br />
*#SVG圖形格式可以用來動態生成圖形,例如,可用SVG動態生成具有互動功能的地圖,嵌入網頁中,並顯示給終端用戶<br />
*SVG格式具有以下缺點：<br />
*#如何和已經占有重要市場份額的向量圖形格式Adobe Animate競爭的問題,事實上,Adobe Animate在Flash CC 2014版及以後的版本就都支援直接匯出SVG檔案了<br />
*#SVG的本地執行環境下的廠家支援程度<br />
*#由於原始的SVG檔是遵從XML語法,導致資料採用未壓縮的方式存放,因此相較於其他的向量圖形格式,同樣的檔案內容會比其他的檔案格式稍大,Adobe因此使用gzip壓縮開發出壓縮的SVG檔格式,附檔名為 .svgz, 但此種檔案格式除了Adobe旗下的軟體以外,未被廣泛支援使用<br />
*#舊版的SVG Viewer無法正確顯示出使用新版SVG格式的向量圖形<br />
<br />
===2.基本架構===<br />
*基本架構:SVG允許3種圖形物件類型：向量圖形,柵格圖像以及文字,圖形物件——包括PNG&JPEG這些柵格圖像——能夠被編組&設計&轉換及整合進先前的彩現物件中,文字可以在任何適用於應用程式的XML命名空間之內,從而提高SVG圖形的搜尋能力和無障礙性,SVG提供的功能集涵蓋了巢狀轉換&裁剪路徑&Alpha通道&濾鏡效果&模板物件以及可延伸性,SVG嚴格遵從XML語法,並用文字格式的描述性語言來描述圖像內容,因此是一種和圖像解析度無關的向量圖形格式,SVG可以實現動態和互動功能,在DOM模型的基礎上,SVG開發設計人員可以利用ECMAScript或者SMIL來進行時序控制或物件的操縱,SVG雖然是文字格式,但是SVG支援利用gzip壓縮演算法減少檔案尺寸,壓縮後的檔案通常用被稱為「SVGZ檔案」<br />
*基本樣式:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/arrow.svg<br />
*基本圖形:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/bearFace.svg<br />
*SVG主要支援以下幾種顯示物件：<br />
*#向量顯示物件,基本向量顯示物件包括矩形&圓&橢圓&多邊形&直線&任意曲線等<br />
*#嵌入式外部圖像,包括PNG&JPEG&SVG等<br />
*#文字物件<br />
<br />
===3.文字===<br />
*TEXT<br />
*#在「text」標籤開始與結束之間夾字,可用中英文,而使用「屬性」來規定文字的表現,所有的屬性都可以改用樣式來表達<br />
*#可用中文字形：<br />
*##屬性dx和dy基於前一個字的位置去做變化：值可為'10,20,30,40'，字的距離一個比一個更遠<br />
*##屬性x和y標示字的起點：值可為'10,20,30,40'，表示每個字的x或y座標<br />
*##屬性fill控制填入字的顏色,預設黑色<br />
*##屬性stroke控制字描框的顏色,預設 none<br />
*##屬性rotate='30'順時鐘轉30°。rotate='30,60,90,120,150,180,210'指定每個字的轉動角度<br />
*##用style控制字體&字形&尺寸,但顏色是用fill不是用color <br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/text.svg<br />
<br />
===4.位移&旋轉&縮放&歪斜===<br />
*相關屬性說明：<br />
*#平移變換(translate)：transform="translate(x,y)",即新坐標系的原點在原坐標系的(x,y)處,坐標軸的方向不變<br />
*#旋轉變換(rotate)：transform="rotate(angle cx,cy)",angle代表旋轉角度,預設單位是「度」,順時針為正,逆時針為負,(cx,cy)是旋轉中心所在的坐標,若省略旋轉中心坐標,則預設值是(0,0)<br />
*#伸縮變換(scale)：transform="scale(sx,sy)",sx,sy分別代表x軸方向和y方向拉伸或縮小的比例因子,拉伸：大於1；縮小：小於1,若省略sy，即sy=sx，作等比例縮放<br />
*#歪斜變換(skew)：transform='skewX(x-angle)'或transform='skewY(y-angle)',x-angle,y-angle分別代表沿x軸和y軸歪斜的角度<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/transform.svg<br />
<br />
===5.群組===<br />
*步驟:<br />
*#先添加svg標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，其中才有href屬性的定義<br />
*#在defs段落中定義圖形，並賦予id<br />
*#用<use xlink:href='#某id'/>來引用既有的定義<br />
<br />
===6.定義一次,引用多次===<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/uses.svg<br />
<br />
===七、漸層===<br />
====(一)線性漸層====<br />
====(二)放射漸層====<br />
===八、柔焦濾鏡===<br />
===九、path===<br />
===十、動畫===<br />
<br />
==Inkscape==<br />
==GIS==<br />
*何謂 GIS ？<br />
*兩種主要的 GIS 。<br />
*基本框架。<br />
*marks<br />
*overlays<br />
*google 我的地圖<br />
*結合我的地圖與 GIS<br />
==圖形計算機==<br />
*取得 svgdraw.php<br />
*基本框架<br />
*繪製基本圖形<br />
*函式繪圖<br />
*google 圖形計算機</div>
蕭卉均
http://well-being-ng.net/wiki1231/index.php?title=%E8%A8%8E%E8%AB%96:%E8%B3%87%E8%A8%8A%E5%9F%BA%E7%A4%8E%E6%87%89%E7%94%A8/%E8%95%AD%E5%8D%89%E5%9D%87&diff=37884
討論:資訊基礎應用/蕭卉均
2018-01-16T09:05:20Z
<p>蕭卉均：/* 4.位移、旋轉、縮放、歪斜 */</p>
<hr />
<div>=ღ完整筆記ღ=<br />
==♡環境&工具♡==<br />
===1.環境===<br />
*伺服器與域名,伺服器DS216,網址6years.jendo.org<br />
*wifi,區網wifi：jendod&jendoa<br />
*網站空間,瀏覽器：firefox,優先於chrome,盡量不用IE<br />
*wiki上的個人頁,filezilla→開啟filezilla,並新增一個站台叫♕DS216+(共用)♕→主機設定:6years.jendo.org→協定:SFTP→使用者:共用→字碼集:UTF-8→連線,然後到♕home/www♕→建自己帳號的連線→可用的文字編輯器,如emeditor→連結filezilla&慣用的文字編輯器：♕編輯/設定/檔案編輯♕，選用♕使用自訂編輯器♕&♕總是使用預設的編輯器♕，並指定編輯器的路徑<br />
*課後重點筆記:<br />
*#table是開始,/table是結束<br />
*#IP:IP4,最多表達到255字,IPV4一般網頁使用,IP6,物聯網用<br />
*#物聯網:簡單說一切事物,得失相兼<br />
*#域名:域名伺服器(HOSTS)<br />
*#AI(人工智慧)<br />
*#big5,早期,只有繁體中文<br />
*#UTF-8,萬國碼<br />
<br />
===2.工具與設定===<br />
*firefox:Mozilla Firefox（簡稱Firefox）,中文俗稱火狐（中國大陸官方有使用但未註冊為商標）,是一個自由及開放原始碼的網頁瀏覽器,由Mozilla基金會及其子公司Mozilla公司開發<br />
*filezilla:ileZilla是一種快速&可信賴的FTP用戶端以及伺服器端開放原始碼程式,具有多種特色&直覺的介面,FileZilla在2003年11月獲選為SourceForge.net當月最佳推薦專案<br />
*EmEditor:EmEditor是江村軟體公司（Emurasoft,坐落於美國華盛頓州）所開發的一款在Windows平台上運行的文字編輯程式,EmEditor以運作輕巧&敏捷而又功能強大&豐富著稱而得到許多用戶的好評<br />
<br />
==♡HTML&HTTP♡==<br />
*發有者及發明年代:於西元1993年,W3C&WHATWG開發<br />
*HTML:超文件標示語言（英語：HyperText Markup Language,簡稱：HTML）是一種用於建立網頁的標準標示語言,HTML是一種基礎技術常與CSS&JavaScript一起被眾多網站用於設計令人賞心悅目的網頁&網頁應用程式以及行動應用程式的使用者介面<br />
*HTTP:超文本傳輸協定（英文：HyperText Transfer Protocol,縮寫：HTTP）是一種用於分佈式&協作式和超媒體資訊系統的應用層協議,HTTP是全球資訊網的資料通訊的基礎<br />
*xml:可延伸標記式語言（英語：Extensible Markup Language,簡稱：XML）是一種標記式語言,標記指電腦所能理解的資訊符號,通過此種標記,電腦之間可以處理包含各種資訊的文章等<br />
*課後筆記:<br />
*#筆記網頁建設:登入後搜尋{資訊基礎應用/蕭卉均}→點一下，開始編輯→編輯完點儲存頁面<br />
*#色碼表:https://www.toodoo.com/db/color.html<br />
*通訊錄:<br />
*<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
<table class='nicetable'><br />
<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
</table><br />
<br />
==♡ wiki ♡==<br />
*何謂wiki:Wiki是一種在全球資訊網上開放且可供多人協同創作的超文字系統,由沃德·坎寧安於1995年首先開發,沃德·坎寧安將wiki定義為「一種允許一群用戶用簡單的描述來建立和連線一組網頁的社會計算系統」<br />
*CC授權:創用CC授權條款（英語：Creative Commons license,簡稱CC授權）是一種公共版權授權條款,其允許分發受版權保護的作品,一個創用CC授權用於一個作者想給他人分享&使用&甚至創作衍生作品的權利<br />
*wiki語法:http://jendo.synology.me/wiki1231/index.php?title=Wiki_%E5%85%A5%E9%96%80%E8%AA%9E%E6%B3%95<br />
*wiki的word適應:履歷表<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E5%B1%A5%E6%AD%B7%E8%A1%A8.html<br />
==♡CSS♡==<br />
*何謂CSS:層疊樣式表（英語：Cascading Style Sheets,簡寫CSS）又稱串樣式列表&級聯樣式表&串接樣式表&層疊樣式表&階層式樣式表,一種用來為結構化文件（如HTML文件或XML應用）添加樣式（字型、間距和顏色等）的電腦語言,由W3C定義和維護,目前最新版本是CSS2.1，為W3C的推薦標準,CSS3現在已被大部分現代瀏覽器支援,而下一版的CSS4仍在開發中<br />
*用法:限制者才有標章,不限制者沒有標章<br />
*重要語法:<br />
*#Attribution(BY):姓名標示,您（使用者）可以複製&發行&展覽&表演&放映&廣播或通過資訊網路傳播本作品；您必須按照作者或者授權人指定的方式對作品進行姓名標示<br />
*#NonCommercial(NC):非商業性使用,您可以自由複製&散布&展示及演出本作品；您不得為商業目的而使用本作品<br />
*#NoDerivs(ND):禁止改作,您可以自由複製&散布&展示及演出本作品；您不得改變&轉變或更改本作品<br />
*#ShareAlike(SA):相同方式分享,您可以自由複製&散布&展示及演出本作品；若您改變&轉變或更改本作品,僅在遵守與本作品相同的授權條款下,您才能散布由本作品產生的衍生作品<br />
<br />
==♡SVG♡==<br />
===1.概述===<br />
*何謂SVG:可縮放向量圖形（英語：Scalable Vector Graphics,SVG）是一種基於可延伸標記式語言（XML）,用於描述二維向量圖形的圖形格式,SVG由W3C制定,是一個開放標準<br />
*點陣圖與向量圖的比較(含附檔名):<br />
*#SVG:又為向量圖,特色,放大不毛邊,https://upload.wikimedia.org/wikipedia/commons/5/53/Skull_and_crossbones.svg<br />
*#JPG:又名JEPG,失真,壓縮,http://wportfolio.wzu.edu.tw/blog/attach/995/27995/89/bf_51402_8868906_99219_2yzUdJnLy0AsZ9VdwaKNCA.jpg<br />
*#PNG:不失真,公開格式,https://s-media-cache-ak0.pinimg.com/originals/96/94/ef/9694ef6ecfd562c83e7a445ee9ee19ba.png<br />
*#GIF:可動畫,256色,https://2.bp.blogspot.com/-Ra6UuzwDGQg/WDfdq3X1GjI/AAAAAAAD0gc/MfVErIwBENYRH_DvvFsnThfYp-zVxugEgCLcB/s1600/AS000946_02.gif<br />
*SVG格式具有以下優點:<br />
*#圖檔可讀,易於修改和編輯（理論上如此,但實際上卻是因為各種不同的SVG檔編輯器而可能儲存成不易解讀的SVG檔案）<br />
*#與現有技術可以互動融合,例如,SVG技術本身的動態部分（包括時序控制和動畫）就是基於SMIL標準,另外,SVG檔案還可嵌入JavaScript（嚴格地說，應該是ECMAScript）指令碼來控制SVG物件<br />
*#SVG圖形格式可以方便的建立文字索引,從而實現基於內容的圖像搜尋<br />
*#SVG圖形格式支援多種濾鏡和特殊效果,在不改變圖像內容的前提下可以實現點陣圖格式中類似文字陰影的效果<br />
*#SVG圖形格式可以用來動態生成圖形,例如,可用SVG動態生成具有互動功能的地圖,嵌入網頁中,並顯示給終端用戶<br />
*SVG格式具有以下缺點：<br />
*#如何和已經占有重要市場份額的向量圖形格式Adobe Animate競爭的問題,事實上,Adobe Animate在Flash CC 2014版及以後的版本就都支援直接匯出SVG檔案了<br />
*#SVG的本地執行環境下的廠家支援程度<br />
*#由於原始的SVG檔是遵從XML語法,導致資料採用未壓縮的方式存放,因此相較於其他的向量圖形格式,同樣的檔案內容會比其他的檔案格式稍大,Adobe因此使用gzip壓縮開發出壓縮的SVG檔格式,附檔名為 .svgz, 但此種檔案格式除了Adobe旗下的軟體以外,未被廣泛支援使用<br />
*#舊版的SVG Viewer無法正確顯示出使用新版SVG格式的向量圖形<br />
<br />
===2.基本架構===<br />
*基本架構:SVG允許3種圖形物件類型：向量圖形,柵格圖像以及文字,圖形物件——包括PNG&JPEG這些柵格圖像——能夠被編組&設計&轉換及整合進先前的彩現物件中,文字可以在任何適用於應用程式的XML命名空間之內,從而提高SVG圖形的搜尋能力和無障礙性,SVG提供的功能集涵蓋了巢狀轉換&裁剪路徑&Alpha通道&濾鏡效果&模板物件以及可延伸性,SVG嚴格遵從XML語法,並用文字格式的描述性語言來描述圖像內容,因此是一種和圖像解析度無關的向量圖形格式,SVG可以實現動態和互動功能,在DOM模型的基礎上,SVG開發設計人員可以利用ECMAScript或者SMIL來進行時序控制或物件的操縱,SVG雖然是文字格式,但是SVG支援利用gzip壓縮演算法減少檔案尺寸,壓縮後的檔案通常用被稱為「SVGZ檔案」<br />
*基本樣式:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/arrow.svg<br />
*基本圖形:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/bearFace.svg<br />
*SVG主要支援以下幾種顯示物件：<br />
*#向量顯示物件,基本向量顯示物件包括矩形&圓&橢圓&多邊形&直線&任意曲線等<br />
*#嵌入式外部圖像,包括PNG&JPEG&SVG等<br />
*#文字物件<br />
<br />
===3.文字===<br />
*TEXT<br />
*#在「text」標籤開始與結束之間夾字,可用中英文,而使用「屬性」來規定文字的表現,所有的屬性都可以改用樣式來表達<br />
*#可用中文字形：<br />
*##屬性dx和dy基於前一個字的位置去做變化：值可為'10,20,30,40'，字的距離一個比一個更遠<br />
*##屬性x和y標示字的起點：值可為'10,20,30,40'，表示每個字的x或y座標<br />
*##屬性fill控制填入字的顏色,預設黑色<br />
*##屬性stroke控制字描框的顏色,預設 none<br />
*##屬性rotate='30'順時鐘轉30°。rotate='30,60,90,120,150,180,210'指定每個字的轉動角度<br />
*##用style控制字體&字形&尺寸,但顏色是用fill不是用color <br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/text.svg<br />
<br />
===4.位移&旋轉&縮放&歪斜===<br />
*相關屬性說明：<br />
*#平移變換(translate)：transform="translate(x,y)",即新坐標系的原點在原坐標系的(x,y)處,坐標軸的方向不變<br />
*#旋轉變換(rotate)：transform="rotate(angle cx,cy)",angle代表旋轉角度,預設單位是「度」,順時針為正,逆時針為負,(cx,cy)是旋轉中心所在的坐標,若省略旋轉中心坐標,則預設值是(0,0)<br />
*#伸縮變換(scale)：transform="scale(sx,sy)",sx,sy分別代表x軸方向和y方向拉伸或縮小的比例因子,拉伸：大於1；縮小：小於1,若省略sy，即sy=sx，作等比例縮放<br />
*#歪斜變換(skew)：transform='skewX(x-angle)'或transform='skewY(y-angle)',x-angle,y-angle分別代表沿x軸和y軸歪斜的角度<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/transform.svg<br />
<br />
===5.群組===<br />
*步驟:<br />
*#先添加svg標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，其中才有href屬性的定義<br />
*#在defs段落中定義圖形，並賦予id<br />
*#用<use xlink:href='#某id'/>來引用既有的定義<br />
<br />
===六、定義一次，引用多次===<br />
===七、漸層===<br />
====(一)線性漸層====<br />
====(二)放射漸層====<br />
===八、柔焦濾鏡===<br />
===九、path===<br />
===十、動畫===<br />
<br />
==Inkscape==<br />
==GIS==<br />
*何謂 GIS ？<br />
*兩種主要的 GIS 。<br />
*基本框架。<br />
*marks<br />
*overlays<br />
*google 我的地圖<br />
*結合我的地圖與 GIS<br />
==圖形計算機==<br />
*取得 svgdraw.php<br />
*基本框架<br />
*繪製基本圖形<br />
*函式繪圖<br />
*google 圖形計算機</div>
蕭卉均
http://well-being-ng.net/wiki1231/index.php?title=%E8%A8%8E%E8%AB%96:%E8%B3%87%E8%A8%8A%E5%9F%BA%E7%A4%8E%E6%87%89%E7%94%A8/%E8%95%AD%E5%8D%89%E5%9D%87&diff=37883
討論:資訊基礎應用/蕭卉均
2018-01-16T09:03:17Z
<p>蕭卉均：/* 五、群組 */</p>
<hr />
<div>=ღ完整筆記ღ=<br />
==♡環境&工具♡==<br />
===1.環境===<br />
*伺服器與域名,伺服器DS216,網址6years.jendo.org<br />
*wifi,區網wifi：jendod&jendoa<br />
*網站空間,瀏覽器：firefox,優先於chrome,盡量不用IE<br />
*wiki上的個人頁,filezilla→開啟filezilla,並新增一個站台叫♕DS216+(共用)♕→主機設定:6years.jendo.org→協定:SFTP→使用者:共用→字碼集:UTF-8→連線,然後到♕home/www♕→建自己帳號的連線→可用的文字編輯器,如emeditor→連結filezilla&慣用的文字編輯器：♕編輯/設定/檔案編輯♕，選用♕使用自訂編輯器♕&♕總是使用預設的編輯器♕，並指定編輯器的路徑<br />
*課後重點筆記:<br />
*#table是開始,/table是結束<br />
*#IP:IP4,最多表達到255字,IPV4一般網頁使用,IP6,物聯網用<br />
*#物聯網:簡單說一切事物,得失相兼<br />
*#域名:域名伺服器(HOSTS)<br />
*#AI(人工智慧)<br />
*#big5,早期,只有繁體中文<br />
*#UTF-8,萬國碼<br />
<br />
===2.工具與設定===<br />
*firefox:Mozilla Firefox（簡稱Firefox）,中文俗稱火狐（中國大陸官方有使用但未註冊為商標）,是一個自由及開放原始碼的網頁瀏覽器,由Mozilla基金會及其子公司Mozilla公司開發<br />
*filezilla:ileZilla是一種快速&可信賴的FTP用戶端以及伺服器端開放原始碼程式,具有多種特色&直覺的介面,FileZilla在2003年11月獲選為SourceForge.net當月最佳推薦專案<br />
*EmEditor:EmEditor是江村軟體公司（Emurasoft,坐落於美國華盛頓州）所開發的一款在Windows平台上運行的文字編輯程式,EmEditor以運作輕巧&敏捷而又功能強大&豐富著稱而得到許多用戶的好評<br />
<br />
==♡HTML&HTTP♡==<br />
*發有者及發明年代:於西元1993年,W3C&WHATWG開發<br />
*HTML:超文件標示語言（英語：HyperText Markup Language,簡稱：HTML）是一種用於建立網頁的標準標示語言,HTML是一種基礎技術常與CSS&JavaScript一起被眾多網站用於設計令人賞心悅目的網頁&網頁應用程式以及行動應用程式的使用者介面<br />
*HTTP:超文本傳輸協定（英文：HyperText Transfer Protocol,縮寫：HTTP）是一種用於分佈式&協作式和超媒體資訊系統的應用層協議,HTTP是全球資訊網的資料通訊的基礎<br />
*xml:可延伸標記式語言（英語：Extensible Markup Language,簡稱：XML）是一種標記式語言,標記指電腦所能理解的資訊符號,通過此種標記,電腦之間可以處理包含各種資訊的文章等<br />
*課後筆記:<br />
*#筆記網頁建設:登入後搜尋{資訊基礎應用/蕭卉均}→點一下，開始編輯→編輯完點儲存頁面<br />
*#色碼表:https://www.toodoo.com/db/color.html<br />
*通訊錄:<br />
*<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
<table class='nicetable'><br />
<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
</table><br />
<br />
==♡ wiki ♡==<br />
*何謂wiki:Wiki是一種在全球資訊網上開放且可供多人協同創作的超文字系統,由沃德·坎寧安於1995年首先開發,沃德·坎寧安將wiki定義為「一種允許一群用戶用簡單的描述來建立和連線一組網頁的社會計算系統」<br />
*CC授權:創用CC授權條款（英語：Creative Commons license,簡稱CC授權）是一種公共版權授權條款,其允許分發受版權保護的作品,一個創用CC授權用於一個作者想給他人分享&使用&甚至創作衍生作品的權利<br />
*wiki語法:http://jendo.synology.me/wiki1231/index.php?title=Wiki_%E5%85%A5%E9%96%80%E8%AA%9E%E6%B3%95<br />
*wiki的word適應:履歷表<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E5%B1%A5%E6%AD%B7%E8%A1%A8.html<br />
==♡CSS♡==<br />
*何謂CSS:層疊樣式表（英語：Cascading Style Sheets,簡寫CSS）又稱串樣式列表&級聯樣式表&串接樣式表&層疊樣式表&階層式樣式表,一種用來為結構化文件（如HTML文件或XML應用）添加樣式（字型、間距和顏色等）的電腦語言,由W3C定義和維護,目前最新版本是CSS2.1，為W3C的推薦標準,CSS3現在已被大部分現代瀏覽器支援,而下一版的CSS4仍在開發中<br />
*用法:限制者才有標章,不限制者沒有標章<br />
*重要語法:<br />
*#Attribution(BY):姓名標示,您（使用者）可以複製&發行&展覽&表演&放映&廣播或通過資訊網路傳播本作品；您必須按照作者或者授權人指定的方式對作品進行姓名標示<br />
*#NonCommercial(NC):非商業性使用,您可以自由複製&散布&展示及演出本作品；您不得為商業目的而使用本作品<br />
*#NoDerivs(ND):禁止改作,您可以自由複製&散布&展示及演出本作品；您不得改變&轉變或更改本作品<br />
*#ShareAlike(SA):相同方式分享,您可以自由複製&散布&展示及演出本作品；若您改變&轉變或更改本作品,僅在遵守與本作品相同的授權條款下,您才能散布由本作品產生的衍生作品<br />
<br />
==♡SVG♡==<br />
===1.概述===<br />
*何謂SVG:可縮放向量圖形（英語：Scalable Vector Graphics,SVG）是一種基於可延伸標記式語言（XML）,用於描述二維向量圖形的圖形格式,SVG由W3C制定,是一個開放標準<br />
*點陣圖與向量圖的比較(含附檔名):<br />
*#SVG:又為向量圖,特色,放大不毛邊,https://upload.wikimedia.org/wikipedia/commons/5/53/Skull_and_crossbones.svg<br />
*#JPG:又名JEPG,失真,壓縮,http://wportfolio.wzu.edu.tw/blog/attach/995/27995/89/bf_51402_8868906_99219_2yzUdJnLy0AsZ9VdwaKNCA.jpg<br />
*#PNG:不失真,公開格式,https://s-media-cache-ak0.pinimg.com/originals/96/94/ef/9694ef6ecfd562c83e7a445ee9ee19ba.png<br />
*#GIF:可動畫,256色,https://2.bp.blogspot.com/-Ra6UuzwDGQg/WDfdq3X1GjI/AAAAAAAD0gc/MfVErIwBENYRH_DvvFsnThfYp-zVxugEgCLcB/s1600/AS000946_02.gif<br />
*SVG格式具有以下優點:<br />
*#圖檔可讀,易於修改和編輯（理論上如此,但實際上卻是因為各種不同的SVG檔編輯器而可能儲存成不易解讀的SVG檔案）<br />
*#與現有技術可以互動融合,例如,SVG技術本身的動態部分（包括時序控制和動畫）就是基於SMIL標準,另外,SVG檔案還可嵌入JavaScript（嚴格地說，應該是ECMAScript）指令碼來控制SVG物件<br />
*#SVG圖形格式可以方便的建立文字索引,從而實現基於內容的圖像搜尋<br />
*#SVG圖形格式支援多種濾鏡和特殊效果,在不改變圖像內容的前提下可以實現點陣圖格式中類似文字陰影的效果<br />
*#SVG圖形格式可以用來動態生成圖形,例如,可用SVG動態生成具有互動功能的地圖,嵌入網頁中,並顯示給終端用戶<br />
*SVG格式具有以下缺點：<br />
*#如何和已經占有重要市場份額的向量圖形格式Adobe Animate競爭的問題,事實上,Adobe Animate在Flash CC 2014版及以後的版本就都支援直接匯出SVG檔案了<br />
*#SVG的本地執行環境下的廠家支援程度<br />
*#由於原始的SVG檔是遵從XML語法,導致資料採用未壓縮的方式存放,因此相較於其他的向量圖形格式,同樣的檔案內容會比其他的檔案格式稍大,Adobe因此使用gzip壓縮開發出壓縮的SVG檔格式,附檔名為 .svgz, 但此種檔案格式除了Adobe旗下的軟體以外,未被廣泛支援使用<br />
*#舊版的SVG Viewer無法正確顯示出使用新版SVG格式的向量圖形<br />
<br />
===2.基本架構===<br />
*基本架構:SVG允許3種圖形物件類型：向量圖形,柵格圖像以及文字,圖形物件——包括PNG&JPEG這些柵格圖像——能夠被編組&設計&轉換及整合進先前的彩現物件中,文字可以在任何適用於應用程式的XML命名空間之內,從而提高SVG圖形的搜尋能力和無障礙性,SVG提供的功能集涵蓋了巢狀轉換&裁剪路徑&Alpha通道&濾鏡效果&模板物件以及可延伸性,SVG嚴格遵從XML語法,並用文字格式的描述性語言來描述圖像內容,因此是一種和圖像解析度無關的向量圖形格式,SVG可以實現動態和互動功能,在DOM模型的基礎上,SVG開發設計人員可以利用ECMAScript或者SMIL來進行時序控制或物件的操縱,SVG雖然是文字格式,但是SVG支援利用gzip壓縮演算法減少檔案尺寸,壓縮後的檔案通常用被稱為「SVGZ檔案」<br />
*基本樣式:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/arrow.svg<br />
*基本圖形:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/bearFace.svg<br />
*SVG主要支援以下幾種顯示物件：<br />
*#向量顯示物件,基本向量顯示物件包括矩形&圓&橢圓&多邊形&直線&任意曲線等<br />
*#嵌入式外部圖像,包括PNG&JPEG&SVG等<br />
*#文字物件<br />
<br />
===3.文字===<br />
*TEXT<br />
*#在「text」標籤開始與結束之間夾字,可用中英文,而使用「屬性」來規定文字的表現,所有的屬性都可以改用樣式來表達<br />
*#可用中文字形：<br />
*##屬性dx和dy基於前一個字的位置去做變化：值可為'10,20,30,40'，字的距離一個比一個更遠<br />
*##屬性x和y標示字的起點：值可為'10,20,30,40'，表示每個字的x或y座標<br />
*##屬性fill控制填入字的顏色,預設黑色<br />
*##屬性stroke控制字描框的顏色,預設 none<br />
*##屬性rotate='30'順時鐘轉30°。rotate='30,60,90,120,150,180,210'指定每個字的轉動角度<br />
*##用style控制字體&字形&尺寸,但顏色是用fill不是用color <br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/text.svg<br />
<br />
===4.位移、旋轉、縮放、歪斜===<br />
*相關屬性說明：<br />
*#平移變換(translate)：transform="translate(x,y)",即新坐標系的原點在原坐標系的(x,y)處,坐標軸的方向不變<br />
*#旋轉變換(rotate)：transform="rotate(angle cx,cy)",angle代表旋轉角度,預設單位是「度」,順時針為正,逆時針為負,(cx,cy)是旋轉中心所在的坐標,若省略旋轉中心坐標,則預設值是(0,0)<br />
*#伸縮變換(scale)：transform="scale(sx,sy)",sx,sy分別代表x軸方向和y方向拉伸或縮小的比例因子,拉伸：大於1；縮小：小於1,若省略sy，即sy=sx，作等比例縮放<br />
*#歪斜變換(skew)：transform='skewX(x-angle)'或transform='skewY(y-angle)',x-angle,y-angle分別代表沿x軸和y軸歪斜的角度<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/uses.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/transform.svg<br />
<br />
===5.群組===<br />
*步驟:<br />
*#先添加svg標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，其中才有href屬性的定義<br />
*#在defs段落中定義圖形，並賦予id<br />
*#用<use xlink:href='#某id'/>來引用既有的定義<br />
<br />
===六、定義一次，引用多次===<br />
===七、漸層===<br />
====(一)線性漸層====<br />
====(二)放射漸層====<br />
===八、柔焦濾鏡===<br />
===九、path===<br />
===十、動畫===<br />
<br />
==Inkscape==<br />
==GIS==<br />
*何謂 GIS ？<br />
*兩種主要的 GIS 。<br />
*基本框架。<br />
*marks<br />
*overlays<br />
*google 我的地圖<br />
*結合我的地圖與 GIS<br />
==圖形計算機==<br />
*取得 svgdraw.php<br />
*基本框架<br />
*繪製基本圖形<br />
*函式繪圖<br />
*google 圖形計算機</div>
蕭卉均
http://well-being-ng.net/wiki1231/index.php?title=%E8%A8%8E%E8%AB%96:%E8%B3%87%E8%A8%8A%E5%9F%BA%E7%A4%8E%E6%87%89%E7%94%A8/%E8%95%AD%E5%8D%89%E5%9D%87&diff=37882
討論:資訊基礎應用/蕭卉均
2018-01-16T09:00:45Z
<p>蕭卉均：/* 四、位移、旋轉、縮放、歪斜 */</p>
<hr />
<div>=ღ完整筆記ღ=<br />
==♡環境&工具♡==<br />
===1.環境===<br />
*伺服器與域名,伺服器DS216,網址6years.jendo.org<br />
*wifi,區網wifi：jendod&jendoa<br />
*網站空間,瀏覽器：firefox,優先於chrome,盡量不用IE<br />
*wiki上的個人頁,filezilla→開啟filezilla,並新增一個站台叫♕DS216+(共用)♕→主機設定:6years.jendo.org→協定:SFTP→使用者:共用→字碼集:UTF-8→連線,然後到♕home/www♕→建自己帳號的連線→可用的文字編輯器,如emeditor→連結filezilla&慣用的文字編輯器：♕編輯/設定/檔案編輯♕，選用♕使用自訂編輯器♕&♕總是使用預設的編輯器♕，並指定編輯器的路徑<br />
*課後重點筆記:<br />
*#table是開始,/table是結束<br />
*#IP:IP4,最多表達到255字,IPV4一般網頁使用,IP6,物聯網用<br />
*#物聯網:簡單說一切事物,得失相兼<br />
*#域名:域名伺服器(HOSTS)<br />
*#AI(人工智慧)<br />
*#big5,早期,只有繁體中文<br />
*#UTF-8,萬國碼<br />
<br />
===2.工具與設定===<br />
*firefox:Mozilla Firefox（簡稱Firefox）,中文俗稱火狐（中國大陸官方有使用但未註冊為商標）,是一個自由及開放原始碼的網頁瀏覽器,由Mozilla基金會及其子公司Mozilla公司開發<br />
*filezilla:ileZilla是一種快速&可信賴的FTP用戶端以及伺服器端開放原始碼程式,具有多種特色&直覺的介面,FileZilla在2003年11月獲選為SourceForge.net當月最佳推薦專案<br />
*EmEditor:EmEditor是江村軟體公司（Emurasoft,坐落於美國華盛頓州）所開發的一款在Windows平台上運行的文字編輯程式,EmEditor以運作輕巧&敏捷而又功能強大&豐富著稱而得到許多用戶的好評<br />
<br />
==♡HTML&HTTP♡==<br />
*發有者及發明年代:於西元1993年,W3C&WHATWG開發<br />
*HTML:超文件標示語言（英語：HyperText Markup Language,簡稱：HTML）是一種用於建立網頁的標準標示語言,HTML是一種基礎技術常與CSS&JavaScript一起被眾多網站用於設計令人賞心悅目的網頁&網頁應用程式以及行動應用程式的使用者介面<br />
*HTTP:超文本傳輸協定（英文：HyperText Transfer Protocol,縮寫：HTTP）是一種用於分佈式&協作式和超媒體資訊系統的應用層協議,HTTP是全球資訊網的資料通訊的基礎<br />
*xml:可延伸標記式語言（英語：Extensible Markup Language,簡稱：XML）是一種標記式語言,標記指電腦所能理解的資訊符號,通過此種標記,電腦之間可以處理包含各種資訊的文章等<br />
*課後筆記:<br />
*#筆記網頁建設:登入後搜尋{資訊基礎應用/蕭卉均}→點一下，開始編輯→編輯完點儲存頁面<br />
*#色碼表:https://www.toodoo.com/db/color.html<br />
*通訊錄:<br />
*<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
<table class='nicetable'><br />
<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr><br />
</table><br />
<br />
==♡ wiki ♡==<br />
*何謂wiki:Wiki是一種在全球資訊網上開放且可供多人協同創作的超文字系統,由沃德·坎寧安於1995年首先開發,沃德·坎寧安將wiki定義為「一種允許一群用戶用簡單的描述來建立和連線一組網頁的社會計算系統」<br />
*CC授權:創用CC授權條款（英語：Creative Commons license,簡稱CC授權）是一種公共版權授權條款,其允許分發受版權保護的作品,一個創用CC授權用於一個作者想給他人分享&使用&甚至創作衍生作品的權利<br />
*wiki語法:http://jendo.synology.me/wiki1231/index.php?title=Wiki_%E5%85%A5%E9%96%80%E8%AA%9E%E6%B3%95<br />
*wiki的word適應:履歷表<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E5%B1%A5%E6%AD%B7%E8%A1%A8.html<br />
==♡CSS♡==<br />
*何謂CSS:層疊樣式表（英語：Cascading Style Sheets,簡寫CSS）又稱串樣式列表&級聯樣式表&串接樣式表&層疊樣式表&階層式樣式表,一種用來為結構化文件（如HTML文件或XML應用）添加樣式（字型、間距和顏色等）的電腦語言,由W3C定義和維護,目前最新版本是CSS2.1，為W3C的推薦標準,CSS3現在已被大部分現代瀏覽器支援,而下一版的CSS4仍在開發中<br />
*用法:限制者才有標章,不限制者沒有標章<br />
*重要語法:<br />
*#Attribution(BY):姓名標示,您（使用者）可以複製&發行&展覽&表演&放映&廣播或通過資訊網路傳播本作品；您必須按照作者或者授權人指定的方式對作品進行姓名標示<br />
*#NonCommercial(NC):非商業性使用,您可以自由複製&散布&展示及演出本作品；您不得為商業目的而使用本作品<br />
*#NoDerivs(ND):禁止改作,您可以自由複製&散布&展示及演出本作品；您不得改變&轉變或更改本作品<br />
*#ShareAlike(SA):相同方式分享,您可以自由複製&散布&展示及演出本作品；若您改變&轉變或更改本作品,僅在遵守與本作品相同的授權條款下,您才能散布由本作品產生的衍生作品<br />
<br />
==♡SVG♡==<br />
===1.概述===<br />
*何謂SVG:可縮放向量圖形（英語：Scalable Vector Graphics,SVG）是一種基於可延伸標記式語言（XML）,用於描述二維向量圖形的圖形格式,SVG由W3C制定,是一個開放標準<br />
*點陣圖與向量圖的比較(含附檔名):<br />
*#SVG:又為向量圖,特色,放大不毛邊,https://upload.wikimedia.org/wikipedia/commons/5/53/Skull_and_crossbones.svg<br />
*#JPG:又名JEPG,失真,壓縮,http://wportfolio.wzu.edu.tw/blog/attach/995/27995/89/bf_51402_8868906_99219_2yzUdJnLy0AsZ9VdwaKNCA.jpg<br />
*#PNG:不失真,公開格式,https://s-media-cache-ak0.pinimg.com/originals/96/94/ef/9694ef6ecfd562c83e7a445ee9ee19ba.png<br />
*#GIF:可動畫,256色,https://2.bp.blogspot.com/-Ra6UuzwDGQg/WDfdq3X1GjI/AAAAAAAD0gc/MfVErIwBENYRH_DvvFsnThfYp-zVxugEgCLcB/s1600/AS000946_02.gif<br />
*SVG格式具有以下優點:<br />
*#圖檔可讀,易於修改和編輯（理論上如此,但實際上卻是因為各種不同的SVG檔編輯器而可能儲存成不易解讀的SVG檔案）<br />
*#與現有技術可以互動融合,例如,SVG技術本身的動態部分（包括時序控制和動畫）就是基於SMIL標準,另外,SVG檔案還可嵌入JavaScript（嚴格地說，應該是ECMAScript）指令碼來控制SVG物件<br />
*#SVG圖形格式可以方便的建立文字索引,從而實現基於內容的圖像搜尋<br />
*#SVG圖形格式支援多種濾鏡和特殊效果,在不改變圖像內容的前提下可以實現點陣圖格式中類似文字陰影的效果<br />
*#SVG圖形格式可以用來動態生成圖形,例如,可用SVG動態生成具有互動功能的地圖,嵌入網頁中,並顯示給終端用戶<br />
*SVG格式具有以下缺點：<br />
*#如何和已經占有重要市場份額的向量圖形格式Adobe Animate競爭的問題,事實上,Adobe Animate在Flash CC 2014版及以後的版本就都支援直接匯出SVG檔案了<br />
*#SVG的本地執行環境下的廠家支援程度<br />
*#由於原始的SVG檔是遵從XML語法,導致資料採用未壓縮的方式存放,因此相較於其他的向量圖形格式,同樣的檔案內容會比其他的檔案格式稍大,Adobe因此使用gzip壓縮開發出壓縮的SVG檔格式,附檔名為 .svgz, 但此種檔案格式除了Adobe旗下的軟體以外,未被廣泛支援使用<br />
*#舊版的SVG Viewer無法正確顯示出使用新版SVG格式的向量圖形<br />
<br />
===2.基本架構===<br />
*基本架構:SVG允許3種圖形物件類型：向量圖形,柵格圖像以及文字,圖形物件——包括PNG&JPEG這些柵格圖像——能夠被編組&設計&轉換及整合進先前的彩現物件中,文字可以在任何適用於應用程式的XML命名空間之內,從而提高SVG圖形的搜尋能力和無障礙性,SVG提供的功能集涵蓋了巢狀轉換&裁剪路徑&Alpha通道&濾鏡效果&模板物件以及可延伸性,SVG嚴格遵從XML語法,並用文字格式的描述性語言來描述圖像內容,因此是一種和圖像解析度無關的向量圖形格式,SVG可以實現動態和互動功能,在DOM模型的基礎上,SVG開發設計人員可以利用ECMAScript或者SMIL來進行時序控制或物件的操縱,SVG雖然是文字格式,但是SVG支援利用gzip壓縮演算法減少檔案尺寸,壓縮後的檔案通常用被稱為「SVGZ檔案」<br />
*基本樣式:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/arrow.svg<br />
*基本圖形:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/bearFace.svg<br />
*SVG主要支援以下幾種顯示物件：<br />
*#向量顯示物件,基本向量顯示物件包括矩形&圓&橢圓&多邊形&直線&任意曲線等<br />
*#嵌入式外部圖像,包括PNG&JPEG&SVG等<br />
*#文字物件<br />
<br />
===3.文字===<br />
*TEXT<br />
*#在「text」標籤開始與結束之間夾字,可用中英文,而使用「屬性」來規定文字的表現,所有的屬性都可以改用樣式來表達<br />
*#可用中文字形：<br />
*##屬性dx和dy基於前一個字的位置去做變化：值可為'10,20,30,40'，字的距離一個比一個更遠<br />
*##屬性x和y標示字的起點：值可為'10,20,30,40'，表示每個字的x或y座標<br />
*##屬性fill控制填入字的顏色,預設黑色<br />
*##屬性stroke控制字描框的顏色,預設 none<br />
*##屬性rotate='30'順時鐘轉30°。rotate='30,60,90,120,150,180,210'指定每個字的轉動角度<br />
*##用style控制字體&字形&尺寸,但顏色是用fill不是用color <br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/text.svg<br />
<br />
===4.位移、旋轉、縮放、歪斜===<br />
*相關屬性說明：<br />
*#平移變換(translate)：transform="translate(x,y)",即新坐標系的原點在原坐標系的(x,y)處,坐標軸的方向不變<br />
*#旋轉變換(rotate)：transform="rotate(angle cx,cy)",angle代表旋轉角度,預設單位是「度」,順時針為正,逆時針為負,(cx,cy)是旋轉中心所在的坐標,若省略旋轉中心坐標,則預設值是(0,0)<br />
*#伸縮變換(scale)：transform="scale(sx,sy)",sx,sy分別代表x軸方向和y方向拉伸或縮小的比例因子,拉伸：大於1；縮小：小於1,若省略sy，即sy=sx，作等比例縮放<br />
*#歪斜變換(skew)：transform='skewX(x-angle)'或transform='skewY(y-angle)',x-angle,y-angle分別代表沿x軸和y軸歪斜的角度<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/uses.svg<br />
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/transform.svg<br />
<br />
===五、群組===<br />
===六、定義一次，引用多次===<br />
===七、漸層===<br />
====(一)線性漸層====<br />
====(二)放射漸層====<br />
===八、柔焦濾鏡===<br />
===九、path===<br />
===十、動畫===<br />
<br />
==Inkscape==<br />
==GIS==<br />
*何謂 GIS ？<br />
*兩種主要的 GIS 。<br />
*基本框架。<br />
*marks<br />
*overlays<br />
*google 我的地圖<br />
*結合我的地圖與 GIS<br />
==圖形計算機==<br />
*取得 svgdraw.php<br />
*基本框架<br />
*繪製基本圖形<br />
*函式繪圖<br />
*google 圖形計算機</div>
蕭卉均