我将为您翻译以下内容,这是关于编程的:
视口框的大小为100x10。外部div的宽度设置为400像素。这意味着SVG的高度应该是(在Chrome/Firefox中)40像素。但是,在IE 11中,宽度始终为150像素(即使div的宽度超过1500像素...)
有没有一种好的方法可以在IE中修复这个问题?为什么IE不能正确处理未知的高度?我可以使用“固有纵横比”技巧,但那太丑陋了,需要另一个DOM元素,并要求我每次重新计算包装器大小时都重新计算填充顶部。
关于我为什么要这样做的更多信息,我写了一篇简短的博客文章:http://1pxsolidtomato.com/2014/10/08/quest-for-scalable-svg-text/ 感谢您的帮助!
我正在尝试使用viewBox属性构建内联SVG,但没有显式的宽度或高度属性。我使用CSS将SVG的宽度设置为100%。这应该使SVG缩放到其包装容器,保持viewBox设置的纵横比。在Chrome和Firefox中,这种方法完美地运行!
以下是一个最小化的CodePen示例,展示了我所说的内容: 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;
}
视口框的大小为100x10。外部div的宽度设置为400像素。这意味着SVG的高度应该是(在Chrome/Firefox中)40像素。但是,在IE 11中,宽度始终为150像素(即使div的宽度超过1500像素...)
有没有一种好的方法可以在IE中修复这个问题?为什么IE不能正确处理未知的高度?我可以使用“固有纵横比”技巧,但那太丑陋了,需要另一个DOM元素,并要求我每次重新计算包装器大小时都重新计算填充顶部。
关于我为什么要这样做的更多信息,我写了一篇简短的博客文章:http://1pxsolidtomato.com/2014/10/08/quest-for-scalable-svg-text/ 感谢您的帮助!