SVG <circle>
SVG 圆形 - <circle>
The <circle> 元素用于创建圆形。
The <circle> 元素具有三个基本属性来定位和设置圆形的大小
| 属性 | 描述 |
|---|---|
| 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>
自己尝试 »
代码解释
- The
r属性定义了圆形的半径 - The
cx和cy属性定义了圆形在 x 轴和 y 轴上的中心。如果省略，圆形的中心将设置为 (0,0) - The
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>
自己尝试 »
代码解释
- The
stroke属性定义了圆形周围边框的颜色 - The
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>
自己尝试 »
代码解释
- The
opacity属性定义了圆形的透明度
