<?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 version="1.1" width="1000" height="1000"
xmlns="http://www.w3.org/2000/svg">
cx 和 cy 屬性定義圓點(diǎn)的 x 和 y 坐標(biāo)。如果省略 cx 和 cy，圓的中心會(huì)被設(shè)置為 (0, 0),r 屬性定義圓的半徑。
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/></br>
rect 元素的 width 和 height 屬性可定義矩形的高度和寬度
- CSS 的 fill 屬性定義矩形的填充顏色（rgb 值、顏色名或者十六進(jìn)制值）
- CSS 的 stroke-width 屬性定義矩形邊框的寬度
- CSS 的 stroke 屬性定義矩形邊框的顏色
- x 屬性定義矩形的左側(cè)距離瀏覽器窗口位置
- y 屬性定義矩形的頂端距離瀏覽器窗口位置
- CSS 的 fill-opacity 屬性定義填充顏色透明度
- CSS 的 stroke-opacity 屬性定義筆觸顏色的透明度
<rect width="300" height="100" y='100' x='100' rx='40' ry='40'
style="fill:rgb(0,0,255);stroke-width:1;
stroke:rgb(0,0,0);fill-opacity:0.5;stroke-opacity:0.9;"/></br>
橢圓
cx 圓點(diǎn)的 x 坐標(biāo)
cy 圓點(diǎn)的 y 坐標(biāo)
rx 水平半徑
ry垂直半徑
<ellipse cx="640" cy="100" rx="220" ry="30"
style="fill:purple"/>
<ellipse cx="620" cy="70" rx="190" ry="20"
style="fill:lime"/>
<ellipse cx="610" cy="45" rx="170" ry="15"
style="fill:yellow"/></br>
<line x1="600" y1="300" x2="900" y2="400"
style="stroke:rgb(99,99,99);stroke-width:2"/></br>
<polygon> 標(biāo)簽用來(lái)創(chuàng)建含有不少于三個(gè)邊的圖形。
<polygon points="420,300 500,410 370,450"
style="fill:#cccccc;
stroke:#000000;stroke-width:1" /></br>
<polyline> 標(biāo)簽用來(lái)創(chuàng)建僅包含直線的形狀
<polyline points="0,0 0,20 20,20 20,40 40,40 40,60"
style="fill:white;stroke:red;stroke-width:2"/></br>
<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"/></br>
filter標(biāo)簽定義SVG濾鏡。并且在defs標(biāo)簽內(nèi)，id定義向圖形應(yīng)用哪個(gè)濾鏡
url屬性把元素鏈接到某個(gè)濾鏡
濾鏡簡(jiǎn)介：
feBlend
feColorMatrix
feComponentTransfer
feComposite
feConvolveMatrix
feDiffuseLighting
feDisplacementMap
feFlood
feGaussianBlur
feImage
feMerge
feMorphology
feOffset
feSpecularLighting
feTile
feTurbulence
feDistantLight
fePointLight
feSpotLight
濾鏡效果是通過(guò) <feGaussianBlur> 標(biāo)簽進(jìn)行定義的。fe 后綴可用于所有的濾鏡
<feGaussianBlur> 標(biāo)簽的 stdDeviation 屬性可定義模糊的程度
in="SourceGraphic" 這個(gè)部分定義了由整個(gè)圖像創(chuàng)建效果
<defs>
<filter id="Gaussian_Blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" />
</filter>
</defs>
<ellipse cx="200" cy="150" rx="70" ry="40"
style="fill:#ff0000;stroke:#000000;
stroke-width:2;filter:url(#Gaussian_Blur)"/></br>
漸變是一種從一種顏色到另一種顏色的平滑過(guò)渡。另外，可以把多個(gè)顏色的過(guò)渡應(yīng)用到同一個(gè)元素上。
在 SVG 中，有兩種主要的漸變類型：
線性漸變：水平，垂直，角形
漸變的顏色范圍可由兩種或多種顏色組成。每種顏色通過(guò)一個(gè) <stop> 標(biāo)簽來(lái)規(guī)定。offset 屬性用來(lái)定義漸變的開始和結(jié)束位置。
<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="600" cy="190" rx="85" ry="55"
style="fill:url(#orange_red)"/></br>
放射性漸變 cx、cy 和 r 屬性定義外圈，而 fx 和 fy 定義內(nèi)圈
<defs>
<radialGradient id="grey_blue" cx="50%" cy="50%" r="60%"
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="630" cy="500" rx="110" ry="100"
style="fill:url(#grey_blue)"/>
</svg>
