前端必備知識點—SVG

什麼是SVG? 全稱為Scalable Vector Graphics，是一種使用XML技術描述二維圖形的語言，簡單來說 - 矢量圖(不失真)

早在HTML5之前,存在SVG技術

SVG文件擴展名為".svg"

在HTML5出現之前,要在HTML頁面中引入SVG文件

在HTML5出現之後,将SVG内容直接定義在HTML頁面中

SVG的優勢

可以使用文本編輯器創建和修改，SVG可被搜索、索引等，SVG繪制的圖像不失真的

SVG不依賴于分辨率，使用DOM或綁定事件，實現大型渲染區域的應用(地圖類)

Canvas依賴于分辨率，不能使用DOM或綁定事件的，運行時以圖片形式出現".jpg"

SVG的标準也是W3C定制的

1.通過元素的屬性方式

fill - 設置填充樣式

fill-opacity - 設置填充透明度

矩形元素- <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>元素

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!