根据some我已阅读的tutorials，在插入带<symbol> {1}}的SVG <use>时，viewBox属性只需要定义一次 - 在<symbol>标记中。
这个名义上工作正常，但<use>元素的内容溢出了父<svg>一个相当大的因素（显然总是父svg元素的大小，尽管它似乎根据CSS样式而有所不同）。这似乎不会导致任何实际问题（溢出隐藏，因此没有不需要的滚动条或布局问题），但不知何故它感觉错了＆＃39;。
然后有一个question去年在这里询问的答案，建议完全从viewbox元素中移除<symbol>属性并在<svg>中声明它而标签代替。以这种方式做事意味着所有内容都应该100％显示，但是从我收集到的<symbol>标签的一个好处是，它应该意味着viewbox只需要一次声明而不是每次插入。
我做了一个JSFiddle来尝试比较不同的用例。
有没有正确的做事方式？这是否正常溢出并被忽略？或者我做了一些根本错误的事情？
修改：看起来当viewbox属性仅在<symbol>中设置时，它也会扩展整个父svg标记。是否应使用use？
答案 0 :(得分：1)
TL; DR：如果您未为svg标记指定任何viewBox属性，则无论Object.keys(data).length
或height值如何，它都无法正确缩放。
在同一SVG中可以有多个符号，例如（简化代码）
width每个符号可以有自己的大小*。现在，SVG标签（根）也需要知道应该使用哪种大小*。因此，您必须在SVG标签本身上设置一个viewBox。
*我们不应将其称为“大小”，而应将其称为“区域”，“边界框”或只是“视图框”
如果仅使用一个符号，则很有可能选择与目标符号相同的viewBox。通过这种方式，SVG将像<svg>
<use href="somePath#symbol1"></use>
<use href="somePath#symbol2"></use>
</svg>
<img>