组和符号之间有什么区别？

Question

首先，让我们看看什么是组和什么是符号。

• <g>组是container used to group other SVG elements。
• 一个<symbol>是used to define graphical template objects。

然后，让我们找出它们的共同点。

• 它们都包装了其他元素的集合。
• 它们都可以用<use>引用。

关于它们的功能，仅此而已。这两个元素都不是自己绘制的。

那么，有什么区别和何时优先选择一个？

Answer 1

<symbol>的内容未直接呈现

除非<g>本身未呈现，否则将直接呈现<g>的内容。例如。 <g>是否在符号中。

所以，如果你写了类似的东西

<svg>
    <g id="g">
       <rect id="g-rect" .../>
    </g>
    <symbol id="s">
       <rect id="symbol-rect" .../>
    </symbol>
    <use href="#g" transform="translate(100,100)" />
    <use href="#s"/>
</svg>

我们将看到渲染了3个rect元素，g-rect将显示两次，一次是通过<g>元素，一次是通过<use>引用。矩形符号只能显示一次，即通过<use>元素。

symbol元素还支持viewBox和preserveAspectRatio属性，而g元素则不支持。

SVG specification does document this ...

“符号”和“ g”之间的主要区别是：

• “符号”元素本身未呈现。仅呈现“符号”元素的实例（即“使用”元素对“符号”的引用）。
• “ symbol”元素具有“ viewBox”和“ preserveAspectRatio”属性，这些属性允许“ symbol”缩放以适合引用“ use”元素所定义的矩形视口。