请马上登录，朋友们都在花潮里等着你哦：）
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 马黑黑 于 2023-11-11 19:59 编辑
g 是 group（分组）的第一个字母，g 标签出于排版需求，将一个或一些标签当成自己的子元素包裹在其内，并能为子元素设置必要的属性和样式。代码结构演示如下：
<svg width="600" height="600" viewBox="-300 -300 600 600">
<g transform="rotate(0)" style="fill: lightgreen; stroke: orange;">
<path d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
</g>
</svg>
g 标签里只有一个path路径，这其实是 MDN花朵示例的一个简化版花瓣，我将其多重路径改写成了单一路径。该路径的父元素是 g 标签，g 标签里有一个 transform 属性和一个内联 style CSS样式。
或许你会问：一个路径又何必要分组？有必要，比如MDN花朵示例，它就是由众多的、内容完全一样的 path 路径组成，每一组 path 路径通过 g 标签定义旋转角度，最后形成完美图案。该示例所设计的图案需要 20 组，每一组需要旋转 360/20=18（度），就在 transform 属性里体现出来。下面我们画出完整图案的四分之一，也就是复制上述的六个 g 标签，每一个 g 标签的 transform 属性的 rotate 值按 18 递增：
如果愿意，可以写 20 份 g 标签，图案就是完整的。然后再复制 20 份 g 标签，并给 transform属性加上 scale(0.33) 参数（放在 rotate 之后，用空格隔开）、使用不同颜色填充（fill）和（描边） ，MDN示例的图案就出来了。
【小结】本帖介绍 svg 的 g 标签，该标签用于分组，将不同的图案集合在一个小组里，这些图案可以使用 g 标签定义的属性和样式。借助 g 标签，我们同时解析了MDN花朵示例的主图案构成。
| 
发表于 2023-11-11 19:54
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
楼主
