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>
被所有較新的瀏覽器支持栈雳，缺點(diǎn)是不允許使用腳本鸠踪。
<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實(shí)例
<?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 花墩、顏色名或十六進(jìn)制值）
- stroke-width 定義邊框?qū)挾?/li>
- 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 定義左側(cè)位置
（例如悬秉，x="0" 定義矩形到瀏覽器窗口左側(cè)的距離是 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 定義整個(gè)元素的透明值
<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 可使矩形產(chǎn)生圓角
圓形 circle
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
- cx 和 cy 定義圓點(diǎn)的 x 和 y 坐標(biāo)冰蘑。
如果省略 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 定義圓點(diǎn)的 x 坐標(biāo)
- cy 定義圓點(diǎn)的 y 坐標(biāo)
- 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 軸上線條的結(jié)束
- y2 在 y 軸上線條的結(jié)束
＃多邊形 ploygon
<polygon points="220,100 300,210 170,250"
style="fill:#cccccc;
stroke:#000000;stroke-width:1"/>
- points 定義多邊形每個(gè)角的 x 和 y 坐標(biāo)
<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
下面的命令可用于路徑數(shù)據(jù)：
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仇箱，到達(dá)位置 150 350县恕，然后從那里開始到 350 350，最后在 250 150 關(guān)閉路徑剂桥。
<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
注釋：您可以在每個(gè) SVG 元素上使用多個(gè)濾鏡！
SVG高斯模糊
- <filter> 用來定義 SVG 濾鏡权逗。
必需的 id 來定義向圖形應(yīng)用哪個(gè)濾鏡
- <filter> 必須嵌套在 <defs> 標(biāo)簽內(nèi)美尸。
<defs> 是 definitions 的縮寫，它允許對諸如濾鏡等特殊元素進(jìn)行定義斟薇。
<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> 標(biāo)簽的 id 屬性可為濾鏡定義一個(gè)唯一的名稱
（同一濾鏡可被文檔中的多個(gè)元素使用）
- filter:url 把元素鏈接到濾鏡师坎。當(dāng)鏈接濾鏡 id 時(shí)，必須使用 # 字符,
濾鏡效果是 <feGaussianBlur> 定義的堪滨。fe 后綴可用于所有的濾鏡 - <feGaussianBlur> 的 stdDeviation 定義模糊的程度
in="SourceGraphic" 定義了由整個(gè)圖像創(chuàng)建效果
<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漸變
漸變是一種從一種顏色到另一種顏色的平滑過渡胯陋。另外，可以把多個(gè)顏色的過渡應(yīng)用到同一個(gè)元素上椿猎。
在 SVG 中惶岭，有兩種主要的漸變類型：
- 線性漸變
- 放射性漸變
線性漸變 linearGradient
- 當(dāng) y1 和 y2 相等，而 x1 和 x2 不同時(shí)犯眠，可創(chuàng)建水平漸變
- 當(dāng) x1 和 x2 相等按灶，而 y1 和 y2 不同時(shí)，可創(chuàng)建垂直漸變
- 當(dāng) x1 和 x2 不同筐咧，且 y1 和 y2 不同時(shí)鸯旁，可創(chuàng)建角形漸變
<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> 的內(nèi)部
- <linearGradient> 的 id 為漸變定義一個(gè)唯一的名稱
- fill:url(#orange_red) 把 ellipse 鏈接到此漸變
- <linearGradient> 的 x1噪矛、x2、y1铺罢、y2 可定義漸變的開始和結(jié)束位置
- 漸變的顏色范圍可由兩種或多種顏色組成艇挨。每種顏色通過一個(gè) <stop> 標(biāo)簽來規(guī)定。offset 屬性用來定義漸變的開始和結(jié)束位置韭赘。
<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 可為漸變定義一個(gè)唯一的名稱
- fill:url(#grey_blue) 把 ellipse 元素鏈接到此漸變
- cx缩滨、cy 和 r 定義外圈， fx 和 fy 定義內(nèi)圈 漸變的顏色范圍可由兩種或多種顏色組成泉瞻。
- 每種顏色通過一個(gè) <stop> 標(biāo)簽來規(guī)定脉漏。
- offset 定義漸變的開始和結(jié)束位置。
<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)"/>
