html – ie11中的SVG问题

发布时间：2020-12-14 19:31:16 所属栏目：资源来源：网络整理

导读：我有一个div的高度设置为320像素,那么它的小孩被设置为100％的宽度. 这个小孩就是一个SVG文件,我把宽度设置为容器的200％. 在chrome和firefox工作正常,我得到一个很好的形象像这样： HTML看起来像这样： div class="kit-template ng-isolate-scope front" di

我有一个div的高度设置为320像素,那么它的小孩被设置为100％的宽度.
这个小孩就是一个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,因为这些属性也不是必需的.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!