一篇文章教會你使用SVG <ellipse> 畫橢圓

作者：前端進階者 2020-12-01 09:36:35

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

一、SVG橢圓示例

示例（畫橢圓）：

<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="utf-8"> 
        <title>項目</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>

運行后的結果:

解析：

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

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

1. stroke-width邊框寬度設置

可以使用 style屬性 stroke-width設置橢圓的邊框寬度。

例：

<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>

運行后結果圖像:

二、虛線邊框橢圓

還可以使用style屬性stroke-dasharray使橢圓的筆劃變為虛線。

例：

<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>

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

這是渲染橢圓時的外觀 :

三、透明邊框

可以使用style屬性stroke-opacity使SVG橢圓的邊框變為半透明。

例：

<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>

代碼運行后SVG橢圓效果如下:

注意

第二個（藍色）橢圓是透明的，以及如何通過其筆劃看到紅色的橢圓。

四、橢圓填充

可以使用fill樣式屬性來填充橢圓。

例：

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

運行后SVG橢圓的外觀 :

五、填充有透明度

fill-opacity樣式屬性可被用來設置一個橢圓的填充顏色的不透明度（透明性）。

例：

<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>