svg基础教程

最新推荐文章于 2024-07-31 16:50:09 发布

一个程序

最新推荐文章于 2024-07-31 16:50:09 发布

阅读量271

点赞数

分类专栏： svg 文章标签： html 前端

本文链接：https://blog.csdn.net/jibuyueqian/article/details/126766558

版权

本文是SVG的基础教程，讲解了如何使用`<g>`标签进行元素分组，实现图形的整体移动。通过实例展示了如何画靶心并利用`transform`属性改变圆的半径。同时，探讨了`<text>`标签的使用，包括如何调整文字位置和实现文字居中。

摘要由CSDN通过智能技术生成

`<g>`标签

是一个分组标签，用来组合元素的
例子：做靶心（画多个圆）
共用属性
transform="translate(0,0)

<svg version="1.1"
  baseProfile="full"
  width="300" height="200"
  xmlns="http://www.w3.org/2000/svg">
   <circle cx="100" cy="50" r="40" stroke="red" stroke-width="2" fill="transparent" />
   <circle cx="100" cy="50" r="30" stroke="red" stroke-width="2" fill="transparent" />
   <circle cx="100" cy="50" r="20" stroke="red" stroke-width="2" fill="transparent" />
   <circle cx="100