SVG 基础教程

SVG 形状

SVG 滤镜

SVG 渐变

SVG 参考

original icon
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.knowledgedict.com/tutorial/svg-ellipse.html

SVG 椭圆 <ellipse>


SVG 通过 <ellipse> 元素创建一个椭圆。椭圆与圆很相似。不同之处在于椭圆有不同的 x 和 y 半径,而圆的 x 和 y 半径是相同的。

属性

属性 说明
cx 定义椭圆的中心 x 坐标(例如,cx="20" 定义圆形圆心到浏览器窗口左侧的距离是 20px),如果省略,则默认为0
cy 定义椭圆的中心 y 坐标(例如,cy="20" 定义圆形圆心到浏览器窗口顶端的距离是 20px),如果省略,则默认为0
rx 定义椭圆的水平半径
ry 定义椭圆的垂直半径
fill 属于 style 属性,图形内部会使用 fill 属性代表的颜色进行填充,如果没有指定 fill 颜色(rgb 值、颜色名或者十六进制值),则会使用黑色填充,也可以指定为 none,即不填充图形内部,保持透明
fill-opacity 属于 style 属性,定义填充颜色透明度(合法的范围是:0 - 1)
stroke 定义图形边框的颜色
stroke-width 定义图形边框的宽度
stroke-opacity 定义轮廓颜色的透明度(合法的范围是:0 - 1)
opacity 定义元素的透明值(合法的范围是:0 - 1)

示例

<svg width="320px" height="180px" viewBox="0 0 200 200">
  <ellipse cx="30" cy="100" rx="60" ry="40" style="stroke: black; fill: none;"/>
  <ellipse cx="180" cy="100" rx="60" ry="30" style="stroke: black; fill: none;"/>
</svg>

效果如下: