我有一个div的高度设置为320像素,那么它的小孩被设置为100％的宽度.
这个小孩就是一个SVG文件,我把宽度设置为容器的200％.
在chrome和firefox工作正常,我得到一个很好的形象像这样：
这个小孩就是一个SVG文件,我把宽度设置为容器的200％.
在chrome和firefox工作正常,我得到一个很好的形象像这样：
HTML看起来像这样：
<div class="kit-template ng-isolate-scope front">
<div class="svg-document ng-scope">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 259.5 131.4" enable-background="new 0 0 259.5 131.4" xml:space="preserve" class="ng-scope">
<!-- Removed for brevity -->
</svg>
</div>
</div>
CSS / SASS看起来像这样：
.kit-template {
overflow: hidden;
position: relative;
height: 320px;
.svg-document {
width: 100%;
overflow: hidden;
margin: 0 auto;
/*position: absolute;
bottom: 0;*/
svg {
width: 200%;
path,polyline,polygon,rect {
cursor: pointer;
}
}
}
}
就像我所说的,Chrome,Firefox和IE Edge都可以正常工作.但是在IE11中我得到：
如果我检查这个元素,我可以看到SVG看起来像是在左边和右边都有填充,但是我可以向你保证.
有人知道为什么会发生这种情况吗？
更新1
我在codepen上创建了一个非常简单的版本,所以你可以看到这个问题.
这里是：
http://codepen.io/r3plica/pen/Kdypwe
查看在chrome,firefox,Edge然后IE11.你会看到只有IE11有问题.
解决方法
您可以做的是将height =“320”属性添加到SVG标签中.所以IE可以正确渲染.我相信IE11在你的CSS中使用宽度200％被抛弃.但是由于xml：space =“preserve”是默认值,只设置高度会保持SVG外套的比例.
IE11中的测试代码示例：
http://codepen.io/jonathan/pen/MarvEm
<svg height="320" viewBox="0 0 248.2 142.8" enable-background="new 0 0 248.2 142.8" xml:space="preserve">
还要删除XML命名空间标签,因为它不需要HTML页面.而且您也可以删除一些SVG属性,如版本,xmlns,xmlns：xlink,x和y,因为这些属性也不是必需的.
