檢視 SVG 的原始碼
←
SVG
跳轉到:
導覽
、
搜尋
根據以下的原因,您並無權限去做編輯這個頁面:
您剛才的請求只有這個使用者組的使用者才能使用:
使用者
你可以檢視並複製本頁面的原始碼。
[[分類:HTML]] Scalable Vector Graphics(可縮放向量圖形) *特性 *#XML語法。 *#二維向量圖形格式。 *#由W3C制定,是開放標準。 ==轉檔== *[http://petercollingridge.appspot.com/svg-optimiser SVG 優化]:優化後,不一定能在 wiki 中正確產生縮圖。 *SVG轉點陣圖: *#inkscape:字形為細明體 *#[http://image.online-convert.com/convert-to-png 線上轉檔]:字體為中黑 *點陣圖轉 SVG 的image標籤:商業軟體 Contenta Converter PREMIUM ==範例== ===基本範例=== *[http://jendo.org/~admin/vs.php 看原始碼] *#SVG空架子:[http://jendo.org/~admin/base.svg http://jendo.org/~admin/base.svg] *#多邊形:[http://jendo.org/~admin/polygon.svg http://jendo.org/~admin/polygon.svg] *#線性漸層:[http://jendo.org/~admin/linearGradient.svg http://jendo.org/~admin/linearGradient.svg] *#放射漸層: *#*[http://jendo.org/~admin/ball.svg http://jendo.org/~admin/ball.svg] *#*[http://jendo.org/~admin/ball2.svg http://jendo.org/~admin/ball2.svg] *#*[http://jendo.org/~admin/ball3.svg http://jendo.org/~admin/ball3.svg] *#文字:[http://jendo.org/~admin/text.svg http://jendo.org/~admin/text.svg] ===在教學上應用的例子:=== #[[能源與能量#能源與能量的區別|轉動的齒輪]] #[[能源與能量#討論二:美洲人與歐亞人|山脈的走向]] #[http://upload.wikimedia.org/wikipedia/commons/3/34/Africa_road5.svg 現代智人走出非洲的可能路線] #[http://jendo.org/~丁禾/鄭氏治台/日本史.svg 日本史] #[http://jendo.org/~丁禾/鄭氏治台/明鄭.svg 鄭氏大事紀] #[https://upload.wikimedia.org/wikipedia/commons/c/c0/Animal_cell_structure_zhtw.svg 動物細胞] ==語法== *[http://www.w3schools.com/svg/ 英文自主練習站] *[http://www.w3cschool.cc/svg/ 簡體中文自主練習站] *viewport 與 viewbox *#[http://www.oxxostudio.tw/articles/201409/svg-23-viewpoint-viewBox.html 解說] *#[http://msdn.microsoft.com/zh-tw/library/gg589508%28v=vs.85%29.aspx 縮放和移動瀏覽] *如同 HTML 和 CSS 大多數標籤與屬性不分大小寫。但 path 中的命令會分大小寫。 *在代表屬性值的引號中空白和逗點等價。 ===宣告圖檔=== <nowiki><</nowiki>?xml version='1.0' encoding='UTF-8' standalone='no'?> ===標籤=== ====svg==== svg(成對):svg 開始及結束。屬性有:xmlns(如http://www.w3.org/2000/svg),version(如1.1),width,height ====定義 defs==== defs(成對)顧名思義就是「definitions」,即「定義」的意思。我們可以把許多重複性質高的元素,放入 defs 元素內,讓它變成一個可以重複利用的物件。 *基本規則:在 defs 中給被定義者一個 id 如 id='某某' ,然後在 defs 外引用這個定義,如 #某某。如果 id 指涉的是一個圖形物體,引用時用「xlink:href=…」;如果 id 指涉的是一個定義區間,其中還包含若干個定義標籤,引用時用「url(#某某)」。 *可用的定義標籤包含: *#圖形物件或群組 *#*定義時對圖形物件或群組用 <g id='某某' … > *#*引用時用 <use xlink:href='#某某' 修飾屬性 /> *#*引用的圖形或群組可與定義時略有不同,不同處用屬性值替換掉定義時的屬性。 *#文字路徑 *#*定義時用 <path id='某某' … >,注意只有 path 有效,其他圖形無效。 *#*引用時用 <text><textPath xlink:href='#某某'>隨著路徑跑的文字字串 </textPath></text> *#漸層色 *#*定義時用 linearGradient 、 radialGradient *#*引用時用屬性 fill='url(#某某)' *#剪裁 *#*定義時用 <clipPath id='某某'><封閉圖形如圓、矩形/></clipPath> *#*引用時用 <另一圖形 clip-path='url(#某某)'/> *#*clipping 裏頭還可以套用 clipping,就可以做出許多不同的形狀變化。 *#遮色片:而遮色片只有黑到白的灰階分布,所以如果作為遮色片的顏色是灰階以外的顏色,都會被轉換為灰階。越黑越透明,越白越不透明。 *#*定義時用 <mask id='某某'><一或多個封閉圖形如圓、矩形/></mask> *#*引用時用 <另一圖形 mask='url(#某某)'/> *#線段節點 marker *#*定義時用<br/><marker id='某1'><一個封閉圖形如圓、矩形/></marker><br/><marker id='某2'><一個封閉圖形如圓、矩形/></marker><br/><marker id='某3'><一個封閉圖形如圓、矩形/></marker> *#*引用時用 <polyline points=… marker-end='url(#某1)' marker-start='url(#某2)' marker-mid='url(#某3)'/> *#濾鏡 filter 略 *#*定義時用 <filter id='某某'><某濾鏡標籤及其屬性/></filter> *#*引用時用 <圖形 filter='url(#某某)'/> ====向量圖形標籤==== *共同約定: *#開始與結束合一。 *#長度如省略單位,預設單位為 px。 *#px可以使用小數點。 *#以左上為座標原點。 *#座標描述先 x 後 y 。 *#stlye屬性中關於線條之樣式,也可以作為繪圖: *#*stroke (線條顏色), *#*stroke-width (線條寬度), *#*stroke-opacity (線條顏色的透明度,合法的範圍是:0 - 1,0最透明,預設1), *#*stroke-linecap (線條端點形狀,預設butt端點切齊、round以端點為圓心線寬為直徑畫圓、square以端點為中心線寬為邊長畫方形), *#*stroke-linejoin (線條轉彎處樣式,預設miter尖角、round圓角、bevel斜角), *#*stroke-miterlimit (尖角內外距/線寬的最大值,不設限則尖角可以拉長至無限長,預設為 4 倍), *#*stroke-dasharray (預設none,代表實線。若為數字其值為一陣列,陣列值為線段中實線段長度與虛線段長度的交錯數字,通常是兩個數字一組,如果是奇數,則最後面自動加補第一個數字) *#stlye屬性中關於面之樣式: *#*fill (填充顏色), *#*fill-opacity (填充不透明,合法的範圍是:0 - 1,0最透明,預設1)。 *#*fill-rule (polygon等標籤有時會將內部分割成不同的區域,填色方式,預設nonzero全部同色、evenodd相鄰區域內部填色與外部填色交互填充、inherit繼承) *#選擇器 class,id 同 CSS 。 常見的簡易繪圖標籤: #line(直線),屬性有x1(第一點x座標)y1(第一點y座標)x2(第二點x座標)y2(第一點y座標)。 #polyline(多點成線),諸屬性如下: #*points:多點,點與點用空白間開,同一點 x y 座標以逗點間開。 #polygon(多邊形),也可以取五點畫出一個星形。諸屬性如下: #*points:多點,點與點用空白間開,同一點 x y 座標以逗點間開。 #circle(圓),諸屬性如下: #*cx(圓心x座標),cy(圓心y座標),r(半徑) #rect(矩形),諸屬性如下: #*width(寬),height(高),省略起點則以原點為起點,x(起點x座標),y(起點y座標),rx(圓角x半徑),ry(圓角y半徑) #ellipse(楕圓),諸屬性如下: #*cx(中心x座標),cy(中心x座標),rx(x軸半長),ry(y軸半長)。 ====path==== *[http://www.oxxostudio.tw/articles/201406/svg-04-path-1.html 語法說明] *參數大寫代表絕對座標,小寫代表與前一個座標的相對座標 *點與點之間、同點的 x , y 座標之間,用空白間開或用,間開兩者是等價的。 <table class=nicetable> <tr> <th style="width:10%; background:#ddd;">指令</th> <th style="width:20%; background:#ddd;">參數</th> <th style="width:70%; background:#ddd;">指令說明</th> </tr> <tr> <td>M(move to)</td> <td>x y</td> <td>起始點的 x , y 座標</td> </tr> <tr> <td>L(line to)</td> <td>x y</td> <td>從目前點的座標畫直線到指定點的 x , y 座標</td> </tr> <tr> <td>H(horizontal line to)</td> <td>x</td> <td>從目前點的座標畫水平直線到指定的 x 軸座標</td> </tr> <tr> <td>V(vertical line to)</td> <td>y</td> <td>從目前點的座標畫垂直線到指定的 y 軸座標</td> </tr> <tr> <td>C(curve)</td> <td>x1 y1 x2 y2 x y<br/>[[file:SvgPathC.png|200px]]</td> <td>從目前點的座標畫條三次貝茲曲線到指定點的 x, y 座標:其中 x1, y1 及 x2, y2 為控制點</td> </tr> <tr> <td>S(smooth curve)</td> <td>x2 y2 x y<br/>[[file:SvgPathS.png|200px]]</td> <td>在目前點之前必須有一個貝茲控制點,在目前點之後會以同樣的斜率鏡射一個貝茲控制點,再由參數(x2,y2)補上第二個貝茲控制點,再從目前點經兩個貝茲控制點畫貝茲曲線到指定點(x,y)。如:<path d='M0 0 C40 40,60 40,100,0 S150 -40, 200 0' stroke='black' fill='none'/></td> </tr> <tr> <td>Q(quadratic Bézier curve)</td> <td>x1 y1 x y<br/>[[file:SvgPathQ.png|200px]]</td> <td>從目前點的座標畫條二次貝茲曲線到指定點的 x, y 座標:其中 x1, y1 為控制點</td> </tr> <tr> <td>T(smooth quadratic Bézier curve)</td> <td>x y<br/>[[file:SvgPathT.png|200px]]</td> <td>前方要接上 Q 才能畫,從目前點以前一個 Q 的控制點之鏡射點為控制點,畫二次貝茲曲線到指定點(x,y)。</td> </tr> <tr> <td>A(Arc)</td> <td>rx ry x-axis-rotation large-arc-flag sweep-flag x y</td> <td>從目前點的座標畫個橢圓形到指定點的 x, y 座標:其中 rx, ry 為橢圓形的 x 軸及 y 軸的半徑,x-axis-rotation 是弧線與 x 軸的旋轉角度,large-arc-flag 則設定 1 最大角度的弧線或是 0 最小角度的弧線,sweep-flag 設定方向為 1 順時針方向或 0 逆時針方向</td> </tr> <tr> <td>Z(closepath)</td> <td></td> <td>關閉路徑,將目前點的座標與第一個點的座標連接起來</td> </tr> </table> ====文字==== *text開始與結束之間夾字,可用中英文。 *可用中文字形: *#Monospace:等寬字型(非調和字) *#Sans:無襯線體(黑體,哥德體) *#Serif:襯線體(筆畫末端的裝飾細節,白體,羅馬體) *#KaiTi:楷體 *#MingLiU:明體 *#PMingLiU:明體 *#MingLiU_HKSCS:明體 *#FangSong:仿宋 *#NSimSun:新宋 *#SimHei:新黑 *#Microsoft YaHei:微軟雅黑體 *#Microsoft JhengHei:微軟正黑體 *#Arial Unicode MS:微軟 Arial 體 *#DFBiaoKaiShu-B5:華康楷書體 *#DFHKStdKai-B5:華康標楷體 *#DFHKStdSong-B5:華康標宋體 *#DFBiaoSong-B5:華康宋體 *#DFHeiUBlod-B5:華康特粗黑體 *#DFHeiBlod-B5:華康粗黑體 *#DFHeiMedium-B5:華康中黑體 *#DFHeiLight-B5:華康細黑體 *#DFBiaoKaiShu-B5:華康楷書體 *#…:華康眾字體,族繁不及備載 *#Segoe UI:微軟 Segoe UI 字形 *#Tahoma:微軟 Tahoma 字形 *#Meiruo:日文明瞭體 *#Meiruo UI:日文明瞭體 *#MS Gothic:微軟日文哥德體 *#MS Mincho:微軟日文明朝體 *#MS PGothic:微軟日文哥德體 *#MS PMincho:微軟日文明朝體 *#MS UI Gothic:微軟日文哥德體 *#MS Mincho:微軟日文明朝體 *屬性 x 和 y 標示字的起點 *用 style 控制字體、字形、尺寸,但顏色是用 fill 不是用 color 。 ====嵌入圖照==== *image,屬性有x(第一點x座標)y(第一點y座標)width(寬)height(高)。 *屬性 xlink:href="data:image/png;base64,圖照編碼" 或 xlink:href="圖照檔名" ,但<SVG> 須額外加屬性 xmlns:xlink='http://www.w3.org/1999/xlink' 。 ====嵌入外來==== #foreignobject 開始與結束之間夾<body xmlns="http://www.w3.org/1999/xhtml">…</body>,body 中再夾如 table 等 HTML code 。 #*屬性有:x嵌入物x座標,y嵌入物y座標,width嵌入物寬,height嵌入物高。 ====濾鏡==== [[file:LensFilter-001.jpg|thumb|300px|right|濾鏡是放在鏡頭前的透明體]] 濾鏡有多種,以下介紹最簡的高斯模糊。其他還有圖像混合濾鏡、顏色濾鏡…等 19 種濾鏡。 #圖形標籤中放 filter='url(#濾鏡名)' 屬性,以濾鏡處理圖形 #定義標籤 defs #*defs 標籤是 definitions 的縮寫,它的內部放諸如濾鏡、漸層等特殊元素的定義。 #*filter 標籤(濾鏡標籤)必須放在 defs 內部。 #濾鏡標籤 filter #*其中的 id 屬性定出濾鏡名稱 #*也可以設 width,height,x,y 去定濾鏡範圍和起點,如沒設以整個圖形為範圍。 #高斯模糊濾鏡 feGaussianBlur ,濾鏡標籤包住數種不同效果的濾鏡,高斯模糊濾鏡是最簡單的濾鏡。 #*高斯模糊濾鏡主要只有一個參數:stdDeviation(標準差),用來控制模糊的程度,數字越大越模糊,數字為零則是圖片原本的狀態。 ====漸層==== 分為線性漸層和放射漸層兩種 #圖形標籤中放 fill='url(#漸層名)' 屬性,填入漸層色 #定義標籤 defs #*defs 標籤是 definitions 的縮寫,它的內部放諸如漸層等特殊元素的定義。 #*linearGradient 標籤和 radialGradient 標籤必須放在 defs 內部。 #漸層標籤,漸層標籤中的 100%,指的是整個圖形 #*linearGradient 線性漸層定義標籤 #*#其中的 id 屬性定出漸層名稱 #*#由 x1,y1,x2,y2 四個屬性決定漸層範圍,以及水平,垂直或角形漸層,四個屬性都以百分比表示: #*#*當 y1 和 y2 相等,而 x1 和 x2 不同時,可創建水平漸層 #*#*當 x1 和 x2 相等,而 y1 和 y2 不同時,可創建垂直漸層 #*#*當 x1 和 x2 不同,且 y1 和 y2 不同時,可創建角形漸層 #*#* x1,y1,x2,y2 屬性決定漸層開始和結束位置, x1,x 2以圖形的寬度為準, y1,y2 以圖形的高度為準 #*radialGradient 放射漸層定義標籤 #*#其中的 id 屬性定出漸層名稱 #*#由 cx,cy,r 三個屬性決定漸層範圍,三個屬性都以百分比表示,漸層範圍是一個圓或橢圓 #*#*cx 表示範圍中心在圖寬百分之幾的位置 #*#*cy 表示範圍中心在圖高百分之幾的位置 #*#*r 如果圖形寬、高相等則範圍為圓,r代表範圍圓半俓除以圖形寬或高;如果圖形寬、高不相等則範圍為橢圓,r代表範圍橢圓的長短軸半長除以圖形寬或高;注意:r為50%,範圍圓直徑恰等於圖的寬或高。 #*#由 fx,fy 兩個屬性決定設色中心的位置,就是設色為 0% 的地方,兩個屬性都以百分比表示 #*#*fx表示設色中心在圖寬百分之幾的位置 #*#*fy表示設色中心在圖高百分之幾的位置 #*#*設色 100% 的地方在範圍圓或範圍橢圓的圓周上 #*#以 [http://jendo.org/~admin/ball3.svg http://jendo.org/~admin/ball3.svg] 為例:漸層範圍為整個圓,因為 cx,cy,r 都是 50% ,而設色中心在中間下方,因為 fx='50%' fy='100%' ,此處是 stop 設為 0% 的顏色(白色),而範圍圓週邊是 stop 設為 100% 的顏色(黑色) #設色標籤 stop,漸層標籤包住數個 stop 標籤,每種顏色通過一個 stop 標籤來規定。 #*offset屬性用來定義漸層的開始和結束位置,其 100% 是指整個漸層範圍。 #*stop-color 屬性用來定義顏色,也可以做為 style 的樣式。 #*stop-opacity 屬性決定透明度,也可以做為 style 的樣式。 ====transform 坐標變換方式==== *代碼:<g transform="..."> <!--other elements> ...</g> #平移變換(translate):transform="translate(x,y)",即新坐標系的原點在原坐標系的(x,y)處。坐標軸的方向不變。 #旋轉變換(rotate):transform="rotate(angle cx,cy)"。angle代表旋轉角度,缺省單位是「度」,順時針為正,逆時針為負。(cx,cy)是旋轉中心所在的坐標。若省略旋轉中心坐標,則缺省值是(0,0)。 #伸縮變換(scale):transform="scale(sx,sy)",sx,sy分別代表x軸方向和y方向拉伸或縮小的比例因子。拉伸:大於1;縮小:小於1。若省略sy,即sy=sx,作等比例縮放。 #歪斜變換(skew):transform="skewX(x-angle)"或transform="skewY(y-angle)",x-angle,y-angle分別代表沿x軸和y軸歪斜的角度。 #混合變換:如 transform="translate(x,y) rotate(angle)" 先位移再旋轉。 #矩陣變換(matrix):transform="matrix(a b c d e f)",這裡的六個參數分別是變換矩陣中的六個參數。特點是靈活性大,無論多麼複雜的變換,只需進行一次矩陣運算即可。其中 #*translate:matrix(1 0 0 1 tx ty),tx,ty分別為x方向與y方向的位移 #*scale:matrix(sx 0 0 sy 0 0),sx,sy分別為x方向與y方向的放大率 #*rotate:matrix(cos(a) sin(a) -sin(a) cos(a) 0 0), #*skewX:matrix(1 0 tan(a) 1 0 0);skewY:matrix(1 tan(a) 0 1 0 0) *[http://www.w3cplus.com/html5/svg-transformations.html transform屬性說明] ====動畫(animate)==== animate 標籤 *將圖形分拆成開始和結束兩標籤,中間插入 animate 標籤。以下為諸屬性: *#begin='幾s':幾秒開始跑,通常設為 0s 。 *#dur='幾s':跑一輪要幾秒,可以設為 indefinite 。 *#repeatCount='幾':要跑幾輪,indefinite代表無限多輪,預設值為1。 *#attributeName屬性之值:指出包覆的圖形元素,其中一個屬性,而 from 和 to 就是這個屬性的值將由多少變到多少。 ====動畫(animateTransform)==== animateTransform 標籤 *將圖形分拆成開始和結束兩標籤,中間插入 animateTransform 標籤。以下為諸屬性: *#attributeName='transform':表示要跑動畫,一定要加。 *#begin='幾s':幾秒開始跑,通常設為 0s 。 *#dur='幾s':跑一輪要幾秒,可以設為 indefinite 。 *#repeatCount='幾':要跑幾輪,indefinite代表無限多輪,預設值為1。 *#type屬性之值: *#*rotate旋轉,影響屬性from='起始角度,旋轉軸心x座標,旋轉軸心y座標'、to='結束角度,旋轉軸心x座標,旋轉軸心y座標'。 *#*scale縮放,影響屬性from='x起始倍率,y起始倍率'、to='x結束倍率,y結束倍率',倍率是自左上原點開始算,如果同組x,y倍率相同,可以只寫一個值。 *#*translate平移,影響屬性from='起始原點x座標,起始原點y座標'、to='結束原點x座標,結束原點y座標'。 *#*skewX X軸不動,X軸下方向右歪斜,影響屬性from='起始歪斜角度'、to='結束歪斜角度' *#*skewY Y軸不動,Y軸右方向下歪斜,影響屬性from='起始歪斜角度'、to='結束歪斜角度' ====動畫(animateMotion)==== animateMotion 標籤 *將圖形分拆成開始和結束兩標籤,中間插入 animateMotion 標籤。以下為諸屬性: *#begin='幾s':幾秒開始跑,通常設為 0s 。 *#dur='幾s':跑一輪要幾秒,可以設為 indefinite 。 *#repeatCount='幾':要跑幾輪,indefinite代表無限多輪,預設值為1。 *#path 屬性為移動路徑:由 m 開始 *#rotate="auto" 圖形隨路徑曲度而轉折。 ====動畫參考連結==== *[http://www.waylau.com/svg-animation/ 簡明清楚] *[http://msdn.microsoft.com/zh-tw/library/gg193979(v=vs.85).aspx 基本 SVG 動畫] *[http://www.zhangxinxu.com/wordpress/2014/08/so-powerful-svg-smil-animation/ 簡中說明,範例不錯] *[http://www.oxxostudio.tw/articles/201409/svg-21-smil-animation.html 繁中說明] *[http://www.oxxostudio.tw/articles/201409/svg-22-smil-animation-2.html 前一篇的進階說明] *[http://samples.msdn.microsoft.com/workshop/samples/svg/svgAnimation/basic/05twoGears.html javascript 操作範例] ====字形使用參考連結==== *[https://www.google.com/fonts google web font 總覽] *[http://www.gtwang.org/2014/01/web-font-css-font-face.html 自製中文網頁字形,並內崁至網頁中] *[http://www.webhek.com/web-font-chinese 網路字形的中文用法(一)] *[http://www.webhek.com/svg/ SVG的用法(重要)] *[http://www.techbang.com/posts/1516-o-column-css-3-impact-of-the-new-look-of-the-page-font-posts CSS3規範中的網路字形] ====其他==== ==參考文章== *SVG 研究之路 *#[http://www.oxxostudio.tw/articles/201406/svg-01-intro.html 初探SVG] *#[http://www.oxxostudio.tw/articles/201406/svg-02-layer.html Layer] *#[http://www.oxxostudio.tw/articles/201406/svg-03-basic-shapes.html 基本形狀] *#[http://www.oxxostudio.tw/articles/201406/svg-04-path-1.html Path 基礎篇] *#[http://www.oxxostudio.tw/articles/201406/svg-05-path-2.html Path 進階篇] *#[http://www.oxxostudio.tw/articles/201406/svg-06-stroke.html stroke 邊框] *#[http://www.oxxostudio.tw/articles/201406/svg-07-fill.html fill 填色 ] *#[http://www.oxxostudio.tw/articles/201406/svg-08-text.html text 文字] *#[http://www.oxxostudio.tw/articles/201406/svg-09-clipping-masking.html Clipping and Masking] *#[http://www.oxxostudio.tw/articles/201406/svg-10-filter-1.html 初探 filter] *#[http://www.oxxostudio.tw/articles/201406/svg-11-filter-feColorMatrix.html filter:feColorMatrix] *#[http://www.oxxostudio.tw/articles/201406/svg-12-pie-chart.html pie chart 圓餅圖實作] *#[http://www.oxxostudio.tw/articles/201406/svg-13-filter-feGaussianBlur.html filter - feGaussianBlur] *#[http://www.oxxostudio.tw/articles/201406/svg-14-control-SVG.html 控制 SVG 的注意事項] *#[http://www.oxxostudio.tw/articles/201407/svg-15-filter-feComponentTransfer.html filter - feComponentTransfer] *#[http://www.oxxostudio.tw/articles/201409/svg-16-storke-miterlimit.html Stroke-miterlimit] *#[http://www.oxxostudio.tw/articles/201409/svg-17-storke-marker.html Stroke-marker] *#[http://www.oxxostudio.tw/articles/201409/svg-18-defs.html 再談 defs] *#[http://www.oxxostudio.tw/articles/201409/svg-19-transform.html transform 基礎篇] *#[http://www.oxxostudio.tw/articles/201409/svg-20-transform-matrix.html transform Matrix] *#[http://www.oxxostudio.tw/articles/201409/svg-21-smil-animation.html 初探 SMIL Animation] *#[http://www.oxxostudio.tw/articles/201409/svg-22-smil-animation-2.html 深入理解 SMIL Animation] *#[http://www.oxxostudio.tw/articles/201409/svg-23-viewpoint-viewBox.html 理解 viewport 與 viewbox] *#[http://www.oxxostudio.tw/articles/201409/svg-24-jquery-pie-chart.html 寫 jquery 產生圓餅圖 ] *#[http://www.oxxostudio.tw/articles/201409/svg-25-gradients-patterns.html 再談漸層填色] *#[http://www.oxxostudio.tw/articles/201409/svg-26-patterns.html 有趣的 Patterns] *#[http://www.oxxostudio.tw/articles/201410/svg-27-filter-feImage.html filter - feImage] *#[http://www.oxxostudio.tw/articles/201410/svg-28-filter-feDisplacementMap.html filter - feDisplacementMap] *#[http://www.oxxostudio.tw/articles/201410/svg-29-filter-water-ripple.html filter - 水波效果] *#[http://www.oxxostudio.tw/articles/201410/svg-30-filter-feConvolveMatrix.html filter - feConvolveMatrix] *SVG 31 天學習計畫,其中 Day 23 進度條不在上段中 *#基本介紹: *#*[http://www.oxxostudio.tw/articles/201406/svg-01-intro.html Day1 - 初探 SVG] *#*[http://www.oxxostudio.tw/articles/201406/svg-02-layer.html Day2 - SVG Layer] *#*[http://www.oxxostudio.tw/articles/201406/svg-03-basic-shapes.html Day3 - SVG 基本形狀] *#*[http://www.oxxostudio.tw/articles/201406/svg-04-path-1.html Day4 - SVG Path 基礎篇] *#*[http://www.oxxostudio.tw/articles/201406/svg-05-path-2.html Day5 - SVG Path 進階篇] *#*[http://www.oxxostudio.tw/articles/201406/svg-06-stroke.html Day6 - SVG stroke 邊框] *#*[http://www.oxxostudio.tw/articles/201409/svg-16-storke-miterlimit.html Day7 - SVG Stroke-miterlimit] *#*[http://www.oxxostudio.tw/articles/201409/svg-17-storke-marker.html Day8 - SVG Stroke-marker] *#深入理解: *#*[http://www.oxxostudio.tw/articles/201409/svg-23-viewpoint-viewBox.html Day9 - 理解 SVG viewport 與 viewbox] *#*[http://www.oxxostudio.tw/articles/201406/svg-07-fill.html Day10 - SVG fill 填色] *#*[http://www.oxxostudio.tw/articles/201409/svg-25-gradients-patterns.html Day11 - 再談 SVG 漸層色] *#*[http://www.oxxostudio.tw/articles/201409/svg-26-patterns.html Day12 - 有趣的 SVG Patterns] *#*[http://www.oxxostudio.tw/articles/201406/svg-08-text.html Day13 - SVG text 文字] *#*[http://www.oxxostudio.tw/articles/201406/svg-09-clipping-masking.html Day14 - SVG Clipping and Masking] *#*[http://www.oxxostudio.tw/articles/201409/svg-18-defs.html Day15 - 再談 SVG defs] *#*[http://www.oxxostudio.tw/articles/201409/svg-19-transform.html Day16 - SVG transform 基礎篇] *#*[http://www.oxxostudio.tw/articles/201409/svg-20-transform-matrix.html Day17 - SVG transform Matrix] *#*[http://www.oxxostudio.tw/articles/201409/svg-21-smil-animation.html Day18 - 初探 SVG SMIL Animation] *#*[http://www.oxxostudio.tw/articles/201409/svg-22-smil-animation-2.html Day19 - 深入理解 SVG SMIL Animation] *#應用: *#*[http://www.oxxostudio.tw/articles/201406/svg-12-pie-chart.html Day20 - SVG pie chart 圓餅圖實作] *#*[http://www.oxxostudio.tw/articles/201406/svg-14-control-SVG.html Day21 - 控制 SVG 的小小注意事項] *#*[http://www.oxxostudio.tw/articles/201409/svg-24-jquery-pie-chart.html Day22 - 寫 jquery 產生 SVG 圓餅圖] *#*[http://www.oxxostudio.tw/articles/201407/svg-progress-bar.html Day23 - SVG + CSS 製作 Material Design 進度條] *#更多應用: *#*[http://www.oxxostudio.tw/articles/201406/svg-10-filter-1.html Day24 - 初探 SVG filter] *#*[http://www.oxxostudio.tw/articles/201406/svg-11-filter-feColorMatrix.html Day25 - SVG filter - feColorMatrix] *#*[http://www.oxxostudio.tw/articles/201406/svg-13-filter-feGaussianBlur.html Day26 - SVG filter - feGaussianBlur] *#*[http://www.oxxostudio.tw/articles/201407/svg-15-filter-feComponentTransfer.html Day27 - SVG filter - feComponentTransfer] *#*[http://www.oxxostudio.tw/articles/201410/svg-27-filter-feImage.html Day28 - SVG filter - feImage] *#*[http://www.oxxostudio.tw/articles/201410/svg-28-filter-feDisplacementMap.html Day29 - SVG filter - feDisplacementMap] *#*[http://www.oxxostudio.tw/articles/201410/svg-29-filter-water-ripple.html Day30 - SVG filter - feDisplacementMap 水波動畫] *#*[http://www.oxxostudio.tw/articles/201410/svg-30-filter-feConvolveMatrix.html Day31 - SVG filter - feConvolveMatrix] *國際上重要的技術文件 *#教學與介紹: *#*[http://www.w3.org/TR/SVG/ W3C SVG:制定 SVG 標準的說明文件一定要閱讀] *#*[http://www.w3.org/TR/SVG/filters.html W3C SVG filter:SVG filter 所有屬性說明] *#*[http://srufaculty.sru.edu/david.dailey/svg/SVGOpen2010/Filters2.htm Filter Effects in SVG:很豐富的 SVG filter 範例介紹] *#*[https://docs.webplatform.org/wiki/svg docs.webplatform.org:國外很豐富的 SVG 基礎介紹] *#*[https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial MDN SVG Tutorial:初學者必來的 MDN SVG 基礎教學] *#*[http://tutorials.jenkov.com/svg/index.html jenkov SVG Tutorial:同樣是初學者必備的 SVG 完整基礎教學] *#*[http://zvon.org/comp/r/ref-SVG_1_1_Full.html#Attributes~viewBox SVG 1.1 Full Reference:滿豐富的 SVG 範例參考] *#*[http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html An SVG Primer for Today's Browsers] *#SVG 工具與框架: *#*[http://svg-edit.googlecode.com/svn/branches/2.6/editor/svg-editor.html svg editor:好用的線上繪製 SVG 工具] *#*[http://d3js.org/ D3.js:最強大的繪製 SVG 視覺圖表 JS 框架] *#*[http://c3js.org/ C3.js:第二強大的繪製 SVG 視覺圖表 JS 框架] *#*[http://snapsvg.io/ snap.svg:最強大的操作 SVG 動畫 JS 框架]
此頁面包含以下模板:
SVG/path
(
檢視原始碼
)
返回到
SVG
。
導航
個人工具
登入
名字空間
頁面
討論
變換
檢視
閱讀
檢視原始碼
檢視歷史
動作
搜尋
導覽
首頁
近期變動
隨機頁面
使用說明
工具箱
連入頁面
相關頁面修訂記錄
特殊頁面
頁面資訊