是的,我使用过 SVG。以下是一个用 SVG 绘制圆形的代码,可以直接在 HTML 文件中使用:
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
这段代码会在 100x100 像素的区域内绘制一个圆形。
<svg>
标签: 定义 SVG 画布,width
和height
属性设置画布大小。<circle>
标签: 用于绘制圆形。cx
和cy
属性: 定义圆心的 x 和 y 坐标。这里是 50,50,使圆心位于画布中心。r
属性: 定义圆的半径。这里是 40。stroke
属性: 定义圆边线的颜色,这里是绿色。stroke-width
属性: 定义圆边线的宽度,这里是 4 像素。fill
属性: 定义圆的填充颜色,这里是黄色。
你可以根据需要修改这些属性的值来改变圆的大小、颜色、边框等。例如,要创建一个红色、没有边框的实心圆:
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" fill="red" stroke="none" />
</svg>
或者,一个蓝色、虚线边框的空心圆:
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="blue" stroke-width="4" fill="none" stroke-dasharray="5,5"/>
</svg>
希望这些例子能帮助你理解如何使用 SVG 绘制圆形。 更多 SVG 的信息可以参考 MDN Web Docs。
标签:定义,SVG,svg,请用,画布,使用,绘制,属性 From: https://www.cnblogs.com/ai888/p/18566066