SVG“viewbox”应该在“symbol”中定义一次，还是每次“使用”SVG 时定义？

Question

根据我读过的一些教程，插入 SVG 时，只需在标签中定义一次<symbol>属性。<use>viewBox<symbol>

这名义上工作正常，但是元素的内容以相当大的系数<use>溢出父元素<svg>（显然总是父 sv​​g 元素大小的比例，尽管它似乎根据 CSS 样式而变化）。这似乎不会导致任何实际问题（溢出是隐藏的，因此没有不需要的滚动条或布局问题），但不知何故感觉“错误”。

然后是去年提出的一个问题viewbox的答案，该问题建议从<symbol>元素中完全删除该属性并在标签中声明它<svg>。以这种方式进行操作意味着所有内容都会按其应有的方式 100% 显示，但从我收集到的有关该标签的好处之一来看，<symbol>它应该意味着viewbox只需要声明一次，而不是在每次插入时都需要声明。

我制作了一个JSFiddle来尝试比较不同的用例。

有没有正确的做事方法？这种溢出是正常的并且可以忽略吗？或者我做的事情根本就是错误的吗？

编辑：看起来当viewbox仅在其中设置属性时<symbol>，它也会放大整个父 svg 标签。是否应该为每个显式设置 SVG 尺寸use？

Answer 1

TL;DR：如果您没有为 svg 标签指定任何 viewBox 属性，则无论height或width值如何，它都不会正确缩放。

因为同一个 SVG 中可以有多个符号，例如（简化代码）

<svg>
<use href="somePath#symbol1"></use>
<use href="somePath#symbol2"></use>
</svg>

每个符号可以有自己的大小*。现在，SVG 标签（根）还需要知道应使用哪个尺寸*。因此，您必须在 SVG 标签本身上设置一个 viewBox。

*我们不应该称其为“大小”，而应称为“区域”、“边界框”或简单地称为“视图框”

如果您只使用一个元件，您很可能会选择与目标元件相同的视图框。通过这种方式，SVG 将像<img>

<svg viewBox="0 0 32 32">
<use href="somePath#anIcon32x32"></use>
</svg>