SVG 绘制椭圆 | 易学教程

本节我们来学习如何在 SVG 中绘制椭圆，椭圆和圆形有点像，但是又不一样。圆形只有一个半径，而椭圆 x 轴和 y 轴上的半径不同，所以椭圆就是一个不规则的圆。

如何绘制一个椭圆

在绘制椭圆时，可以通过 cx 和 cy 属性确定椭圆的圆心，rx 设置椭圆的 x 轴的半径，ry 设置 y 轴的半径。

示例：

例如下面这个例子：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>SVG学习(9xkd.com)</title>
        <link rel="styleSheet" type="text/css" href="./style.css">
    </head>
    <body>
        <svg>
            <ellipse  cx="100" cy="50" rx="50" ry="30" style="fill:red;"/>
        </svg>
    </body>
</html>

在浏览器中的演示效果：

上述代码中，我们设置了椭圆的圆心为 (100,50)，水平半径为50，垂直半径为 30。如果将 rx 和 ry 的值设置为相同的值，则会绘制一个规则的圆。

给椭圆设置透明度

如果我们要设置椭圆的透明度，可以使用 opacity 属性，这个属性的取值范围为 0 到 1 之间的小数。

示例：

例如下面这段代码中：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>SVG学习(9xkd.com)</title>
        <link rel="styleSheet" type="text/css" href="./style.css">
    </head>
    <body>
        <svg>
            <ellipse  cx="100" cy="50" rx="50" ry="30" style="fill:none; stroke-width: 3; stroke:#b276be; "></ellipse>
            <ellipse  cx="150" cy="50" rx="50" ry="30" style="fill:#26c3df; opacity: 0.5;"></ellipse>
        </svg>
    </body>
</html>

在浏览器中的演示效果：我们绘制了两个椭圆，其中左边的椭圆没有设置填充颜色，而右边的椭圆填充颜色为蓝色，透明度为 0.5。如果要改变椭圆的位置，只需要改变椭圆的圆心坐标，即 cx 和 cy 属性的值即可。

链接：https://www.9xkd.com/

来源：oschina

链接：https://my.oschina.net/u/4144971/blog/4925654

标签

strip