有使用过svg吗?请用svg画一个圆

是的,我使用过 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 画布,widthheight 属性设置画布大小。
  • <circle> 标签: 用于绘制圆形。
  • cxcy 属性: 定义圆心的 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

posted @   王铁柱6  阅读(64)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
点击右上角即可分享
微信分享提示