前端必備知識點—SVG
基本內容
什麼是SVG? 全稱為Scalable Vector Graphics,是一種使用XML技術描述二維圖形的語言,簡單來說 - 矢量圖(不失真)
SVG與HTML5的關係
早在HTML5之前,存在SVG技術
SVG文件擴展名為".svg"
在HTML5出現之前,要在HTML頁面中引入SVG文件
在HTML5出現之後,將SVG內容直接定義在HTML頁面中
SVG的優勢
可以使用文本編輯器創建和修改,SVG可被搜索、索引等,SVG繪製的圖像不失真的
SVG與Canvas的區別
SVG不依賴於解析度,使用DOM或綁定事件,實現大型渲染區域的應用(地圖類)
Canvas依賴於解析度,不能使用DOM或綁定事件的,運行時以圖片形式出現".jpg"
SVG的標準也是W3C定製的
設置樣式
1.通過元素的屬性方式
fill - 設置填充樣式
fill-opacity - 設置填充透明度
stroke - 設置描邊樣式
stroke-width - 設置邊框的寬度
2.通過style屬性,使用類似於CSS屬性設置方式
注意 - 不能使用CSS中的樣式進行設置
transform屬性,用於設置轉換效果
方法有:rotate()、scale()、translate()
繪製圖形
矩形元素- <rect>元素
<rect x="" y="" width="" height="" rx="" ry="" />
x和y - 繪製矩形的左上角坐標值
width和height - 設置繪製矩形的寬度和高度
rx和xy - 設置圓角矩形
圓形元素 - <circle>元素
<circle cx="" cy="" r="" />
cx和cy - 繪製圓形的圓心坐標值
cx和cy不設置值的話,默認為(0,0)
r - 繪製圓形的半徑
橢圓元素- <ellipse>元素
<ellipse cx="" cy="" rx="" ry="" />
cx和cy - 繪製橢圓的圓心坐標值
rx - 繪製橢圓的水平方向的半徑
ry - 繪製橢圓的垂直方向的半徑
注意:當rx和ry的值相同時,繪製的是圓形
線條元素- <line>元素
<line x1="" y1="" x2="" y2="" />
x1和y1 - 繪製直線的起點坐標值
x2和y2 - 繪製直線的終點坐標值
注意:繪製直線時,默認描邊顏色為白色
折線元素 - <ployline>元素
<polyline points="" />
points - 折線的所有點坐標值,都設置在該屬性中
注意:描邊顏色默認為白色,填充顏色默認為黑色
多邊形元素- <polygon>元素
<polygon points="" />
points - 折線的所有點坐標值,都設置在該屬性中
注意: SVG繪製圖形使用元素
單標籤 - 增加結束符"/"
起始標籤
特效元素
線性漸變 - 基準線
<defs>
<linearGradient id="grad" x1="基準線的起點坐標值x" y1="基準線的起點坐標值y" x2="基準線的終點坐標值x" y2="基準線的終點坐標值y">
<stop offset="0%~100%" stop-color="顏色" />
</linearGradient>
</defs>
<rect fill="url(#漸變元素的id)">
射線漸變 - 基準圓
<defs>
<radialGradient id="grad" fx="設置起點基準圓的圓心x" fy="設置起點基準圓的圓心y" cx="設置終點基準圓的圓心x" cy="設置終點基準圓的圓心y" r="設置終點基準圓的半徑">
<stop offset="0%~100%" stop-color="顏色" />
</radialGradient>
</defs>
<rect fill="url(#漸變元素的id)">
注意:線性漸變或射線漸變,設置基準線(圓)的坐標值必須是百分值,允許為負值,允許為大於 100% 的值
設置漸變顏色位置必須是百分值
只能是從 0% ~ 100%
濾鏡元素 - 高斯模糊
濾鏡元素 - <filter>元素
高斯模糊 - <feGaussianBlur>元素
![](https://pic.pimg.tw/zzuyanan/1488615166-1259157397.png)
![](https://pic.pimg.tw/zzuyanan/1482887990-2595557020.jpg)
※JSP和Servlet初級知識點總結
※負載均衡zookpeer之輪詢演算法
TAG:程序員小新人學習 |