svg ：g 分组标签
本帖最后由 马黑黑 于 2023-11-11 19:59 编辑 <br /><br /><style>.ma p, .ma pre, .ma svg { margin: 8px 0; }
.rred { color: red; }
.bblue { color: blue; }
.zs { color: green; }
.ma pre { padding: 16px; background: #efefef; font: normal 16px monospace; white-space: pre-wrap; word-wrap: break-word; tab-size: 4; line-height:1.5em; }
.ma svg { border: 1px solid gray; }
#mysvg { width: 600px; height: 600px; }
#mysvg > g { fill: lightgreen; stroke: orange; }
</style>
<div class="ma">
<p>g 是 group（分组）的第一个字母，g 标签出于排版需求，将一个或一些标签当成自己的子元素包裹在其内，并能为子元素设置必要的属性和样式。代码结构演示如下：</p>
<pre>
<svg width="600" height="600" viewBox="-300 -300 600 600">
<g <span class="bblue">transform</span>="rotate(0)" <span class="bblue">style</span>="fill: lightgreen; stroke: orange;">
<path d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
</g>
</svg>
</pre>
<p>g 标签里只有一个path路径，这其实是 MDN花朵示例的一个简化版花瓣，我将其多重路径改写成了单一路径。该路径的父元素是 g 标签，g 标签里有一个 transform 属性和一个内联 style CSS样式。</p>
<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>
<p>或许你会问：一个路径又何必要分组？有必要，比如MDN花朵示例，它就是由众多的、内容完全一样的 path 路径组成，每一组 path 路径通过 g 标签定义旋转角度，最后形成完美图案。该示例所设计的图案需要 20 组，每一组需要旋转 360/20=18（度），就在 transform 属性里体现出来。下面我们画出完整图案的四分之一，也就是复制上述的六个 g 标签，每一个 g 标签的 transform 属性的 rotate 值按 18 递增：</p>
<svg id="mysvg" width="600" height="600" viewBox="-300 -300 600 600">
<g transform="rotate(0)">
<path d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
</g>
<g transform="rotate(18)">
<path d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
</g>
<g transform="rotate(36)">
<path d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
</g>
<g transform="rotate(54)">
<path d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
</g>
<g transform="rotate(72)">
<path d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />
</g>
</svg>
<p>如果愿意，可以写 20 份 g 标签，图案就是完整的。然后再复制 20 份 g 标签，并给 transform属性加上 scale(0.33) 参数（放在 rotate 之后，用空格隔开）、使用不同颜色填充（fill）和（描边） ，MDN示例的图案就出来了。</p>
<p>【小结】本帖介绍 svg 的 g 标签，该标签用于分组，将不同的图案集合在一个小组里，这些图案可以使用 g 标签定义的属性和样式。借助 g 标签，我们同时解析了MDN花朵示例的主图案构成。</p>
</div>
可以回帖了吧{:4_189:} 满满的知识点，小辣椒就是漏看许多这些重要的教程{:4_198:} 下午那朵漂亮的花就是有许多g 组成的啊？ 小辣椒 发表于 2023-11-11 20:31
下午那朵漂亮的花就是有许多g 组成的啊？
正是如此。当然，我这里简化了。 小辣椒 发表于 2023-11-11 20:28
可以回帖了吧
可以可以 小辣椒 发表于 2023-11-11 20:29
满满的知识点，小辣椒就是漏看许多这些重要的教程
g标签是最简单的 马黑黑 发表于 2023-11-11 20:40
正是如此。当然，我这里简化了。
漂亮的{:4_199:} 马黑黑 发表于 2023-11-11 20:41
g标签是最简单的
最简单的不学习也是不会的 马黑黑 发表于 2023-11-11 20:40
可以可以
刚才我一下子不敢回帖，怕你二楼有用的 小辣椒 发表于 2023-11-11 20:46
刚才我一下子不敢回帖，怕你二楼有用的
有用也没关系 小辣椒 发表于 2023-11-11 20:46
最简单的不学习也是不会的
那是自然，好歹要接触一下 小辣椒 发表于 2023-11-11 20:45
漂亮的
没有原版的细腻 马黑黑 发表于 2023-11-11 22:07
有用也没关系
那就插队了，这样影响队形的{:4_170:} 小辣椒 发表于 2023-11-11 22:32
那就插队了，这样影响队形的
{:4_190:} 马黑黑 发表于 2023-11-11 22:07
那是自然，好歹要接触一下
是的，感觉我还没有开窍，那些网络的直接取简单方便 马黑黑 发表于 2023-11-11 22:08
没有原版的细腻
我感觉已经很漂亮了 小辣椒 发表于 2023-11-11 22:33
我感觉已经很漂亮了
还好。 小辣椒 发表于 2023-11-11 22:33
是的，感觉我还没有开窍，那些网络的直接取简单方便
一步一步弄清楚才行 本帖最后由 马黑黑 于 2023-11-11 22:50 编辑 <br /><br />??