SVG 教程
1. SVG 教程 2. SVG 简介 3. SVG 实例 4. SVG 在 HTML 中 5. SVG 矩形 6. SVG 圆形 7. SVG 椭圆 8. SVG 直线 9. SVG 多边形 10. SVG 曲线 11. SVG 路径 12. SVG 文本 13. SVG Stroke 属性 14. SVG 滤镜 15. SVG 模糊效果 – 高斯模糊 16. SVG 阴影 17. SVG 渐变 – 线性 18. SVG 渐变- 放射性 19. SVG 参考手册

SVG 圆形

SVG <circle>


SVG 圆形 - <circle>

<circle> 标签可用来创建一个圆:

下面是SVG代码:

实例

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle cx="100" cy="50" r="40" stroke="black"
  stroke-width="2" fill="red"/>
</svg>

55面试教程网 »

对于Opera用户:查看SVG文件(右键单击SVG图形预览源)。

代码解析:

  • cx和cy属性定义圆点的x和y坐标。如果省略cx和cy,圆的中心会被设置为(0, 0)
  • r属性定义圆的半径