SVG 绘制椭圆

旧巷老猫 提交于 2021-01-26 18:20:46

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

如何绘制一个椭圆

在绘制椭圆时, 可以通过 cxcy 属性确定椭圆的圆心,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。如果将 rxry 的值设置为相同的值,则会绘制一个规则的圆。

给椭圆设置透明度

如果我们要设置椭圆的透明度,可以使用 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。如果要改变椭圆的位置,只需要改变椭圆的圆心坐标,即 cxcy 属性的值即可。

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

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!