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

时间:2018-05-03 13:08:17

标签: javascript css svg

如何使SVG viewBox用户坐标系与SVG本身提供的视口坐标系相同(高度=" 100%"和宽度=" 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属性不接受百分比。

1 个答案:

答案 0 :(得分:1)

在视图框中不允许

%/ px,这些是最大坐标。

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

<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/