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
属性可帮助您自定义颜色和边框。通过更改各个属性的值,可以创建各种不同大小、颜色和样式的圆形。