SVG - 使用百分比制作 viewBox(0, 0, 100%, 100%)

Question

如何使 SVG viewBox 用户坐标系与 SVG 本身提供的视口坐标系相同（height="100%" 和 width="100%"）？

对于我正在做的项目，我需要这个特殊情况，SVG 元素应该是响应式的，但我们仍然需要在 SVG 本身上保持 100% 的高度和宽度。

所以，我需要这样的东西：

<svg height="100%" width="100%" viewBox="0, 0, 100%, 100%">
  <circle cx="25" cy="25" r="20" stroke="black" strokeWidth="1" fill="black" />
</svg>

.. 但 viewBox 属性不接受百分比。

Answer 1

%/px 不允许在 viewBox 中，这些是最大坐标。

默认情况下，SVG 内容包含在 SVG 大小中。
如果您希望内容拉伸到 100%，请使用 禁用纵横比preserveAspectRatio="none"。
您还可以使用preserveAspectRatio="slice"使内容覆盖 SVG（如background-size: cover）。

<svg height="100%" width="100%" viewBox="0 0 100 100" preserveAspectRatio="none">

有一些关于这个的好文章：https : //css-tricks.com/scale-svg/和https://alligator.io/svg/preserve-aspect-ratio/