html - 为什么为 SVG 声明 viewBox 与在具有适当尺寸的 SVG 元素的符号元素上声明它不同？

Question

所以，我有一个 617 单位宽和 617 单位长的 svg。因此，根据我目前对 svgs 工作原理的理解，我希望这样做：

<svg viewBox="0 0 200 300">
...
</svg>

将与以下结果相同：

<svg viewBox="0 0 617 617>
  <symbol id="testSym" viewBox="0 0 200 300">
  ...
  </symbol>
  <use href="#testSym"></use>
</svg>

虽然结果相似，但它们确实不同。我只是好奇为什么？我认为，因为父 svg 的 viewBox 包含整个图形，所以使用“0 0 200 300”与仅用 svg 声明它是一样的。帮助理解这一点将不胜感激！

PS我知道在符号元素上定义viewBox通常并不聪明，我这样做只是为了了解svgs的工作原理。

标签： htmlsvg

Answer 1

在第二种情况下，您定义视图框的方式会使 svg 缩小。ViewBox 应用于容器元素，内部的所有内容都将根据父元素进行绘制。