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>
效果如下: