SVG · JavaScript半知半解

## SVG：可伸縮的矢量圖形這里只是簡要的介紹一下SVG，如要深入，推薦看《SVG經典入門》 **1、SVG** **1.1 概述** SVG是一種用于描述圖形的XML語法。由于結構是XML格式，使得它可以插入HTML文檔，成為DOM的一部分，然后用JavaScript和CSS進行操作。一個簡單的SVG文件如下： ``` <svg xmlns="http://www.w3.org/2000/svg" vieBox="0 0 1000 1000" id="mySvg"> <rect x="100" y="200" width="800" height="600" stroke="black" stroke-width="25" fill="red"/> </svg> ``` **1.2 使用方法** 要使用SVG有很多方法，最簡單的就是直接將SVG代碼嵌入到HTML中： ``` <body> <svg xmlns="http://www.w3.org/2000/svg" vieBox="0 0 1000 1000" id="mySvg"> <rect x="100" y="200" width="800" height="600" stroke="black" stroke-width="25" fill="red"/> </svg> </body> ``` SVG代碼也可以單獨寫在一個文件中，后綴是“.svg”，然后用在`<img>、<object>、<embed>、<iframe>`等標簽，以及CSS的background-image屬性，將這個文件插入網頁。 ``` <img src="example.svg"> <object data="example.svg" type="image/svg+xml"></object> <embed src="example.svg" type="image/svg+xml"> <iframe src="example.svg"></iframe> ``` **1.3 基本圖形** **（1）矩形** ``` <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <rect x="10" y="20" rx="5" ry="5" width="200" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0);fill-opacity:0.1;opacity:0.5" /> </svg> ``` 屬性說明： rect 元素的 `width` 和 `height` 屬性可定義矩形的高度和寬度 `style` 屬性用來定義 CSS 屬性 - fill 屬性定義矩形的填充顏色（rgb 值、顏色名或者十六進制值） - fill-opacity屬性定義填充顏色的透明度 - stroke-width 屬性定義矩形邊框的寬度 - stroke 屬性定義矩形邊框的顏色 - stroke-opacity屬性定義筆觸顏色的透明度 - opacity屬性定義元素的透明度 - rx和ry屬性定義矩形圓角下面的其他圖形都支持style屬性，而且可以單獨作為屬性添加。 **（2）圓形** ``` <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/> </svg> ``` 屬性說明： - cx和cy屬性定義圓點的x和y坐標，如果省略，則默認為(0,0) - r屬性定義圓的半徑 **（3）橢圓** ``` <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <ellipse cx="300" cy="80" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2"/> </svg> ``` 屬性說明： - cx和cy屬性定義橢圓的中心的x和y坐標 - rx定義水平半徑 - ry定義垂直半徑 **（4）直線** ``` <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2"/> </svg> ``` 屬性說明： - x1和y1表示起始點的x和y坐標 - x2和y2表示結束點的x和y坐標 **（5）多邊形** ``` <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1"/> </svg> ``` 屬性說明： - points屬性定義多邊形每個角的x和y坐標，x和y坐標之間用逗號隔開，每個坐標點之間用空格隔開 **（6）曲線** ``` <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <polyline points="20,20 40,25 60,40 80,120 120,140 200,180" style="fill:none;stroke:black;stroke-width:3" /> </svg> ``` - points屬性定義多邊形每個角的x和y坐標，x和y坐標之間用逗號隔開，每個坐標點之間用空格隔開 **（7）文本** ``` <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <text x="0" y="15" fill="red">I love SVG</text> </svg> ``` **（8）路徑** ``` <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <path d="M150 0 L75 200 L225 200 Z" /> </svg> ``` 屬性說明： - d屬性定義一組路徑數據，一對坐標值的x和y坐標之間可以用空格或逗號隔開，但坐標對與坐標對之間只能用空格分隔。 - pathLength屬性定義路徑總長度，不允許負值繪圖指令： ``` M moveto，表示移動，后跟著坐標點，比如150 0 L lineto，表示連接（也可以說是繪制直線），后跟著坐標點，比如75 200 H horizontal lineto，繪制水平線段 V vertical lineto，繪制垂直線段 C curveto，繪制普通的三次貝塞爾曲線（C x1 y1 x2 y2 destx desty） S smooth curveto：繪制光滑的三次貝塞爾曲線（S x2 y2 destx desty） Q quadratic Bézier curve：繪制普通的二次貝塞爾曲線 T smooth quadratic Bézier curveto：繪制光滑的二次貝塞爾曲線 A elliptical Arc：繪制橢圓弧 Z closepath，表示完成閉合路徑，即將路徑首尾相連，構成閉合圖形 ``` 大寫表示絕對定位，小寫表示相對定位。 **1.4 裝飾SVG** **1.4.1 stroke屬性** - stroke：定義一條線，文本或元素輪廓顏色 - stroke-width：定義了一條線，文本或元素輪廓厚度 - stroke-linecap：定義不同類型的開放路徑的終結（可能值：butt、round、square） - stroke-dasharray：用于創建虛線 **1.4.2 濾鏡** **（1）模糊效果** 所有的SVG濾鏡都定義在`<defs>`元素中， `<filter>`標簽用來定義SVG濾鏡例子：`<feGaussianBlur>` 元素是用于創建模糊效果 ``` <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <filter id="f1" x="0" y="0"> <feGaussianBlur in="SourceGraphic" stdDeviation="15" /> </filter> </defs> <rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)" /> </svg> ``` **（2）陰影** `<feOffset>`元素是用于創建陰影效果。 ``` <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <filter id="f1" x="0" y="0" width="200%" height="200%"> <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" /> <feBlend in="SourceGraphic" in2="offOut" mode="normal" /> </filter> </defs> <rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)" /> </svg> ``` **1.4.3 漸變** **（1）線性漸變** `<linearGradient>`元素用于定義線性漸變。 ``` <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" /> <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" /> </linearGradient> </defs> <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" /> </svg> ``` **（2）放射性漸變** `<radialGradient>`元素用于定義放射性漸變。 ``` <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:0" /> <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" /> </radialGradient> </defs> <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" /> </svg> ```