我有一个host2:8882
和host3:8883
的svg对象。在(几乎)所有浏览器(边缘,firefox,歌剧-已全部更新)上,其高度似乎都符合预期-width: 200px
,由浏览器计算得出。但是IE11 ...使我的生活更加艰难(我不能说这很令人惊讶)。查看差异:
svg代码:
height: auto
css:
60.27px
({<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 162.229 48.884" enable-background="new 0 0 162.229 48.884" xml:space="preserve">
<rect fill="#111111" width="162.229" height="48.884"/>
</svg>
包含._logo svg {
width: 200px;
height: auto;
display: block;
margin: 0 auto;
}
)
为什么会这样?
答案 0 :(得分:1)
IE中存在一个错误,即如果您不同时提供宽度和高度,则无法正确缩放SVG。如果可以,您可能想尝试设置高度。或者您可以尝试使用Canvas方式。 http://nicolasgallagher.com/canvas-fix-svg-scaling-in-internet-explorer/
答案 1 :(得分:0)
您必须在svg上显式设置height
。现在,您正在使用height: auto
。 svg在IE中失去其宽高比的原因是,因为该浏览器的高度是根据根而不是您期望的环绕元素计算的。如果您希望svg的高度为60px,请设置该值。