SVG <circle>
SVG 圆形 - <circle>
<circle> 元素用于创建圆形。
<circle> 元素有三个基本属性来定位和设置圆的大小
| Attribute | 描述 |
|---|---|
| r | 必需。圆的半径 |
| cx | 圆的 x 轴中心。默认值为 0 |
| cy | 圆的 y 轴中心。默认值为 0 |
一个 SVG 圆形
以下示例创建一个圆
这是 SVG 代码
示例
<svg height="100" width="100" xmlns="http://www.w3.org/2000/svg">
<circle r="45" cx="50" cy="50" fill="red" />
</svg>
自己动手试一试 »
代码解释
r属性定义了圆的半径cx和cy属性定义了圆的 x 轴和 y 轴中心。如果省略它们，圆的中心将设置为 (0,0)fill属性定义了圆的颜色
带边框的 SVG 圆形
以下示例创建一个带边框的圆
这是 SVG 代码
示例
<svg height="100" width="100" xmlns="http://www.w3.org/2000/svg">
<circle r="45" cx="50" cy="50" fill="red" stroke="green" stroke-width="3" />
</svg>
自己动手试一试 »
代码解释
stroke属性定义了圆周围边框的颜色stroke-width属性定义了圆周围边框的宽度
带透明度的 SVG 圆形
以下示例创建一个带透明度的圆
这是 SVG 代码
示例
<svg height="100" width="100" xmlns="http://www.w3.org/2000/svg">
<circle r="45" cx="50" cy="50" fill="red" stroke="green" stroke-width="3" opacity="0.5" />
</svg>
自己动手试一试 »
代码解释
opacity属性定义了圆的透明度
