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