溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》

如何使用SVG中<ellipse>元素畫(huà)橢圓

發(fā)布時(shí)間：2021-09-13 17:57:37 來(lái)源：億速云 閱讀：141 作者：小新 欄目：web開(kāi)發(fā)

這篇文章將為大家詳細(xì)講解有關(guān)如何使用SVG中<ellipse>元素畫(huà)橢圓，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

SVG <ellipse>元素用于繪制橢圓。橢圓是高度和寬度不相等的圓。換句話說(shuō)，它在x和y方向上的半徑是不同的。

一、SVG橢圓示例

示例（畫(huà)橢圓 ）：

<!DOCTYPE html> <html>     <head>         <meta charset="utf-8">         <title>項(xiàng)目</title>     </head>     <body style="background-color: aqua; ">         <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">          <ellipse cx="40" cy="40" rx="30" ry="15" style="stroke:#006600; fill:#FF0000" />          </svg>     </body> </html>

運(yùn)行后的結(jié)果:

解析：

橢圓cx , cy像圓一樣居中。

但是x和y方向上的半徑由兩個(gè)屬性（而不是一個(gè)）指定：rx和ry屬性。就像看到rx 屬性具有比該ry屬性具有更高的值，從而使橢圓寬于其高度。將rx和ry屬性設(shè)置為相同的數(shù)字將生成圓圈。

1. stroke-width邊框?qū)挾仍O(shè)置

可以使用 style屬性 stroke-width設(shè)置橢圓的邊框?qū)挾取?/p>

例：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">             <ellipse cx="50" cy="50" rx="40" ry="30" style="stroke: #ff0000;stroke-width: 5;fill: none;" />         </svg>

運(yùn)行后結(jié)果圖像:

如何使用SVG中<ellipse>元素畫(huà)橢圓

二、虛線邊框橢圓

還可以使用style屬性stroke-dasharray使橢圓的筆劃變?yōu)樘摼€。

例：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">             <ellipse cx="50" cy="50" rx="40" ry="30" style="stroke: #ff0000;stroke-width: 5;                  stroke-dasharray: 10 5;fill: none;" />         </svg>

本示例將虛線寬度設(shè)置為10，虛線空間（虛線之間的間隔）設(shè)置為5。

這是渲染橢圓時(shí)的外觀 :

如何使用SVG中<ellipse>元素畫(huà)橢圓

三、透明邊框

可以使用style屬性stroke-opacity使SVG橢圓的邊框變?yōu)榘胪该鳌?/p>

例：

<svg height="120">     <ellipse cx="50" cy="50" rx="40" ry="30"              style="stroke: #ff0000;                    stroke-width: 5;                    fill: none;"></ellipse>      <ellipse cx="60" cy="60" rx="40" ry="30"              style="stroke: #0000ff;                    stroke-width: 5;                    stroke-opacity: 0.5;                    fill: none;">     </ellipse> </svg>

代碼運(yùn)行后SVG橢圓效果如下:

如何使用SVG中<ellipse>元素畫(huà)橢圓

注意

第二個(gè)（藍(lán)色）橢圓是透明的，以及如何通過(guò)其筆劃看到紅色的橢圓。

四、橢圓填充

可以使用fill樣式屬性來(lái)填充橢圓。

例：

<svg height="120"> <ellipse cx="50" cy="50" rx="40" ry="30" style="stroke: #ff0000;          stroke-width: 5;                fill: #ff6666;"/> </svg>

運(yùn)行后SVG橢圓的外觀 :

如何使用SVG中<ellipse>元素畫(huà)橢圓

五、填充有透明度

fill-opacity樣式屬性可被用來(lái)設(shè)置一個(gè)橢圓的填充顏色的不透明度（透明性）。

例：

<svg height="120">             <ellipse cx="50" cy="50" rx="40" ry="30" style="stroke: #ff0000;                        stroke-width: 5;                        fill: none;"></ellipse>              <ellipse cx="60" cy="60" rx="40" ry="30" style="stroke: none;                        fill: #0000ff;                        fill-opacity: 0.5;">       </ellipse>         </svg>

橢圓在渲染時(shí)的外觀效果圖如下:

如何使用SVG中<ellipse>元素畫(huà)橢圓

注意

第二個(gè)（藍(lán)色）橢圓是半透明的，從而使紅色的橢圓可見(jiàn)。

關(guān)于“如何使用SVG中<ellipse>元素畫(huà)橢圓”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

svg
AI
助
手