六年制學程/02/2014.10.22

出自六年制學程
跳轉到： 導覽、 搜尋

大棟山

線上網頁製作

SVG範例講解

應用範例

今天的練習檔在班上伺服器 6year/htmlDemo 中，請下載到客戶端，修改後再上傳到每位同學的個人資料夾

  • svgExample.html
  • circle.svg
  • Red_circle.svg
  • Red_square.svg
  • Red_triangle_with_thick_white_border.svg

作業

  • 正三角形
  • 圓
  • x軸,y軸十字

Scalable Vector Graphics(可縮放向量圖形)

  • 特性
    1. XML語法。
    2. 二維向量圖形格式。
    3. 由W3C制定，是開放標準。
  • 與 HTML 相較
    1. 標籤、屬性、樣式 三級結構不變。
    2. 合體標籤語法不變。
  • 標籤：
    1. 動畫標籤：animate, animateColor, animateMotion, animateTransform, set；
    2. 解釋標籤：desc, metadata, title；
    3. 圖形標籤：circle, ellipse, line, path, polygon, polyline, rect；
    4. 結構標籤：defs, g, svg, symbol, use；
    5. 漸層標籤：linearGradient, radialGradient；
    6. 其他標籤：a,altGlyphDef,clipPath,color-profile,cursor,filter,font,font-face, foreignObject, image, marker, mask, pattern, script, style, switch, text, view等。

轉檔

範例

基本範例

在教學上應用的例子：

  1. 轉動的齒輪
  2. 山脈的走向
  3. 現代智人走出非洲的可能路線
  4. 日本史
  5. 鄭氏大事紀
  6. 動物細胞

語法

宣告圖檔

<?xml version='1.0' encoding='UTF-8' standalone='no'?>

標籤

svg

svg(成對)：svg 開始及結束。屬性有：xmlns(如http://www.w3.org/2000/svg)，version(如1.1)，width，height

如果後面有用到「xlink:href=…」，如 use,image，則 SVG 須額外加屬性 xmlns:xlink='http://www.w3.org/1999/xlink' 。

群組結構標籤： g, symbol

g group 群組

初始若在定義中不可見，不在定義中就可見。無法使用 viewBox 和 preserveAspectRatio 屬性。

symbol 定義可重複使用的符號

初始不顯示，能夠使用 viewBox 和 preserveAspectRatio 屬性。用 use 引用。

裡面可以包：動畫元素、描述性元素、形狀元素、結構化元素、漸變元素，如 <a>, <altGlyphDef>, <clipPath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignObject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view>。

viewBox屬性：

三行範例：
<svg width='400' height='300' viewBox='0,0,40,30' style='border:1px solid #cd0000;'>
    <rect x='10' y='5' width='20' height='15' fill='#cd0000'/>
</svg>

如無 viewBox 應該長這樣：

用了 viewBox 變這樣：

將 viewBox 指定的視窗，縮放到 width 和 height 指定的範圍。

preserveAspectRatio(保留長寬比)

上例中， SVG 的寬高比正好和 viewBox 的寬高比是一樣的，都是 4:3 ，顯然，實際應用時 viewBox 的寬高比不可能一直跟 viewport(SVG 的寬高) 始終一樣。這時就可以用 preserveAspectRatio 屬性來指定如何縮放。詳細的調整方式請見：

  1. 理解SVG viewport,viewBox,preserveAspectRatio縮放
  2. SVG preserveAspectRatio第2個值meet,slice,none功能演示

定義 defs

defs(成對)顧名思義就是「definitions」，即「定義」的意思。我們可以把許多重複性質高的元素，放入 defs 元素內，讓它變成一個可以重複利用的物件。

  • 基本規則：在 defs 中給被定義者一個 id 如 id='某某' ，然後在 defs 外引用這個定義，如 #某某。如果 id 指涉的是一個圖形物體，引用時用「xlink:href=…」；如果 id 指涉的是一個定義區間，其中還包含若干個定義標籤，引用時用「url(#某某)」。
  • 可用的定義標籤包含：
    1. 圖形物件或群組
      • 定義時對圖形物件或群組用 <g id='某某' … >
      • 引用時用 <use xlink:href='#某某' 修飾屬性 />，注意，use下，「#某某」不能為中文。
      • 引用的圖形或群組可與定義時略有不同，不同處用屬性值替換掉定義時的屬性。
      • 2023/1/16更新："xlink:href"這個指令目前已經已無法再使用，過去的舊檔案可讀取，但無法再重新寫入該指令。更新後的指令寫法為 <use href='#某某' /> 參考資料
    2. 文字路徑
      • 定義時用 <path id='某某' … >，注意只有 path 有效，其他圖形無效。
      • 引用時用 <text><textPath xlink:href='#某某'>隨著路徑跑的文字字串 </textPath></text>
    3. 漸層色
      • 定義時用 linearGradient 、 radialGradient
      • 引用時用屬性 fill='url(#某某)'
    4. 剪裁
      • 定義時用 <clipPath id='某某'><封閉圖形如圓、矩形/></clipPath>
      • 引用時用 <另一圖形 clip-path='url(#某某)'/>
      • clipping 裏頭還可以套用 clipping，就可以做出許多不同的形狀變化。
    5. 遮色片：而遮色片只有黑到白的灰階分布，所以如果作為遮色片的顏色是灰階以外的顏色，都會被轉換為灰階。越黑越透明，越白越不透明。
      • 定義時用 <mask id='某某'><一或多個封閉圖形如圓、矩形/></mask>
      • 引用時用 <另一圖形 mask='url(#某某)'/>
    6. 線段節點 marker
      • 定義時用
        <marker id='某1'><一個封閉圖形如圓、矩形/></marker>
        <marker id='某2'><一個封閉圖形如圓、矩形/></marker>
        <marker id='某3'><一個封閉圖形如圓、矩形/></marker>
      • 引用時用 <polyline points=… marker-end='url(#某1)' marker-start='url(#某2)' marker-mid='url(#某3)'/>
      • marker 定義時可用屬性：
        1. orient：marker 圖形跟隨線段的方向，單位是角度。預設值是 auto ：線段怎麼跑，自動隨著線段旋轉角度。
        2. refY：圖形上移點數
        3. refX：圖形左移點數
        4. 由 markerWidth,markerHeight 設定 marker 圖形的寬與高，不設圖形會因為超出範圍而出不來。
        5. 若不設 markerWidth,markerHeight ，可用「style='overflow:visible'」取代，即圖形超出範圍時仍顯示。
        6. markerUnits：有以下兩值
          strokeWidth(預設值)，依路徑的描邊寬度縮放標記的大小。
          userSpaceOnUse，無論使用它的路徑的筆觸寬度如何，標記都將保持其大小。
      • 圖形定義時可用屬性：
        1. 「fill='context-stroke'」或「style='fill:context-stroke;'」圖形的顏色跟著引用它物件的顏色。
    7. 濾鏡 filter 略
      • 定義時用 <filter id='某某'><某濾鏡標籤及其屬性/></filter>
      • 引用時用 <圖形 filter='url(#某某)'/>

向量圖形標籤

  • 共同約定：
    1. 開始與結束合一。
    2. 長度如省略單位，預設單位為 px。
    3. px可以使用小數點。
    4. 以左上為座標原點。
    5. 座標描述先 x 後 y 。
    6. stlye屬性中關於線條之樣式，也可以作為繪圖：
      • stroke (線條顏色)，
      • stroke-width (線條寬度)，
      • stroke-opacity (線條顏色的透明度，合法的範圍是：0 - 1，0最透明，預設1)，
      • stroke-linecap (線條端點形狀，預設butt端點切齊、round以端點為圓心線寬為直徑畫圓、square以端點為中心線寬為邊長畫方形)，
      • stroke-linejoin (線條轉彎處樣式，預設miter尖角、round圓角、bevel斜角)，
      • stroke-miterlimit (尖角內外距/線寬的最大值，不設限則尖角可以拉長至無限長，預設為 4 倍)，
      • stroke-dasharray (預設none，代表實線。若為數字其值為一陣列，陣列值為線段中實線段長度與虛線段長度的交錯數字，通常是兩個數字一組，如果是奇數，則最後面自動加補第一個數字)
    7. stlye屬性中關於面之樣式：
      • fill (填充顏色)，
      • fill-opacity (填充不透明，合法的範圍是：0 - 1，0最透明，預設1)。
      • fill-rule (polygon等標籤有時會將內部分割成不同的區域，填色方式，預設nonzero全部同色、evenodd相鄰區域內部填色與外部填色交互填充、inherit繼承)
    8. 選擇器 class,id 同 CSS 。

常見的簡易繪圖標籤：

  1. line(直線)，屬性有x1(第一點x座標)y1(第一點y座標)x2(第二點x座標)y2(第二點y座標)。
  2. polyline(多點成線)，諸屬性如下：
    • points：多點，點與點用空白間開，同一點 x y 座標以逗點間開。
  3. polygon(多邊形)，也可以取五點畫出一個星形。諸屬性如下：
    • points：多點，點與點用空白間開，同一點 x y 座標以逗點間開。
  4. circle(圓)，諸屬性如下：
    • cx(圓心x座標)，cy(圓心y座標)，r(半徑)
  5. rect(矩形)，諸屬性如下：
    • width(寬)，height(高)，省略起點則以原點為起點，x(起點x座標)，y(起點y座標)，rx(圓角x半徑)，ry(圓角y半徑)
  6. ellipse(楕圓)，諸屬性如下：
    • cx(中心x座標)，cy(中心x座標)，rx(x軸半長)，ry(y軸半長)。

path

  • A以外的語法說明
  • A的語法說明
  • 點與點之間、同點的 x , y 座標之間，用空白間開或用,間開兩者是等價的。
  • 參數大寫代表絕對座標，小寫代表與前一個座標的相對座標
指令 參數 示例 指令說明
M(move to) x y <path d='M0 0' style='stroke:black'/> 起始點的 x , y 座標
線 H(horizontal line to) x <path d='M0 0 H50' style='stroke:black'/> 從目前點的座標畫水平直線到指定的 x 軸座標
V(vertical line to) y <path d='M0 0 V50' style='stroke:black'/> 從目前點的座標畫垂直線到指定的 y 軸座標
L(line to) x y <path d='M0 0 L50 50' style='stroke:black'/> 從目前點的座標畫直線到指定點的 x , y 座標
二
次		 Q(quadratic Bézier curve) x1 y1 x y

<path d='M0,0 Q50,50 100,0' style='stroke:black'/>		 從目前點的座標畫條二次貝茲曲線到指定點的 x, y 座標：其中 x1, y1 為控制點
T(smooth quadratic Bézier curve) x y

<path d='M0,0 Q50,50 100,0 T200,0' style='stroke:black'/>		 前方要接上 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 逆時針方向
小寫 a 與大寫 A 的區別只在於： a 最後的 x,y 是相對於目前點的相對座標
三
次		 C(curve) x1 y1 x2 y2 x y

<path d='M0,0 C40,40 60,40 100,0' style='stroke:black'/>		 從目前點的座標畫條三次貝茲曲線到指定點的 x, y 座標：其中 x1, y1 及 x2, y2 為控制點
S(smooth curve) x2 y2 x y

<path d='M0,0 C40,40 60,40 100,0 S150,-40 200,0' style='stroke:black'/>		 在目前點之前必須有一個貝茲控制點，在目前點之後會以同樣的斜率鏡射一個貝茲控制點，再由參數(x2,y2)補上第二個貝茲控制點，再從目前點經兩個貝茲控制點畫貝茲曲線到指定點(x,y)。
Z(closepath)
<path d='M0,0 Q50,50 100,0 T200,0 Z' style='stroke:black'/>		 關閉路徑，將目前點的座標與第一個點的座標連接起來

(一)一次圖形(相對表示)

  1. 以 m 或 l 連續處理皆可
  2. 每一節放一個「下個點」， 

<path d='m0,51 50,50 50,-50 50,-50 50,50 50,50 50,-50 50,-50 50,50 50,50 50,-50 50,-50 50,50' style='stroke:black;fill:none;'/>
<path d='m0,51 l 50,50 50,-50 50,-50 50,50 50,50 50,-50 50,-50 50,50 50,50 50,-50 50,-50 50,50' style='stroke:black;fill:none;'/>

(二)二次圖形(相對表示)

  1. 以 q 或 q,t 連續處理皆可
  2. q 每一小節放兩個點：「控制點 下個節點」，兩點同座標系，皆參考上個節點。
  3. q,t 的 t 每一小節放一個點：「下個節點」，控制點省略，省略的控制點為上一小節控制點對上個節點的鏡像點。

以 q 表示 

<path d='m0,51 q50,50 100,0 50,-50 100,0 50,50 100,0 50,-50 100,0 50,50 100,0 50,-50 100,0' style='stroke:black;fill:none;'/>

以 q,t 表示 

<path d='m0,51 q50,50 100,0 t100,0 100,0 100,0 100,0 100,0' style='stroke:black;fill:none;'/>

(三)三次圖形(相對表示)

  1. 以 c 或 c,s 連續處理皆可
  2. c 每一小節放三個點：「控制點1 控制點2 下個節點」，三點同座標系，皆參考上個點。
  3. c,s 的 s 每一小節放兩個點：「控制點2 下個節點」，控制點1省略，省略的控制點1為上一小節控制點2對上個節點的鏡像點。
例一

以 c 表示 

<path d='m0,51 c40,40 60,40 100,0 40,-40 60,-40 100,0 40,40 60,40 100,0 40,-40 60,-40 100,0 40,40 60,40 100,0 40,-40 60,-40 100,0' style='stroke:black;fill:none;'/>

以 c,s 表示 

<path d='m0,51 c40,40 60,40 100,0 s60,-40 100,0 60,40 100,0 60,-40 100,0 60,40 100,0 60,-40 100,0' style='stroke:black;fill:none;'/>
例二
  1. 以下心形由四段三次貝茲曲線組成，每段皆含三點：兩個控制點、一個下一節點。
    1. AB 段以 P1,P2 為控制點， B 為下一節點，三個點座標參照 A 點。
    2. BC 段以 Q1,Q2 為控制點， C 為下一節點，三個點座標參照 B 點。 Q2 和 C點重合。
    3. CD 段以 R1,R2 為控制點， D 為下一節點，三個點座標參照 C 點。 R1 和 C點重合。
    4. DA 段以 S1,S2 為控制點， A 為下一節點，三個點座標參照 D 點。
  2. P2 、 B 、Q1 三點共線，所以 AB 段才能和 BC 平滑銜接。
  3. R2 、 D 、S1 三點共線，所以 CD 段才能和 DA 平滑銜接。
  4. C 點和 Q2 、 R1 重合，所以 BC 段和 CD 段，兩節點間有一個控制點和節點重合。但並不是退回到二次貝茲曲線，只是近似二次貝茲曲線而已。
  5. 由於 Q2 、 C 、 R1 重合， Q2 、 R1 以 C 點鏡像，所以可以將後面的小節(CD段)改以 s 表達。 



<path fill='#f00' d='m 12.7,38.5 c -21.3,-11.2 -14.3,-38.5 9.7,-38.5 30,0 51,38.5 51,38.5 0,0 -21,38.5 -51,38.5 -24,0 -31,-27.4 -9.7,-38.5 z'/>

由於 Q2 、 C 、 R1 重合， Q2 、 R1 以 C 點鏡像，所以可以將後面的小節(CD段)改以 s 表達： 

<path fill='#f00' d='m12.7,38.5 c-21.3,-11.2 -14.3,-38.5 9.7,-38.5 c30,0 51,38.5 51,38.5 s-21,38.5 -51,38.5 c-24,0 -31,-27.4 -9.7,-38.5z'/>


將紅心的尖部換成 q ，會使紅心尖部顯得略胖，但非常近似原來的紅心： 


<path fill='#f00' d='m 12.7,38.5 c -21.3,-11.2 -14.3,-38.5 9.7,-38.5 q 30,0 51,38.5 -21,38.5 -51,38.5 c -24,0 -31,-27.4 -9.7,-38.5 z'/>

比較原來的紅心和紅心的尖部換成 q (綠色部分)：

文字

  • 字體要能為 inkscape 所用，安裝時必須要使用「為所有使用者安裝」，不能只用「安裝」。如果只用「安裝」在 inkscape 中字體名稱會被槓除，表示不能使用。
  • 在「text」標籤開始與結束之間夾字，可用中英文。而使用「屬性」來規定文字的表現，所有的屬性都可以改用樣式來表達。
  • 可用中文字形：(UI 代表標題用字，非 UI 代表內文內字)
  • 中文字體英文名稱對應
  • 外部字體與蘋果電腦字體名稱
  • 中日韓字體列表
    1. Monospace：等寬字型(非調和字)
    2. Sans：無襯線體(黑體，哥德體)
    3. Serif：襯線體(筆畫末端的裝飾細節，白體，羅馬體)
    4. KaiTi：楷體，Windows 7 之前使用的標楷體名稱
    5. DFKai-SB：微軟標楷體，windows 10，已不會用其去代替 KaiTi。且此字形對 inkscape 而言是破的，無法使用。
    6. MingLiU：明體(等寬的英文字型)
    7. PMingLiU：新細明體(不等寬的英文字型)
    8. MingLiU_HKSCS：明體
    9. FangSong：仿宋
    10. NSimSun：新宋
    11. SimHei：新黑
    12. Microsoft YaHei：微軟雅黑體
    13. Microsoft JhengHei：微軟正黑體
    14. Microsoft JhengHei Light：微軟正黑體(細)
    15. Microsoft JhengHei Bold：必須用 font-weight:bold; 才能表現
    16. Arial Unicode MS：微軟 Arial 體
    17. DFBiaoKaiShu-B5：華康楷書體
    18. DFHKStdKai-B5：華康標楷體
    19. DFHKStdSong-B5：華康標宋體
    20. DFBiaoSong-B5：華康宋體
    21. DFHeiUBlod-B5：華康特粗黑體
    22. DFHeiBlod-B5：華康粗黑體
    23. DFHeiMedium-B5：華康中黑體
    24. DFHeiLight-B5：華康細黑體
    25. DFBiaoKaiShu-B5：華康楷書體
    26. …：華康眾字體，族繁不及備載
    27. Segoe UI：微軟 Segoe UI 字形
    28. Tahoma：微軟 Tahoma 字形
    29. Meiruo：日文明瞭體
    30. Meiruo UI：日文明瞭體
    31. MS Gothic：微軟日文哥德體
    32. MS Mincho：微軟日文明朝體
    33. MS PGothic：微軟日文哥德體
    34. MS PMincho：微軟日文明朝體
    35. MS UI Gothic：微軟日文哥德體
    36. MS Mincho：微軟日文明朝體
  • 王漢宗48套自由字體
字體檔名字體中文名字體英文名名稱縮寫
WCL-01.ttf波浪體HanWangWCL01wcl01
WCL-02.ttf特明體HanWangWCL02wcl02
WCL-03.ttf波卡體空陰HanWangWCL03wcl03
WCL-04.ttf綜藝體雙空陰HanWangWCL04wcl04
WCL-05.ttf標楷體空心HanWangWCL05wcl05
WCL-06.ttf仿宋體HanWangWCL06wcl06
WCL-07.ttf粗鋼體HanWangWCL07wcl07
WCL-08.ttf粗黑體實陰HanWangWCL08wcl08
WCL-09.ttf粗圓體雙空HanWangWCL09wcl09
WCL-10.ttf海報體半天水HanWangWCL10wcl10
wt001.ttf細明HanWangMingLighthwml
wt002.ttf中明HanWangMingMediumhwmm
wt003.ttf粗明HanWangMingBoldhwmb
wt004.ttf特明HanWangMingHeavyhwmh
wt005.ttf超明HanWangMingBlackhwmbk
wt006.ttf細圓HanWangYenLighthwyl
wt009.ttf特圓HanWangYenHeavyhwyh
wt011.ttf細黑HanWangHeiLighthwhl
wt014.ttf特黑HanWangHeiHeavyhwhh
wt021.ttf中隸書HanWangLiSuMediumhwlsm
wt024.ttf中仿宋HanWangFangSongMediumhwfsm
wt028.ttf疊圓HanWangKanDaYanhwkdy
wt034.ttf勘流亭HanWangKanTanhwkt
wt040.ttf綜藝體HanWangZonYihwzy
wt064.ttf顏體HanWangYanKaihwyk
wt071.ttf中行書HanWangShinSuMediumhwssm
wtcc02.ttf酷儷海報HanWangCC02hwcc02
wtcc15.ttf正海報HanWangCC15hwcc15
wthc06.ttf鋼筆行楷HanWangGB06hwhc
wtg-06cut1.ttf超黑俏皮動物HanWangGSolid06cut1hwgsc1
wp010-05.ttf中明注音體HanWangMingMediumChuInhwmmci
wp110-05.ttf中明破音字1HanWangMingMediumChuIn1hwmmci1
wp210-05.ttf中明破音字2HanWangMingMediumChuIn2hwmmci2
wp310-05.ttf中明破音字3HanWangMingMediumChuIn3hwmmci3
wp010-08.ttf中楷注音體HanWangKaiMediumChuInhwkmci
wp110-08.ttf中楷破音字1HanWangKaiMediumChuIn1hwkmci1
wp210-08.ttf中楷破音字2HanWangKaiMediumChuIn2hwkmci2
wp310-08.ttf中楷破音字3HanWangKaiMediumChuIn3hwkmci3
wts11.ttf粗楷體簡體HanWang KaiBold-Gb5wts11
wts43.ttf中魏碑簡體HanWang WeiBeiMedium-Gb5wts43
wts47.ttf中仿宋簡體HanWang FangSongMedium-Gb5wts47
wts55.ttf細新宋簡體HanWang SinSongThin-Gb5wts55
  • 屬性兼樣式 font-size ，如 34px 。屬性可省略單位，樣式則單位一定要寫， 34 點是字身框的大小，字面框(有字的部分)通常會較小。
  • 屬性兼樣式 font-weight ，設定方式同 HTML 。
  • 屬性 x 和 y 標示字的起點：值可為'10,20,30,40'，表示每個字的 x 或 y 座標。
  • 屬性 text-anchor：有三個值 start,middle 和 end ，指示 x 座標要對齊字串的哪裡。
  • 屬性 x 依 text-anchor 可以有三種對齊方式，預設值是 start ，即 x 指示字串的左緣起點。
  • 屬性 y 指示字的 baseline ，即要對齊的那條水平線，比中文字的下緣再略高一點點，如再高兩點。
    升部(Ascender)，主線以上
    大寫字高(Cap height)
    主線(Mean Line)
    x字高(x-height)，基線和主線之間的距離
    基線(Baseline)
    降部(Descender)，基線以下
  • 屬性 dx 和 dy 基於前一個字串的最後一個字的位置去做變化：值可為'10,20,30,40'，字的距離一個比一個更遠。
  • 屬性 rotate 標示每個字的旋轉角度(單位°)：值可為'0,30,60,90,120'，如果只有一個角度，代表每個字母按相同角度轉，不是整個字串按這個角度轉。整個字串轉要用 transform='rotate(…)' 。
  • 屬性兼樣式 writing-mode ：最有用的值為 tb (top-to-bottom，即漢字直書)。預設值為 lr-tb 或 lr ，由左至右由上而下；諸值為：lr-tb | rl-tb | tb-rl | lr | rl | tb | inherit 。
  • 屬性兼樣式 kerning：將停用，且對中文無效。值為 auto 或指定長度(通常為0，單純用來抑制住字距調整表)。如為 auto 則依「字距調整表」來調整兩個字形間的距離，如指定長度則停用「字距調整表」。預設值為 auto 。
  • 屬性兼樣式 letter-spacing：兩個英文字形間的距離，以 px 為單位，樣式中不可省略單位，對中文有效。可正可負，預設值 0 。
  • 屬性兼樣式 word-spacing：兩個英文單字間的距離，預設值 2 ，對中文無效。Firefox瀏覽器有可能不支持這個word-spacing屬性。
  • 屬性 textLength 及 lengthAdjust ，前者設定字串的總長度，後者設定要怎麼湊到這個長度，有兩個值：
    1. lengthAdjust='spacing' 靠調整字距來湊足字串的長度。
    2. lengthAdjust='spacingAndGlyphs' 靠把字拉胖來湊足字串的長度。
  • 屬性 fill 控制填入字的顏色，預設黑色
  • 屬性 stroke 控制字描框的顏色，預設 none
  • 屬性 text-decoration ，有以下諸值：
    1. underline：底線
    2. overline：頂線
    3. line-through：刪除線
    4. blink：閃爍
    5. none：無，預設值
    6. inherit：繼承
  • 子標籤 TSPAN：就是 span ，其屬性值幾乎和 text 一模一樣，也是 x、y、dx、dy、rotate、textLength。
  • 子標籤 textPath：屬性 xlink:href='#path的id' ；屬性 startOffset='xx%' 從 path 的百分之多少開始跑字。path 在 def 中定義，含路徑、填充色、畫框色。
  • 屬性 style 控制諸樣式：
    1. font-size:
    2. writing-mode:tb;直寫，預設橫寫
  • 用 style 控制字體、字形、尺寸，但顏色是用 fill 不是用 color 。

文字外框轉 path

使用 inkscape ：

  1. 「檔案 / 文字屬性 / 選用單位為 px / 指定寬度與高度 / Enter」
  2. 「建立和編輯文字物件 / 打出想要的字」
  3. 「文字 / 文字與字型 / 選用想要的字型 / 套用」
  4. 「選取和變形物件 / Ctrl-拉角 / 拉邊 / 直到吻合頁面邊框」
  5. 「路徑 / 物件轉成路徑」
  6. 另存 SVG 檔。

嵌入圖照

  • image，屬性有x(第一點x座標)y(第一點y座標)width(寬)height(高)。
  • 屬性 xlink:href="data:image/png;base64,圖照編碼" 或 xlink:href="圖照檔名"

嵌入外來

  1. foreignobject 開始與結束之間夾<body xmlns="http://www.w3.org/1999/xhtml">…</body>，body 中再夾如 table 等 HTML code 。
    • 屬性有：x嵌入物x座標，y嵌入物y座標，width嵌入物寬，height嵌入物高。

濾鏡

濾鏡是放在鏡頭前的透明體

濾鏡有多種，以下介紹最簡的高斯模糊。其他還有圖像混合濾鏡、顏色濾鏡…等 19 種濾鏡。

  1. 圖形標籤中放 filter='url(#濾鏡名)' 屬性，以濾鏡處理圖形
  2. 定義標籤 defs
    • defs 標籤是 definitions 的縮寫，它的內部放諸如濾鏡、漸層等特殊元素的定義。
    • filter 標籤(濾鏡標籤)必須放在 defs 內部。
  3. 濾鏡標籤 filter
    • 其中的 id 屬性定出濾鏡名稱
    • 也可以設 width,height,x,y 去定濾鏡範圍和起點，如沒設以整個圖形為範圍。
  4. 高斯模糊濾鏡 feGaussianBlur ，濾鏡標籤包住數種不同效果的濾鏡，高斯模糊濾鏡是最簡單的濾鏡。
    • 高斯模糊濾鏡主要只有一個參數：stdDeviation(標準差)，用來控制模糊的程度，數字越大越模糊，數字為零則是圖片原本的狀態。

漸層

分為線性漸層和放射漸層兩種

  1. 圖形標籤中放 fill='url(#漸層名)' 屬性，填入漸層色
  2. 定義標籤 defs
    • defs 標籤是 definitions 的縮寫，它的內部放諸如漸層等特殊元素的定義。
    • linearGradient 標籤和 radialGradient 標籤必須放在 defs 內部。
  3. 漸層標籤，漸層標籤中的 100%，指的是整個圖形
    • linearGradient 線性漸層定義標籤
      1. 其中的 id 屬性定出漸層名稱
      2. 由 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 放射漸層定義標籤
      1. 其中的 id 屬性定出漸層名稱
      2. 由 cx,cy,r 三個屬性決定漸層範圍，三個屬性都以百分比表示，漸層範圍是一個圓或橢圓
        • cx 表示範圍中心在圖寬百分之幾的位置
        • cy 表示範圍中心在圖高百分之幾的位置
        • r 如果圖形寬、高相等則範圍為圓，r代表範圍圓半俓除以圖形寬或高；如果圖形寬、高不相等則範圍為橢圓，r代表範圍橢圓的長短軸半長除以圖形寬或高；注意：r為50%，範圍圓直徑恰等於圖的寬或高。
      3. 由 fx,fy 兩個屬性決定設色中心的位置，就是設色為 0% 的地方，兩個屬性都以百分比表示
        • fx表示設色中心在圖寬百分之幾的位置
        • fy表示設色中心在圖高百分之幾的位置
        • 設色 100% 的地方在範圍圓或範圍橢圓的圓周上
      4. 以 http://jendo.org/~thisNasAdmin/ball3.svg 為例：漸層範圍為整個圓，因為 cx,cy,r 都是 50% ，而設色中心在中間下方，因為 fx='50%' fy='100%' ，此處是 stop 設為 0% 的顏色(白色)，而範圍圓週邊是 stop 設為 100% 的顏色(黑色)
  4. 設色標籤 stop，漸層標籤包住數個 stop 標籤，每種顏色通過一個 stop 標籤來規定。
    • offset屬性用來定義漸層的開始和結束位置，其 100% 是指整個漸層範圍。
    • stop-color 屬性用來定義顏色，也可以做為 style 的樣式。
    • stop-opacity 屬性決定透明度，也可以做為 style 的樣式。

transform 坐標變換方式

  • 代碼：<g transform="..."> <!--other elements> ...</g>
  1. 平移變換(translate)：transform="translate(x,y)"，即新坐標系的原點在原坐標系的(x,y)處。坐標軸的方向不變。
  2. 旋轉變換(rotate)：transform="rotate(angle cx,cy)"。angle代表旋轉角度，預設單位是「度」，順時針為正，逆時針為負。(cx,cy)是旋轉中心所在的坐標。若省略旋轉中心坐標，則預設值是(0,0)。
  3. 伸縮變換(scale)：transform="scale(sx,sy)"，sx,sy分別代表x軸方向和y方向拉伸或縮小的比例因子。拉伸：大於1；縮小：小於1。若省略sy，即sy=sx，作等比例縮放。
  4. 歪斜變換(skew)：transform="skewX(x-angle)"或transform="skewY(y-angle)"，x-angle,y-angle分別代表沿x軸和y軸歪斜的角度。
  5. 混合變換：如 transform="translate(x,y) rotate(angle)" 先位移再旋轉。
  6. 矩陣變換(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)

條件處理 - switch標籤

<switch>的典型用法是用於顯示不同的文字，但不可以用它來顯示不同的圖形。它會對它的直接子元素上的屬性 requiredFeatures, requiredExtensions 和 systemLanguage 按順序地進行求值，直到結果為真。所有其它的元素都會被繞開而不會被表達。如果子元素是一個容器元素，比如<g>，整個子樹要麼被處理和表達，要麼就會被繞過並且不表達。

注意，display 和 visibility 屬性並不會影響分支元素的執行。在分支的子元素上設定disply為none，對處理相關聯的真/假測試沒有任何影響。

下面的例子論證了根據瀏覽器的語言設定來顯示不同的文字內容。switch分支將會顯示它的子元素中第一個系統語言屬性符合使用者語言的元素，或者如果沒有元素符合，那麼將會顯示沒有系統語言屬性的分支。 

<switch>
	<text x='10' y='50' systemLanguage='en'>English text</text>
	<text x='10' y='50' systemLanguage='zh'>简体中文内容</text>
	<text x='10' y='50' systemLanguage='zh-tw'>繁體中文内容</text>
	<text x='10' y='50'>預設内容</text>
</switch>

動畫(animate)

四標籤：

  1. set(開關)
    • 只用attributeName,to,begin三屬性
  2. animate(屬性連續改變)
  3. animateTransform(平移,旋轉,縮放)
  4. animateMotion(循跡運動)
  • 共通語法：將母圖形分拆成開始和結束兩標籤，中間插入動畫標籤。
  • 共通屬性：
    1. attributeName 指出當前圖形元素的某一個屬性：
      • set,animate 中會為某一個母圖形的 attributeName 屬性，再設置 from 和 to ，就是這個屬性的值將由多少變到多少。
      • 如果另一屬性 attributeType='CSS' ，則 attributeName 設的是 style 中的樣式
      • animateTransform 必加 attributeName='transform' 另搭配 type 屬性
      • animateMotion 免設此屬性
    2. type屬性之值(animateTransform專用)：
      • 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='結束歪斜角度'
    3. begin='幾s'：幾秒開始跑，通常設為 0s 。
    4. dur='幾s'：跑一輪要幾秒，可以設為 indefinite 。
    5. repeatCount='幾'：要跑幾輪，indefinite代表無限多輪，預設值為1。
    6. from 開始狀態(animate,animateTransform有)。
    7. to 結束狀態(set,animate,animateTransform有)。
    8. path(animateMotion專用) 屬性為移動路徑：由 m 開始
    9. rotate='auto'(animateMotion專用) 圖形隨路徑曲度而轉折。
  • 在「循跡運動」中，如果我們用 path 來表達移動路徑，則圖形的 0,0 其實是 path 開頭 M 所指示的位置，所以須以此關係來決定圖形的 x,y ，才能得到真正想要的運動軌跡。通常圖形的 x 會設為 0 ， y 會設定為 ±圖形的高度 。

動畫參考連結

字形使用參考連結

其他


CanvasSVG
圖形格式點陣圖向量圖
放大支援放大到一定程度後會模糊無論放大多少倍清晰度不變
處理效能大型及複雜圖檔會導致處理速度降低及記憶體使用增加大型及複雜圖檔對於系統效能影響不顯著
精細繪圖可繪製較精密細緻複雜的圖形無法針對像素操作，因此無法製作過於複雜精密的圖形
相對的Adobe工具PhotoshopIllustrator

參考文章

取自「http://nice-learning.tw/wiki1231/index.php?title=六年制學程/02/2014.10.22&oldid=1687」