SVG有一些預(yù)定義的形狀元素椿息，可被開(kāi)發(fā)者使用和操作：
- 矩形 <rect>
- 圓形 <circle>
- 橢圓 <ellipse>
- 線 <line>
- 折線 <polyline>
- 多邊形 <polygon>
- 路徑 <path>
矩形 <rect>
x：矩形的左側(cè)位置（例如，x="0" 定義矩形到瀏覽器窗口左側(cè)的距離是 0px）
y：矩形的頂端位置（例如氨肌，y="0" 定義矩形到瀏覽器窗口頂端的距離是 0px）
rx 和 ry：使矩形產(chǎn)生圓角。
width 和 height ：定義矩形的高度和寬度
style：CSS 屬性
CSS 的 fill：矩形的填充顏色（rgb 值肥隆、顏色名或者十六進(jìn)制值）
CSS 的 stroke-width：矩形邊框的寬度
CSS 的 stroke：矩形邊框的顏色
CSS 的 fill-opacity：填充顏色透明度（合法的范圍是：0 - 1）
CSS 的 stroke-opacity：筆觸顏色的透明度（合法的范圍是：0 - 1）
CSS opacity：元素的透明值 (范圍: 0 到 1)站绪。
<?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 xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect x="50" y="20" rx="20" ry="20" width="200" height="130"
style="fill:blue; stroke:pink; stroke-width:5; fill-opacity:0.1;
stroke-opacity:0.9"/>
</svg>
圓形 <circle>
cx和cy：圓點(diǎn)的x和y坐標(biāo)
=> 如果省略cx和cy，圓的中心會(huì)被設(shè)置為(0, 0)
r：圓的半徑
<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>
橢圓 <ellipse>
CX：橢圓中心的x坐標(biāo)
CY：橢圓中心的y坐標(biāo)
RX：水平半徑
RY：垂直半徑
<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>
直線 <line>
x1：在 x 軸定義線條的開(kāi)始
y1：在 y 軸定義線條的開(kāi)始
x2：在 x 軸定義線條的結(jié)束
y2：在 y 軸定義線條的結(jié)束
<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>
多邊形 <polygon>
<polygon> 標(biāo)簽用來(lái)創(chuàng)建含有不少于三個(gè)邊的圖形遂鹊。是由直線組成伦忠，其形狀是"封閉"的（所有的線條 連接起來(lái)）。
points：多邊形每個(gè)角的 x 和 y 坐標(biāo)
fill-rule：填充方式稿辙，有nonzero和evenodd兩種選項(xiàng)
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
曲線 <polyline>
用于創(chuàng)建任何只有直線的形狀：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160"
style="fill:white;stroke:red;stroke-width:4" />
</svg>
路徑 <path>
用于定義一個(gè)路徑昆码。
下面的命令可用于路徑數(shù)據(jù)：
- M = moveto
- L = lineto
- H = horizontal lineto
- V = vertical lineto
- C = curveto
- S = smooth curveto
- Q = quadratic Bézier curve
- T = smooth quadratic Bézier curveto
- A = elliptical Arc
- Z = closepath
注意：以上所有命令均大小寫(xiě)敏感。大寫(xiě)表示絕對(duì)定位邻储，小寫(xiě)表示相對(duì)定位赋咽。
d屬性定義了路徑描述。
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<path d="M150 0 L75 200 L225 200 Z" />
</svg>
說(shuō)明：它開(kāi)始于位置(150,0)吨娜，到達(dá)位置(75,200)脓匿，然后從那里開(kāi)始到(225,200)，最后在(150,0)關(guān)閉路徑宦赠。
Quadratic Bezier 曲線：
<path id="purple" d="M 100 400 q 200 -300 400 0" fill="none"
stroke="purple" stroke-width="3" />
說(shuō)明： q x1 y1 x y：小寫(xiě)的q陪毡，相對(duì)位置，從當(dāng)前位置畫(huà)曲線至相對(duì)坐標(biāo)（x, y）勾扭，控制點(diǎn)為相對(duì)坐標(biāo)（x1, y1）
文本 <text>
x毡琉，y：文本位置
fill：文本顏色
transform：文字旋轉(zhuǎn) transform="rotate(30 20,40)": rotate(a x,y) 基于點(diǎn)（x，y）進(jìn)行角度a的旋轉(zhuǎn)
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path id="path1" d="M75,20 a1,1 0 0,0 100,0" />
</defs>
<text x="10" y="100" style="fill:red;">
<textPath xlink:href="#path1">I love SVG I love SVG</textPath>
</text>
</svg>
注意：該<text>可被包含在<a></a>標(biāo)簽以?xún)?nèi)
線性漸變 <linearGradient>
放射性漸變 <radialGradient>
重要屬性 stroke
- stroke：顏色
- stroke-width：寬度
- stroke-linecap：線條端點(diǎn)形狀butt / 無(wú)端點(diǎn)妙色， round / 圓形桅滋，square / 正方形
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<g fill="none" stroke="black" stroke-width="10">
<path stroke-linecap="butt" d="M5 20 l215 0" />
<path stroke-linecap="round" d="M5 40 l215 0" />
<path stroke-linecap="square" d="M5 60 l215 0" />
</g>
</svg>```
- stroke-dasharray：用于創(chuàng)建虛線
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<g fill="none" stroke="black" stroke-width="4">
<path stroke-dasharray="5,5" d="M5 20 l215 0" />
<path stroke-dasharray="10,10" d="M5 40 l215 0" />
<path stroke-dasharray="20,10,5,5,5,10" d="M5 60 l215 0" />
</g>
</svg>```
