SVG 繪製橢圓

2021-10-13 10:47:12 字數 1379 閱讀 3228

本節我們來學習如何在 svg 中繪製橢圓,橢圓和圓形有點像,但是又不一樣。圓形只有乙個半徑,而橢圓x軸和y軸上的半徑不同,所以橢圓就是乙個不規則的圓。

如何繪製乙個橢圓

在繪製橢圓時, 可以通過cxcy屬性確定橢圓的圓心,rx設定橢圓的x軸的半徑,ry設定y軸的半徑。

示例:例如下面這個例子:

>

>

charset

="utf-8"

>

>

svg學習(9xkd.com)title

>

rel=

"stylesheet"

type

="text/css"

href

="./style.css"

>

head

>

>

在瀏覽器中的演示效果:

上述**中,我們設定了橢圓的圓心為(100,50),水平半徑為50,垂直半徑為30。如果將rxry的值設定為相同的值,則會繪製乙個規則的圓。

給橢圓設定透明度

如果我們要設定橢圓的透明度,可以使用opacity屬性,這個屬性的取值範圍為 0 到 1 之間的小數。

示例:例如下面這段**中:

>

>

charset

="utf-8"

>

>

svg學習(9xkd.com)title

>

rel=

"stylesheet"

type

="text/css"

href

="./style.css"

>

head

>

>

在瀏覽器中的演示效果:

我們繪製了兩個橢圓,其中左邊的橢圓沒有設定填充顏色,而右邊的橢圓填充顏色為藍色,透明度為 0.5。如果要改變橢圓的位置,只需要改變橢圓的圓心座標,即cxcy屬性的值即可。

SVG 繪製橢圓

本節我們來學習如何在 svg 中繪製橢圓,橢圓和圓形有點像,但是又不一樣。圓形只有乙個半徑,而橢圓x軸和y軸上的半徑不同,所以橢圓就是乙個不規則的圓。如何繪製乙個橢圓 在繪製橢圓時,可以通過cx和cy屬性確定橢圓的圓心,rx設定橢圓的x軸的半徑,ry設定y軸的半徑。示例 例如下面這個例子 chars...

SVG基礎 繪製SVG矩形

乙個元素代表乙個svg矩形。通過這個元素你可以畫出不同寬度,不同高度,以及不同描邊和不同填充顏色的矩形。同時它還可以繪製直角或圓角的矩形。乙個svg矩形的簡單例子 下面是乙個繪製svg矩形的簡單例子。複製 svg矩形的位置由x和y屬性決定。請記住,這個位置是相對於任何它最接近的父元素的位置。svg矩...

繪製圓心 SVG 繪製圓形

本節我們來學習如何在 svg 中繪製圓形,圓形也是 svg 的基本形狀之一,我們可以通過元素來繪製原型。要繪製圓形可以通過元素來實現,在繪製圓形時,我們需要確定這個圓的圓心及半徑。其中確定圓心需要用到cx屬性和cy屬性,半徑需要用到r屬性。除此之外,還可以使用fill屬性圓進行顏色填充,stroke...