基本內(nèi)容

什么是SVG? 全稱(chēng)為Scalable Vector Graphics，是一種使用XML技術(shù)描述二維圖形的語(yǔ)言，簡(jiǎn)單來(lái)說(shuō) - 矢量圖(不失真)

SVG與HTML5的關(guān)系

早在HTML5之前,存在SVG技術(shù)

SVG文件擴(kuò)展名為".svg"

在HTML5出現(xiàn)之前,要在HTML頁(yè)面中引入SVG文件

在HTML5出現(xiàn)之后,將SVG內(nèi)容直接定義在HTML頁(yè)面中

SVG的優(yōu)勢(shì)

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

SVG與Canvas的區(qū)別

SVG不依賴(lài)于分辨率，使用DOM或綁定事件，實(shí)現(xiàn)大型渲染區(qū)域的應(yīng)用(地圖類(lèi))

Canvas依賴(lài)于分辨率，不能使用DOM或綁定事件的，運(yùn)行時(shí)以圖片形式出現(xiàn)".jpg"

SVG的標(biāo)準(zhǔn)也是W3C定制的

設(shè)置樣式

1.通過(guò)元素的屬性方式

fill - 設(shè)置填充樣式

fill-opacity - 設(shè)置填充透明度

stroke - 設(shè)置描邊樣式

stroke-width - 設(shè)置邊框的寬度

2.通過(guò)style屬性,使用類(lèi)似于CSS屬性設(shè)置方式

注意 - 不能使用CSS中的樣式進(jìn)行設(shè)置

transform屬性，用于設(shè)置轉(zhuǎn)換效果

方法有：rotate()、scale()、translate()

繪制圖形

矩形元素- <rect>元素

<rect x="" y="" width="" height="" rx="" ry="" />

x和y - 繪制矩形的左上角坐標(biāo)值

width和height - 設(shè)置繪制矩形的寬度和高度

rx和xy - 設(shè)置圓角矩形

圓形元素?- <circle>元素

<circle cx="" cy="" r="" />

cx和cy - 繪制圓形的圓心坐標(biāo)值

cx和cy不設(shè)置值的話,默認(rèn)為(0,0)

r - 繪制圓形的半徑

橢圓元素- <ellipse>元素

<ellipse cx="" cy="" rx="" ry="" />

cx和cy - 繪制橢圓的圓心坐標(biāo)值

rx - 繪制橢圓的水平方向的半徑

ry - 繪制橢圓的垂直方向的半徑

注意：當(dāng)rx和ry的值相同時(shí),繪制的是圓形

線條元素- <line>元素

<line x1="" y1="" x2="" y2="" />

x1和y1 - 繪制直線的起點(diǎn)坐標(biāo)值

x2和y2 - 繪制直線的終點(diǎn)坐標(biāo)值

注意：繪制直線時(shí),默認(rèn)描邊顏色為白色

折線元素?- <ployline>元素

<polyline points="" />

points - 折線的所有點(diǎn)坐標(biāo)值,都設(shè)置在該屬性中

注意：描邊顏色默認(rèn)為白色,填充顏色默認(rèn)為黑色

多邊形元素- <polygon>元素

<polygon points="" />

points - 折線的所有點(diǎn)坐標(biāo)值,都設(shè)置在該屬性中

注意： SVG繪制圖形使用元素

單標(biāo)簽 - 增加結(jié)束符"/"

起始標(biāo)簽

特效元素

線性漸變 - 基準(zhǔn)線

<defs>

<linearGradient id="grad" x1="基準(zhǔn)線的起點(diǎn)坐標(biāo)值x" y1="基準(zhǔn)線的起點(diǎn)坐標(biāo)值y" x2="基準(zhǔn)線的終點(diǎn)坐標(biāo)值x" y2="基準(zhǔn)線的終點(diǎn)坐標(biāo)值y">

<stop offset="0%~100%" stop-color="顏色" />

</linearGradient>

</defs>

<rect fill="url(#漸變?cè)氐膇d)">

射線漸變 - 基準(zhǔn)圓

<defs>

<radialGradient id="grad" fx="設(shè)置起點(diǎn)基準(zhǔn)圓的圓心x" fy="設(shè)置起點(diǎn)基準(zhǔn)圓的圓心y" cx="設(shè)置終點(diǎn)基準(zhǔn)圓的圓心x" cy="設(shè)置終點(diǎn)基準(zhǔn)圓的圓心y" r="設(shè)置終點(diǎn)基準(zhǔn)圓的半徑">

<stop offset="0%~100%" stop-color="顏色" />

</radialGradient>

</defs>

<rect fill="url(#漸變?cè)氐膇d)">

注意：線性漸變或射線漸變,設(shè)置基準(zhǔn)線(圓)的坐標(biāo)值必須是百分值，允許為負(fù)值，允許為大于 100% 的值

設(shè)置漸變顏色位置必須是百分值

只能是從 0% ~ 100%

濾鏡元素 - 高斯模糊

濾鏡元素 - <filter>元素

高斯模糊 - <feGaussianBlur>元素

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的前端必备知识点—SVG的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。