Question

如何使SVG viewBox用户坐标系与SVG本身提供的视口坐标系相同（高度=＆＃34; 100％＆＃34;和宽度=＆＃34; 100％＆＃34;）？

对于我正在做的项目，我需要这个特殊情况，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，这些是最大坐标。

默认情况下，SVG内容包含在SVG大小内。如果要将内容拉伸到100％，请使用preserveAspectRatio="none"禁用宽高比。您还可以使用preserveAspectRatio="slice"使内容覆盖SVG。

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