html - SVG `viewbox` 应该在 `symbol` 中定义一次，还是每次 SVG 都是 `used` ？

Question

根据 some的 tutorials我读过，插入 SVG 时 <symbol>与 <use> viewBox属性只需要定义一次 - 在 <symbol> 中标签。

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

然后是 question 的答案去年在这里问哪个建议删除 viewbox来自 <symbol> 的属性(property)元素并在 <svg> 中声明它标签代替。以这种方式做事意味着一切都按应有的方式 100% 显示，但从我收集到的关于 <symbol> 的优点之一。标签是它应该意味着 viewbox只需要声明一次而不是在每次插入时声明。

我做了一个JSFiddle尝试和比较不同的用例。

是否有正确的做事方式？溢出是否正常并且可以忽略？还是我做错了什么？

编辑: 看起来像 viewbox属性仅在 <symbol> 中设置它还会放大整个父 svg 标签。是否应为每个 use 显式设置 SVG 尺寸？

Answer 1

TL;DR:如果您没有为 svg 标签指定任何 viewBox 属性，无论 height 是什么，它都不会正确缩放。或 width值(value)。

因为您可以在同一个 SVG 中有多个符号，例如(简化代码)

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

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

*我们不应该称它为“大小”，而应该称其为“面积”、“边界框”或简称为“ View 框”

如果您只使用一个符号，您很可能会选择与目标符号相同的 viewBox。以这种方式，SVG 将像 <img> 一样缩放。

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