SVG 基礎(chǔ)圖形

SVG包含了以下的基礎(chǔ)圖形元素：

• 矩形（包括可選的圓角），使用<rect>元素創(chuàng)建
• 圓形，使用<circle>元素創(chuàng)建
• 橢圓形，使用<ellipse>元素創(chuàng)建
• 直線，使用<line>元素創(chuàng)建
• 折線，使用<polyline>元素創(chuàng)建
• 多邊形，使用<polygon>元素創(chuàng)建

理論上，這些基礎(chǔ)圖形元素都能用<path>元素來構(gòu)建的相同的圖形。并且所有可用于<path>元素的屬性都可以應(yīng)用在這些基礎(chǔ)圖形上。

rect 元素

<rect>元素定義了一個(gè)與當(dāng)前用戶坐標(biāo)系軸對(duì)齊的矩形。而圓角的矩形可以通過設(shè)置元素的 rx 和 ry屬性來實(shí)現(xiàn)。

屬性定義：

• x = <坐標(biāo)點(diǎn)>，矩形左上角在當(dāng)前用戶坐標(biāo)系中的x軸坐標(biāo)，默認(rèn)值為0。是否可動(dòng)畫：是。
• y = <坐標(biāo)點(diǎn)>，矩形左上角在當(dāng)前用戶坐標(biāo)系中的y軸坐標(biāo)，默認(rèn)值為0。是否可動(dòng)畫：是。
• width = <長度>，矩形寬度，默認(rèn)值為0。是否可動(dòng)畫：是。
• height = <長度>，矩形高度，默認(rèn)值為0。是否可動(dòng)畫：是。
• rx = <長度>，矩形X軸的圓角半徑，默認(rèn)值為0。是否可動(dòng)畫：是。
• ry = <長度>，矩形y軸的圓角半徑，默認(rèn)值為0。是否可動(dòng)畫：是。

圓角規(guī)則：

rx和ry必須是一個(gè)長度值。

如果沒有對(duì)rx和ry給出定義，那么它們都會(huì)被設(shè)為0。 (這樣他們會(huì)是一個(gè)尖角的矩形)

如果只對(duì)rx進(jìn)行了賦值，那么ry會(huì)自動(dòng)被設(shè)置為與rx相等的值。

如果只對(duì)ry進(jìn)行了賦值，那么rx會(huì)自動(dòng)被設(shè)置為與ry相等的值。

如果rx的值大于自身寬度的一半，那么它會(huì)被設(shè)置為自身寬度一半。

如果ry的值大于自身高度的一半，那么它會(huì)被設(shè)置為自身高度一半。

DEMO：

1 <svg xmlns="http://www.w3.org/2000/svg" width="300" height="200" viewBox="0 0 300 200" style="border:1px dashed #aaa;"> 2 <rect x="50" y="50" width="200" height="100" fill="#cd5c5c"></rect> 3 </svg> 4 <svg xmlns="http://www.w3.org/2000/svg" width="300" height="200" viewBox="0 0 300 200" style="border:1px dashed #aaa;"> 5 <rect x="50" y="50" rx="15" ry="15" width="200" height="100" fill="#cd5c5c"></rect> 6 </svg>

?

circle 元素

<circle>元素定義了一個(gè)圓形。

屬性定義：

• cx = <坐標(biāo)點(diǎn)>，圓心在當(dāng)前用戶坐標(biāo)系中的x軸坐標(biāo)，默認(rèn)值為0。是否可動(dòng)畫：是。
• cy = <坐標(biāo)點(diǎn)>，圓心在當(dāng)前用戶坐標(biāo)系中的y軸坐標(biāo)，默認(rèn)值為0。是否可動(dòng)畫：是。
• r = <長度>，圓的半徑。是否可動(dòng)畫：是。

DEMO:

1 <svg xmlns="http://www.w3.org/2000/svg" width="300" height="200" viewBox="0 0 300 200" style="border:1px dashed #aaa;"> 2 <circle cx="150" cy="100" r="70" fill="#cd5c5c"></circle> 3 </svg>

?

ellipse 元素

<ellipse>元素定義了一個(gè)橢圓。

屬性定義：

• cx = <坐標(biāo)點(diǎn)>，圓心在當(dāng)前用戶坐標(biāo)系中的x軸坐標(biāo)，默認(rèn)值為0。是否可動(dòng)畫：是。
• cy = <坐標(biāo)點(diǎn)>，圓心在當(dāng)前用戶坐標(biāo)系中的y軸坐標(biāo)，默認(rèn)值為0。是否可動(dòng)畫：是。
• rx = <長度>，圓的x軸半徑。是否可動(dòng)畫：是。
• ry = <長度>，圓的y軸半徑。是否可動(dòng)畫：是。

DEMO：

?

line 元素

<line>元素定義了一個(gè)處于兩點(diǎn)之間的直線。

屬性定義：

• x1 = <坐標(biāo)點(diǎn)>，起點(diǎn)在當(dāng)前用戶坐標(biāo)系中的x軸坐標(biāo)，默認(rèn)值為0。是否可動(dòng)畫：是。
• y1 = <坐標(biāo)點(diǎn)>，起點(diǎn)在當(dāng)前用戶坐標(biāo)系中的y軸坐標(biāo)，默認(rèn)值為0。是否可動(dòng)畫：是。
• x2 = <坐標(biāo)點(diǎn)>，終點(diǎn)在當(dāng)前用戶坐標(biāo)系中的x軸坐標(biāo)，默認(rèn)值為0。是否可動(dòng)畫：是。
• y2 = <坐標(biāo)點(diǎn)>，終點(diǎn)在當(dāng)前用戶坐標(biāo)系中的x軸坐標(biāo)，默認(rèn)值為0。是否可動(dòng)畫：是。

因?yàn)閘ine元素在幾何關(guān)系上是一個(gè)一維的圖形，所以它沒有內(nèi)部的這個(gè)概念，也無法在該元素上使用fill屬性。

DEMO：

1 <svg xmlns="http://www.w3.org/2000/svg" width="300" height="200" viewBox="0 0 300 200" style="border:1px dashed #aaa;"> 2 <line x1="50" y1="50" x2="250" y2="150" stroke-width="5" stroke="#cd5c5c" /> 3 </svg>

?

polyline 元素

<polyline>元素定義了一個(gè)由多條相連的直線段而成的非閉合圖形。

屬性定義：

• points = <多組的坐標(biāo)點(diǎn)>，由points屬性中的坐標(biāo)點(diǎn)相連而成的圖形。

DEMO：

1 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="200" viewBox="0 0 300 200" style="border:1px dashed #aaa;"> 2 <polyline fill="none" stroke="#cd5c5c" stroke-width="5" points="50,50 260,50 260,150 50,150" /> 3 </svg>

?

polygon 元素

<polygon>元素定義了一個(gè)由多條相連的直線段而成的閉合圖形。

屬性定義：

• points = <多組的坐標(biāo)點(diǎn)>，與<polyline>元素相同，也是由points屬性中的坐標(biāo)點(diǎn)相連而成的圖形，但起始點(diǎn)也會(huì)相連。

DEMO：

1 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="200" viewBox="0 0 300 200" style="border:1px dashed #aaa;"> 2 <polygon fill="none" stroke="#cd5c5c" stroke-width="5" points="50,50 260,50 260,150 50,150" /> 3 </svg>

?

轉(zhuǎn)載于:https://www.cnblogs.com/WhiteCusp/p/4170616.html

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

總結(jié)

以上是生活随笔為你收集整理的SVG 基础图形的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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