SVG内容-只缩放宽度并显示全高

Question

我创建了一个带有foreignObject文本的SVG，并使用img标记将其链接到HTML页面中。

问题是svg的宽度是按设备缩放的，但高度固定在153px左右。我已经将svg的宽度和高度设置为100%。

我不能为svg提供固定的高度，因为我希望文本部分响应和按设备缩放。

<img src="http://treebliss.com/shipping.svg" style="width: 100%; height: 100%"/>

在这种情况下，我不能使用任何JS来解决任何问题。

Answer 1

视口-百分比长度：

https://www.w3.org/tr/css3-values/#viewport-相对长度

视口百分比长度与初始包含块的大小有关。当初始包含块的高度或宽度改变时，它们相应地缩放。但是，当根元素上的overflow值为auto时，任何滚动条都假定不存在。作为将HTML/body元素的高度都设置为100%的替代方法，您还可以使用视口百分比长度：

body {
    height: 100vh;
}
img {
  width: 100%; 
  height:100%;
}

<img src="http://treebliss.com/shipping.svg"  />