SVG：修訂版本之間的差異
出自六年制學程
（→transform 坐標變換方式） |
（→語法） |
||
| 第 14 行： | 第 14 行： | ||
*[http://www.w3schools.com/svg/ 英文自主練習站] | *[http://www.w3schools.com/svg/ 英文自主練習站] | ||
*[http://www.w3cschool.cc/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 中的命令會分大小寫。 | *如同 HTML 和 CSS 大多數標籤與屬性不分大小寫。但 path 中的命令會分大小寫。 | ||
| + | *在引號中空白和逗點等價。 | ||
===宣告圖檔=== | ===宣告圖檔=== | ||
<nowiki><</nowiki>?xml version='1.0' encoding='UTF-8' standalone='no'?> | <nowiki><</nowiki>?xml version='1.0' encoding='UTF-8' standalone='no'?> | ||
2015年1月15日 (四) 23:39的修訂版本
Scalable Vector Graphics(可縮放向量圖形)
- 特性
- XML語法。
- 二維向量圖形格式。
- 由W3C制定，是開放標準。
目錄
轉檔
- SVG轉點陣圖：
- inkscape：字形為細明體
- 線上轉檔：字體為中黑
- 點陣圖轉 SVG 的image標籤：商業軟體 Contenta Converter PREMIUM
語法
宣告圖檔
<?xml version='1.0' encoding='UTF-8' standalone='no'?>
標籤
- svg(成對)：svg 開始及結束。屬性有：xmlns(如http://www.w3.org/2000/svg)，version(如1.1)，width，height
向量圖形標籤
- 共同約定：
- 開始與結束合一。
- 長度如省略單位，預設單位為 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
- 語法說明
- 參數大寫代表絕對座標，小寫代表與前一個座標的相對座標
- 點與點之間、同點的 x , y 座標之間，用空白間開或用,間開兩者是等價的。
| 指令 | 參數 | 指令說明 |
|---|---|---|
| M(move to) | x y | 起始點的 x , y 座標 |
| L(line to) | x y | 從目前點的座標畫直線到指定點的 x , y 座標 |
| H(horizontal line to) | x | 從目前點的座標畫水平直線到指定的 x 軸座標 |
| V(vertical line to) | y | 從目前點的座標畫垂直線到指定的 y 軸座標 |
| C(curve) | x1 y1 x2 y2 x y |
從目前點的座標畫條三次貝茲曲線到指定點的 x, y 座標：其中 x1, y1 及 x2, y2 為控制點 |
| S(smooth curve) | x2 y2 x y |
在目前點之前必須有一個貝茲控制點，在目前點之後會以同樣的斜率鏡射一個貝茲控制點，再由參數(x2,y2)補上第二個貝茲控制點，再從目前點經兩個貝茲控制點畫貝茲曲線到指定點(x,y)。如：<path d='M0 0 C40 40,60 40,100,0 S150 -40, 200 0' stroke='black' fill='none'/> |
| Q(quadratic Bézier curve) | x1 y1 x y |
從目前點的座標畫條二次貝茲曲線到指定點的 x, y 座標：其中 x1, y1 為控制點 |
| T(smooth quadratic Bézier curve) | x y |
前方要接上 Q 才能畫，從目前點以前一個 Q 的控制點之鏡射點為控制點，畫二次貝茲曲線到指定點(x,y)。 |
| A(Arc) | rx ry x-axis-rotation large-arc-flag sweep-flag x y | 從目前點的座標畫個橢圓形到指定點的 x, y 座標：其中 rx, ry 為橢圓形的 x 軸及 y 軸的半徑，x-axis-rotation 是弧線與 x 軸的旋轉角度，large-arc-flag 則設定 1 最大角度的弧線或是 0 最小角度的弧線，sweep-flag 設定方向為 1 順時針方向或 0 逆時針方向 |
| Z(closepath) | 關閉路徑，將目前點的座標與第一個點的座標連接起來 |
文字
- text開始與結束之間夾字，可用中英文。
- 屬性 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嵌入物高。
濾鏡
線性漸層
- 圖形中放 fill='url(#漸層名)' 屬性
linearGradient 標籤
- 其中的 id 屬性定出漸層名稱
- 由 x1,y1,x2,y2 四個屬性決定水平，垂直或角漸變：
- 當y1和y2相等，而x1和x2不同時，可創建水平漸變
- 當x1和x2相等，而y1和y2不同時，可創建垂直漸變
- 當x1和x2不同，且y1和y2不同時，可創建角形漸變
- x1，x2，y1，y2屬性定義漸變開始和結束位置
- linearGradient 標籤包住數個 stop 標籤，每種顏色通過一個 stop 標籤來規定。
stop 標籤
- offset屬性用來定義漸變的開始和結束位置。
- stop-color 屬性用來定義顏色，也可以做為 style 的樣式。
- stop-opacity 屬性決定透明度，也可以做為 style 的樣式。
defs 標籤
- 整組 linearGradient標籤必須嵌套在 defs 內部。defs 標籤是 definitions 的縮寫，它可對諸如漸層等特殊元素進行定義。
放射漸層
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軸歪斜的角度。
- 矩陣變換(matrix)：transform="matrix(a b c d e f)"，這裡的六個參數分別是變換矩陣中的六個參數。特點是靈活性大，無論多麼複雜的變換，只需進行一次矩陣運算即可。
動畫(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" 圖形隨路徑曲度而轉折。
