我正在尝试构建具有 viewBox 属性但没有显式宽度或高度属性的内联 SVG。我使用 CSS 将 SVG 的宽度设置为 100%。这应该让 SVG 缩放到它的包装容器,保持由 viewBox 设置的纵横比。在 Chrome 和 Firefox 中,这非常有效!
这是我所谈论内容的一个最小代码笔示例: http://codepen.io/pcorey/pen/amkGl
HTML:
<div>
<svg viewBox="0 0 100 10">
<text x="1" y="9">hello</text>
</svg>
</div>
CSS:
div {
width: 400px;
}
svg {
width: 100%;
max-height: 100%;
outline: 1px solid tomato;
}
text {
font-size: 10px;
}
viewBox 是 100x10。外部 div 设置为 400px 宽度。这意味着 SVG 的高度应该是(在 Chrome/Firefox 中)40px。但是,在 IE 11 中,宽度始终为 150px(即使 div 的宽度超过 1500px...)
在 IE 中有解决这个问题的好方法吗?为什么IE不能正确处理未知高度?我可以使用“intrinsic aspect ratio”技巧,但这非常丑陋,需要另一个 DOM 元素,并且每次包装器调整大小时都需要重新计算 padding-top。
有关我为什么要这样做的更多信息,我写了一篇关于它的快速博客文章:http://1pxsolidtomato.com/2014/10/08/quest-for-scalable-svg-text/
感谢您的帮助!
最佳答案
一种适用于所有浏览器的解决方法是将空白图像添加到您的 SVG 所在的容器中,该容器具有与您的 SVG 相同的尺寸:
.wrap {
position: relative;
}
img {
width: 100%;
height: auto;
}
.viz {
position: absolute;
top: 0;
left: 0;
}
<div class="wrap">
<img src="img/blank.png" />
<div class="viz">
<svg preserveAspectRatio="xMinYMin slice" viewBox="0 0 1000 600"></svg>
</div>
</div>
在这种情况下,您的图像应具有 1000 像素 x 600 像素的自然尺寸并且是透明的(或与 .wrap 容器的背景相匹配)。这将适合 svg 所在容器的大小。 .viz 元素的绝对位置将允许它位于图像的顶部,利用它的高度,所以没有任何东西被切断。
关于javascript - 带有 viewBox 和宽度的 SVG 在 IE 中无法正确缩放高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26271034/