IE11中的SVG问题 [英] SVG issues in ie11

问题描述

我有一个div，其div的高度设置为320像素，然后它的子级设置为该像素的宽度的100％. 它的子级是SVG文件，我将宽度设置为容器的200％. 在可以正常工作的chrome和firefox中，我得到了一个很好的图像，如下所示:

I have a div that has it's height set to 320 pixels, then it's child is set to 100% width of that. The child of that is a SVG file which I set the width to 200% of the container. In chrome and firefox that works fine, I get a nice image like this:

HTML看起来像这样:

The HTML looks like this:

<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看起来像这样:

and the CSS/SASS looks like this:

.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中我得到了:

Like I said, this works fine in both Chrome, Firefox and IE Edge. But in IE11 I get this:

如果我检查该元素，我可以看到SVG看起来好像在其左右填充，但是我可以向您保证没有.

And if I inspect the element, I can see that the SVG looks like it has padding left and right on it, but I can assure you it doesn't.

有人知道为什么会这样吗?我该如何解决?

Does anyone know why this is happening and how I can fix it?

更新1

我在Codepen上创建了一个非常简单的版本，因此您可以看到此问题. 在这里:

I have created a very simple version on codepen so you can see the issue. Here it is:

http://codepen.io/r3plica/pen/Kdypwe

先在chrome，firefox，Edge和IE11中查看.您将看到只有IE11出现了问题.

View that in chrome, firefox, Edge and then IE11. You will see that only IE11 has the issue.

推荐答案

您可以做的是将height="320"属性添加到SVG标签中.因此IE可以正确呈现.我相信在CSS中使用200％的宽度会抛出IE11.但是由于xml:space="preserve"是默认设置，因此仅设置高度将保持SVG夹克的比例.

What you can do is add the height="320" attribute to your SVG tag. So IE can render correctly. I believe IE11 is thrown off by using width 200% in your CSS. But since xml:space="preserve" is the default, setting only the height will keep the proportions of your SVG jacket.

在IE11中测试codepen示例:

Test codepen example in 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属性，例如version，xmlns，xmlns:xlink，x和y，因为它们也不是必需的.

Also remove the XML namespace tag since it is not needed inside an HTML page. And you can also remove some of the SVG attributes like version, xmlns, xmlns:xlink, x, and y, since those are not needed as well.

这篇关于IE11中的SVG问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！