SVG意為可伸縮矢量圖形
# 基本樣式應(yīng)用
<svg version="1.1" baseProfile="full" width="500" height="500" style="border:1px solid red" xmlns="http://www.w3.org/2000/svg">
# 定義路徑 M路徑開始 L路徑到達 Z關(guān)閉路徑
<path d="M50 50 L100 150 L150 150 Z" />
# 創(chuàng)建折線 points="x1,y1 x2,y2 x3,y3...."
<polyline points="0,0 10,20 30,50 60,80 90,120 90,160" style="fill:white;stroke:red;stroke-width:2"/>
# 定義不少于三個角的多邊形 points="x1,y1 x2,x2 x3,y3..."
<polygon points="0,30 40,30 60,90" style="fill:#cccccc; stroke:#000000;stroke-width:1"/>
# 定義線條 x1 X軸線條開始 y1 Y軸線條開始 x2 X軸線條結(jié)束 y2 Y軸線條結(jié)束
<line x1="0" y1="0" x2="300" y2="300" style="stroke:rgb(99,99,99);stroke-width:2"/>
# 定義橢圓 cx圓X坐標(biāo) cy圓Y坐標(biāo) rx水平半徑 ry垂直半徑
<ellipse cx="300" cy="300" rx="155" ry="55" style="fill:rgb(200,100,50);
stroke:rgb(0,0,100);stroke-width:2"/>
# 定義圓 cx圓X坐標(biāo) cy圓Y坐標(biāo) r半徑 fill填充色 stroke邊框色 stroke-width邊框?qū)? <circle cx='150' cy='150' r='70' fill="red" stroke="black" stroke-width="2"/>
# 定義矩形 寬|| 高 || 填充色 || 邊框?qū)?|| 線條色
<rect style="width:150px;height:150px;fill:rgba(0,0,0,0.5);stroke-width:1;stroke:rgba(122,122,122,0.6);opacity:0.2"></rect>
</svg>
# 線性漸變
1. linearGradient定義線性漸變
2. x1霉猛、x2、y1、y2 屬性可定義漸變的開始和結(jié)束位置
3. 漸變顏色由 stop標(biāo)簽來設(shè)定
4. x1 x2 y1 y2值不同漸變也就不同
<svg version="1.1" baseProfile="full" width="500" height="500" style="border:1px solid red" xmlns="http://www.w3.org/2000/svg">
<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)"/>
</svg>
# 放射漸變
1. radialGradient定義放射漸變 cx cy r 外層圓 || fx fy 內(nèi)層圓
2. stop標(biāo)簽用來設(shè)置顏色 offset屬性定義漸變的開始和結(jié)束
<svg version="1.1" baseProfile="full" width="500" height="500" style="border:1px solid red" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="grey_blue" cx="50%" cy="50%" r="50%" fx="0%" 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)"/>
</svg>
# 定義濾鏡
1. defs標(biāo)簽必須包裹fliter標(biāo)簽
2. fliter標(biāo)簽屬性id用來指定那個圖形應(yīng)用該路徑
3. feGaussianBlur標(biāo)簽用來定義濾鏡效果
4. stdDeviation定義模糊程度
5. in="SourceGraphic"由整個圖像創(chuàng)建
6. 給應(yīng)用圖像使用filter:url(#指定的id)屬性
<svg version="1.1" baseProfile="full" width="500" height="500" style="border:1px solid red" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="Gaussian_Blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
</filter>
</defs>
<rect width="200" height="200" style="fill:red;stroke: blue;filter:url(#orange_red)" stroke-width="5"></rect>
</svg>