SVG概述
SVG : 可縮放矢量圖形,使用 XML 格式定義圖像。
SVG in HTML
- 直接嵌入HTML文檔中
<body>
<svg width="100%" height="100%">
<rect x="20" y="20" rx="20" ry="20" width="250" height="100"style="fill:red;stroke:black;stroke-width:5;opacity:0.5"/>
</svg>
</body>
- <embed>
被所有主流的瀏覽器支持，并允許使用腳本。
<embed src="rect.svg" width="300" height="100"
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />
- <object>
被所有較新的瀏覽器支持，缺點是不允許使用腳本。
<object data="rect.svg" width="300" height="100"
type="image/svg+xml"
codebase="http://www.adobe.com/svg/viewer/install/" />
- <iframe>
可工作在大部分的瀏覽器中。
<iframe src="rect.svg" width="300" height="100">
</iframe>
SVG實例
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"\>
<rect width="300" height="100"
style="fill:rgb(0,0,255);stroke-width:1;
stroke:rgb(0,0,0)"/>
</svg>
SVG形狀
矩形 rect
<rect width="300" height="100"
style="fill:rgb(0,0,255);stroke-width:1;
stroke:rgb(0,0,0)"/>
- width 和 height 定義 寬高
- style 定義 CSS 屬性
- fill 定義填充顏色（rgb 、顏色名或十六進制值）
- stroke-width 定義邊框寬度
- stroke 定義邊框顏色
<rect x="20" y="20" width="250" height="250"
style="fill:blue;stroke:pink;stroke-width:5;
fill-opacity:0.1;stroke-opacity:0.9"/>
- x 定義左側位置
（例如，x="0" 定義矩形到瀏覽器窗口左側的距離是 0px）
- y 定義頂端位置
（例如，y="0" 定義矩形到瀏覽器窗口頂端的距離是 0px） - fill-opacity 定義填充顏色透明度
- stroke-opacity 定義筆觸顏色透明度
<rect x="20" y="20" width="250" height="250"
style="fill:blue;stroke:pink;stroke-width:5;
opacity:0.9"/>
- opacity 定義整個元素的透明值
<rect x="20" y="20" rx="20" ry="20" width="250"
height="100" style="fill:red;stroke:black;
stroke-width:5;opacity:0.5"/>
- rx 和 ry 可使矩形產生圓角
圓形 circle
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
- cx 和 cy 定義圓點的 x 和 y 坐標。
如果省略 cx 和 cy，圓的中心為 (0, 0)
- r 定義圓的半徑。
橢圓 ellipse
<ellipse cx="300" cy="150" rx="200" ry="80"
style="fill:rgb(200,100,50);
stroke:rgb(0,0,100);stroke-width:2"/>
- cx 定義圓點的 x 坐標
- cy 定義圓點的 y 坐標
- rx 定義水平半徑
- ry 定義垂直半徑
<ellipse cx="240" cy="100" rx="220" ry="30"
style="fill:purple"/>
<ellipse cx="220" cy="70" rx="190" ry="20"
style="fill:lime"/>
<ellipse cx="210" cy="45" rx="170" ry="15"
style="fill:yellow"/>
<ellipse cx="240" cy="100" rx="220" ry="30"
style="fill:yellow"/>
<ellipse cx="220" cy="100" rx="190" ry="20"
style="fill:white"/>
線條 line
<line x1="0" y1="0" x2="300" y2="300"
style="stroke:rgb(99,99,99);stroke-width:2"/>
- x1 在 x 軸上線條的開始
- y1 在 y 軸上線條的開始
- x2 在 x 軸上線條的結束
- y2 在 y 軸上線條的結束
＃多邊形 ploygon
<polygon points="220,100 300,210 170,250"
style="fill:#cccccc;
stroke:#000000;stroke-width:1"/>
- points 定義多邊形每個角的 x 和 y 坐標
<polygon points="220,100 300,210 170,250 123,234"
style="fill:#cccccc;
stroke:#000000;stroke-width:1"/>
折線 ployline
<polyline points="0,0 0,20 20,20 20,40 40,40 40,60"
style="fill:white;stroke:red;stroke-width:2"/>
路徑 path
下面的命令可用于路徑數據：
M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Belzier curve
T = smooth quadratic Belzier curveto
A = elliptical Arc
Z = closepath
注釋：以上所有命令均允許小寫字母。大寫表示絕對定位，小寫表示相對定位。
<path d="M250 150 L150 350 L350 350 Z" />
- 開始于位置 250 150，到達位置 150 350，然后從那里開始到 350 350，最后在 250 150 關閉路徑。
<path d="M153 334
C153 334 151 334 151 334
C151 339 153 344 156 344
C164 344 171 339 171 334
C171 322 164 314 156 314
C142 314 131 322 131 334
C131 350 142 364 156 364
C175 364 191 350 191 334
C191 311 175 294 156 294
C131 294 111 311 111 334
C111 361 131 384 156 384
C186 384 211 361 211 334
C211 300 186 274 156 274"
style="fill:white;stroke:red;stroke-width:2"/>
SVG濾鏡
在 SVG 中，可用的濾鏡有：
feBlend feColorMatrix feComponentTransfer feComposite feConvolveMatrix feDiffuseLighting feDisplacementMap feFlood feGaussianBlur feImage feMerge feMorphology feOffset feSpecularLighting feTile feTurbulence feDistantLight fePointLight feSpotLight
注釋：您可以在每個 SVG 元素上使用多個濾鏡！
SVG高斯模糊
- <filter> 用來定義 SVG 濾鏡。
必需的 id 來定義向圖形應用哪個濾鏡
- <filter> 必須嵌套在 <defs> 標簽內。
<defs> 是 definitions 的縮寫，它允許對諸如濾鏡等特殊元素進行定義。
<defs>
<filter id="Gaussian_Blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
</filter>
</defs>
<ellipse cx="200" cy="150" rx="70" ry="40"
style="fill:#ff0000;stroke:#000000;
stroke-width:2;filter:url(#Gaussian_Blur)"/>
- <filter> 標簽的 id 屬性可為濾鏡定義一個唯一的名稱
（同一濾鏡可被文檔中的多個元素使用）
- filter:url 把元素鏈接到濾鏡。當鏈接濾鏡 id 時，必須使用 # 字符,
濾鏡效果是 <feGaussianBlur> 定義的。fe 后綴可用于所有的濾鏡 - <feGaussianBlur> 的 stdDeviation 定義模糊的程度
in="SourceGraphic" 定義了由整個圖像創建效果
<defs>
<filter id="Gaussian_Blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="20"/>
</filter>
</defs>
<ellipse cx="200" cy="150" rx="70" ry="40"
style="fill:#ff0000;stroke:#000000;
stroke-width:2;filter:url(#Gaussian_Blur)"/>
SVG漸變
漸變是一種從一種顏色到另一種顏色的平滑過渡。另外，可以把多個顏色的過渡應用到同一個元素上。
在 SVG 中，有兩種主要的漸變類型：
- 線性漸變
- 放射性漸變
線性漸變 linearGradient
- 當 y1 和 y2 相等，而 x1 和 x2 不同時，可創建水平漸變
- 當 x1 和 x2 相等，而 y1 和 y2 不同時，可創建垂直漸變
- 當 x1 和 x2 不同，且 y1 和 y2 不同時，可創建角形漸變
<defs>
<linearGradient id="orange_red" 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="190" rx="85" ry="55"
style="fill:url(#orange_red)"/>
- <linearGradient> 必須嵌套在 <defs> 的內部
- <linearGradient> 的 id 為漸變定義一個唯一的名稱
- fill:url(#orange_red) 把 ellipse 鏈接到此漸變
- <linearGradient> 的 x1、x2、y1、y2 可定義漸變的開始和結束位置
- 漸變的顏色范圍可由兩種或多種顏色組成。每種顏色通過一個 <stop> 標簽來規定。offset 屬性用來定義漸變的開始和結束位置。
<defs>
<linearGradient id="orange_red" x1="0%" y1="0%" x2="0%" y2="100%">
<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="190" rx="85" ry="55"
style="fill:url(#orange_red)"/>
放射性漸變 radialGradient
<defs>
<radialGradient id="grey_blue" cx="50%" cy="50%" r="50%"
fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(200,200,200);
stop-opacity:0"/>
<stop offset="100%" style="stop-color:rgb(0,0,255);
stop-opacity:1"/>
</radialGradient>
</defs>
<ellipse cx="230" cy="200" rx="110" ry="100"
style="fill:url(#grey_blue)"/>
- <radialGradient> 的 id 可為漸變定義一個唯一的名稱
- fill:url(#grey_blue) 把 ellipse 元素鏈接到此漸變
- cx、cy 和 r 定義外圈， fx 和 fy 定義內圈 漸變的顏色范圍可由兩種或多種顏色組成。
- 每種顏色通過一個 <stop> 標簽來規定。
- offset 定義漸變的開始和結束位置。
<defs>
<radialGradient id="grey_blue" cx="20%" cy="40%" r="50%"
fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(200,200,200);
stop-opacity:0"/>
<stop offset="100%" style="stop-color:rgb(0,0,255);
stop-opacity:1"/>
</radialGradient>
</defs>
<ellipse cx="230" cy="200" rx="110" ry="100"
style="fill:url(#grey_blue)"/>
