SVG circle

SVG Circle技术文档

概述

SVG（Scalable Vector Graphics）是一种基于XML的矢量图形标准，支持高质量缩放且无损失的图像渲染。在SVG中，使用<circle>标签来绘制圆形。<circle>标签的用法和属性如下：

<svg>
    <circle cx="x" cy="y" r="radius" fill="color" stroke="color" stroke-width="width" />
</svg>
  • cx：圆心的x坐标
  • cy：圆心的y坐标
  • r：圆的半径
  • fill：填充颜色
  • stroke：边框颜色
  • stroke-width：边框宽度

属性

cx和cy属性

cx和cy属性表示圆的圆心坐标。如果只指定cx属性，那么cy属性默认与cx属性相等。如果没有指定cx或cy属性，默认为0。

<svg>
    <circle cx="50" cy="50" r="30"/>
</svg>

上述代码将绘制一个圆心坐标为(50,50)，半径为30的圆形。

r属性

r属性表示圆的半径。r属性的值必须大于0。如果r属性为负数，则无法绘制圆形。

<svg>
    <circle cx="50" cy="50" r="30"/>
</svg>

上述代码将绘制一个圆半径为30的圆形。

fill属性

fill属性表示要填充的颜色。可以使用命名颜色或十六进制颜色。

<svg>
    <circle cx="50" cy="50" r="30" fill="red"/>
</svg>

上述代码将绘制一个红色填充的圆形。

stroke属性

stroke属性表示边框的颜色。可以使用命名颜色或十六进制颜色。

<svg>
    <circle cx="50" cy="50" r="30" fill="white" stroke="black" stroke-width="2"/>
</svg>

上述代码将绘制一个白色填充、黑色边框、宽度为2的圆形。

stroke-width属性

stroke-width属性表示边框的宽度。

<svg>
    <circle cx="50" cy="50" r="30" fill="white" stroke="black" stroke-width="2"/>
</svg>

上述代码将绘制一个白色填充、黑色边框、宽度为2的圆形。

示例代码

<svg>
    <circle cx="50" cy="50" r="30"/>
</svg>

<svg>
    <circle cx="50" cy="50" r="30" fill="red" stroke="black" stroke-width="2"/>
</svg>

结论

使用SVG<circle>标签可以轻松绘制圆形。圆心和半径属性允许您控制形状的大小和位置，同时fill和stroke属性可帮助您自定义颜色和边框。通过更改各个属性的值，可以创建各种不同大小、颜色和样式的圆形。

svg教程 SVG ellipse