1. svg的基礎(chǔ)原型
<rect> 矩形 <cricle> 圓形 <ellipse> 橢圓 <line> 線(xiàn) <polyline> 折線(xiàn) <polygon>多邊形 <path> 路線(xiàn)
1.1 矩形的屬性
Attribute： width ：寬度
height ：高度
fill ：填充色
stroke-width 矩形邊框?qū)挾?br>
stroke：矩形邊框顏色
opacity :定義元素的透明度
rx 和 ry 屬性可使矩形產(chǎn)生圓角
1.2圓形的屬性
cx 和 cy 屬性定義圓點(diǎn)的 x 和 y 坐標(biāo)。如果省略 cx 和 cy，圓的中心會(huì)被設(shè)置為 (0, 0)
r 屬性定義圓的半徑。
1.3橢圓的屬性
cx 屬性定義圓點(diǎn)的 x 坐標(biāo)
cy 屬性定義圓點(diǎn)的 y 坐標(biāo)
rx 屬性定義水平半徑
ry 屬性定義垂直半徑
1.4 線(xiàn)條的屬性
x1 屬性在 x 軸定義線(xiàn)條的開(kāi)始
y1 屬性在 y 軸定義線(xiàn)條的開(kāi)始
x2 屬性在 x 軸定義線(xiàn)條的結(jié)束
y2 屬性在 y 軸定義線(xiàn)條的結(jié)束
1.5 多邊形屬性
points 屬性定義多邊形每個(gè)角的 x 和 y 坐標(biāo)
1.6 折線(xiàn)的屬性
跟多邊形一樣都是points
1.7路徑的屬性
下面的命令可用于路徑數(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
實(shí)例：
<path d="M250 150 L150 350 L350 350 Z" />
上面的例子定義了一條路徑，它開(kāi)始于位置 250 150，到達(dá)位置 150 350，然后從那里開(kāi)始到 350 350，最后在 250 150 關(guān)閉路徑。
1.8svg濾鏡
在 SVG 中，可用的濾鏡有：
feBlend
feColorMatrix
feComponentTransfer
feComposite
feConvolveMatrix
feDiffuseLighting
feDisplacementMap
feFlood
feGaussianBlur
feImage
feMerge
feMorphology
feOffset
feSpecularLighting
feTile
feTurbulence
feDistantLight
fePointLight
feSpotLight
必須在 <defs> 標(biāo)簽中定義 SVG 濾鏡。
高斯模糊（Gaussian Blur）
<filter> 標(biāo)簽用來(lái)定義 SVG 濾鏡。<filter> 標(biāo)簽使用必需的 id 屬性來(lái)定義向圖形應(yīng)用哪個(gè)濾鏡？
<filter> 標(biāo)簽必須嵌套在 <defs> 標(biāo)簽內(nèi)。<defs> 標(biāo)簽是 definitions 的縮寫(xiě)，它允許對(duì)諸如濾鏡等特殊元素進(jìn)行定義。
實(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">
<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)"/>
</svg>
<filter> 標(biāo)簽的 id 屬性可為濾鏡定義一個(gè)唯一的名稱(chēng)（同一濾鏡可被文檔中的多個(gè)元素使用）
filter:url 屬性用來(lái)把元素鏈接到濾鏡。當(dāng)鏈接濾鏡 id 時(shí)，必須使用 # 字符
濾鏡效果是通過(guò) <feGaussianBlur> 標(biāo)簽進(jìn)行定義的。fe 后綴可用于所有的濾鏡
<feGaussianBlur> 標(biāo)簽的 stdDeviation 屬性可定義模糊的程度
in="SourceGraphic" 這個(gè)部分定義了由整個(gè)圖像創(chuàng)建效果.
SVG 漸變
漸變是一種從一種顏色到另一種顏色的平滑過(guò)渡。另外，可以把多個(gè)顏色的過(guò)渡應(yīng)用到同一個(gè)元素上。
在 SVG 中，有兩種主要的漸變類(lèi)型：
線(xiàn)性漸變
放射性漸變
線(xiàn)性漸變
<linearGradient> 可用來(lái)定義 SVG 的線(xiàn)性漸變。
<linearGradient> 標(biāo)簽必須嵌套在 <defs> 的內(nèi)部。<defs> 標(biāo)簽是 definitions 的縮寫(xiě)，它可對(duì)諸如漸變之類(lèi)的特殊元素進(jìn)行定義。
線(xiàn)性漸變可被定義為水平、垂直或角形的漸變：
當(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)建角形漸變
放射性漸變
<radialGradient> 用來(lái)定義放射性漸變。
<radialGradient> 標(biāo)簽必須嵌套在 <defs> 中。<defs> 標(biāo)簽是 definitions 的縮寫(xiě)，它允許對(duì)諸如漸變等特殊元素進(jìn)行定義
