SVG 圆形 <circle>
SVG 中的 <circle>
元素用于绘制圆形,它是SVG中常用的基本形状之一。
使用 <circle>
元素可以创建圆形的图形,并可以通过设置属性来控制圆形的位置、大小和样式。
基本语法
<circle cx="x-coordinate" <!-- 圆心的 x 坐标 --> cy="y-coordinate" <!-- 圆心的 y 坐标 --> r="radius" <!-- 圆的半径 --> fill="fill-color" <!-- 圆的填充颜色 --> stroke="stroke-color" <!-- 圆的描边颜色 --> stroke-width="width" <!-- 圆的描边宽度 --> />
属性解析:
cx
和cy
属性定义了圆心的坐标,即圆的中心点的位置。r
属性定义了圆的半径,以确定圆的大小。fill
属性定义了圆的填充颜色。stroke
属性定义了圆的描边颜色。stroke-width
属性定义了圆的描边宽度。
以下代码绘制了一个蓝色填充、黑色描边、半径为 50 像素的圆形,圆心坐标为 (100, 100)。
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <circle cx="100" cy="100" r="50" fill="blue" stroke="black" stroke-width="2" /> </svg>
实例
下面是 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>
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</svg>
尝试一下 »
点击查看:查看 SVG 文件。
代码解析:
- cx 和 cy 属性定义圆点的 x 和 y 坐标。如果省略 cx 和 cy,圆的中心会被设置为 (0, 0)
- r 属性定义圆的半径
点我分享笔记