SVG的`viewbox`应该在`symbol`中定义一次，还是每次使用SVG时都要定义？

Question

4

根据我阅读的一些教程，例如这篇和这篇，在使用<use>元素插入SVG <symbol>时，只需在<symbol>标签中定义viewBox属性一次即可。

理论上看起来没问题，但是<use>元素的内容会大量溢出其父级<svg>元素（似乎始终按父级SVG元素的大小进行缩放，尽管似乎取决于CSS样式）。虽然这似乎不会引起任何实际问题（溢出被隐藏了，因此没有不必要的滚动条或布局问题），但是总感觉有些“不对”。

去年有个问题的答案建议完全删除<symbol>元素中的viewbox属性，并在<svg>标签中声明它。这样做的好处之一似乎是<symbol>标签应该意味着只需要在每次插入时声明一次viewbox，而不是每次都声明。

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

是否有正确的做法？那个溢出是否正常并应该被忽略？还是我在做某些根本性错误？ 编辑：看起来当在<symbol>中仅设置viewbox属性时，它也会将整个父级SVG标记缩放。应该使用每个use显式设置SVG尺寸吗？

- chrBrd

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Flavien Volken · Accepted Answer

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

由于您可以在同一个SVG中拥有多个符号，因此需要指定viewBox属性（简化代码）。

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

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

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

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

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