SVG 基础知识 回顾
??? 第一次開通博客，思前想去還是先回顧下去年做比賽作品時學(xué)習(xí)的SVG動畫。下一篇寫SVG制作動畫總結(jié)。
??? SVG 是使用 XML 來描述二維圖形和繪圖程序的語言。
??? 先了解下SVG的優(yōu)勢：可在任何的分辨率下被高質(zhì)量地打印；圖像中的文本是可選的，同時也是可搜索的（很適合制作地圖）；可以與 Java 技術(shù)一起運(yùn)行；與 JPEG 和 GIF 圖像比起來，尺寸更小，且可壓縮性更強(qiáng)；所有瀏覽器均支持 SVG 文件，不過需要安裝插件的 Internet Explorer 除外，但插件是免費(fèi)的。
?SVG 預(yù)定義的形狀元素：
- 矩形 <rect>
- 圓形 <circle>
- 橢圓 <ellipse>
- 線 <line>
- 折線 <polyline>
- 多邊形 <polygon>
- 路徑 <path>
<rect> 標(biāo)簽
????? x : 矩形的左側(cè)位置（例如，x="0" 定義矩形到瀏覽器窗口左側(cè)的距離是 0px）;
????? y : 矩形的頂端位置（例如，y="0" 定義矩形到瀏覽器窗口頂端的距離是 0px）;
????? rx 和 ry : 可使矩形產(chǎn)生圓角;
????? fill-opacity: 填充顏色透明度;
????? stroke-opacity: 定義筆觸顏色的透明度;
????? opacity: 屬性定義整個元素的透明值
<html> <svg width="100%" height="100%" version="1.1"> <rect x="20" y="20" rx="20" ry="20" width="250" height="100" style="fill:red;stroke:black; stroke-width:5;opacity:0.5"/> </svg> </html><circle> 標(biāo)簽
???? cx 和 cy 屬性定義圓點(diǎn)的 x 和 y 坐標(biāo)。如果省略 cx 和 cy，圓的中心會被設(shè)置為 (0, 0);
???? r 屬性定義圓的半徑。
<ellipse> 標(biāo)簽
cx 屬性定義圓點(diǎn)的 x 坐標(biāo);
cy 屬性定義圓點(diǎn)的 y 坐標(biāo);
rx 屬性定義水平半徑;
ry 屬性定義垂直半徑
<line> 標(biāo)簽
x1 屬性在 x 軸定義線條的開始;
y1 屬性在 y 軸定義線條的開始;
x2 屬性在 x 軸定義線條的結(jié)束;
y2 屬性在 y 軸定義線條的結(jié)束
<polygon> 標(biāo)簽
<polygon> : 創(chuàng)建含有不少于三個邊的圖形；
points : 定義多邊形每個角的 x 和 y 坐標(biāo)
<html><svg width="100%" height="100%" version="1.1"><polygon points="220,100 300,210 170,250 123,234" style="fill:#cccccc; stroke:#000000;stroke-width:1"/></svg> </html>?<polyline> 標(biāo)簽
用來創(chuàng)建僅包含直線的形狀
<html><svg width="100%" height="100%" version="1.1"><polyline points="0,0 0,20 20,20 20,40 40,40 40,60" style="fill:white;stroke:red;stroke-width:2"/></svg> </html><path> 標(biāo)簽
用來定義路徑
- 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
注釋：以上所有命令均允許小寫字母。大寫表示絕對定位，小寫表示相對定位。
??? 定義了一條路徑，它開始于位置 250 150，到達(dá)位置 150 350，然后從那里開始到 350 350，最后在 250 150 關(guān)閉路徑。
<html> <svg width="100%" height="100%" version="1.1"><path d="M250 150 L150 350 L350 350 Z" /> </svg> </html>??? 創(chuàng)建了一個螺旋：
<html> <svg width="100%" height="100%" version="1.1"><path d="M153 334C153 334 151 334 151 334C151 339 153 344 156 344C164 344 171 339 171 334C171 322 164 314 156 314 C142 314 131 322 131 334 C131 350 142 364 156 364C175 364 191 350 191 334C191 311 175 294 156 294C131 294 111 311 111 334C111 361 131 384 156 384C186 384 211 361 211 334C211 300 186 274 156 274" style="fill:white;stroke:red;stroke-width:2"/></svg> </html>很復(fù)雜吧？是的！！！由于繪制路徑的復(fù)雜性，因此還是使用 SVG 編輯器來創(chuàng)建復(fù)雜的圖形。
?
轉(zhuǎn)載于:https://www.cnblogs.com/Chrimisia/p/6669754.html
總結(jié)
以上是生活随笔為你收集整理的SVG 基础知识 回顾的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： springsession 实现sess
- 下一篇： WEB接口测试之Jmeter接口测试自动