SVG <ellipse> 画椭圆

SVG <ellipse>元素用于绘制椭圆。椭圆是高度和宽度不相等的圆。换句话说,它在x和y方向上的半径是不同的。

SVG椭圆示例

这是一个画椭圆的示例代码:

<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:#00cc00"/>

</svg>
测试看看 ‹/›

运行后的结果如下:

椭圆cx , cy像圆一样居中。但是x和y方向上的半径由两个属性(而不是一个)指定:rx和ry属性。就像您看到rx 属性具有比该ry属性具有更高的值,从而使椭圆宽于其高度。将rx和ry属性设置为相同的数字将生成圆圈。

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>
测试看看 ‹/›

椭圆在渲染时的外观如下:

注意第二个(蓝色)椭圆是半透明的,从而使红色的椭圆可见。