Html ie11 中的 SVG 问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33084245/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
SVG issues in ie11
提问by r3plica
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:
我有一个 div，它的高度设置为 320 像素，然后它的子元素设置为 100% 的宽度。其子文件是一个 SVG 文件，我将其宽度设置为容器的 200%。在运行良好的 chrome 和 firefox 中，我得到了一个像这样的漂亮图像：
The HTML looks like this:
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>
and the CSS/SASS looks like this:
和 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;
}
}
}
}
Like I said, this works fine in both Chrome, Firefox and IE Edge. But in IE11 I get this:
就像我说的，这在 Chrome、Firefox 和 IE Edge 中都可以正常工作。但是在 IE11 中我得到了这个：
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.
如果我检查该元素，我可以看到 SVG 看起来像是左右填充，但我可以向你保证它没有。
Does anyone know why this is happening and how I can fix it?
有谁知道为什么会发生这种情况以及我该如何解决？
Update 1
更新 1
I have created a very simple version on codepen so you can see the issue. Here it is:
我在 codepen 上创建了一个非常简单的版本，所以你可以看到这个问题。这里是：
http://codepen.io/r3plica/pen/Kdypwe
http://codepen.io/r3plica/pen/Kdypwe
View that in chrome, firefox, Edge and then IE11. You will see that only IE11 has the issue.
在 chrome、firefox、Edge 和 IE11 中查看。你会看到只有 IE11 有这个问题。
采纳答案by Jonathan Marzullo
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 Hymanet.
您可以做的是将height="320"属性添加到您的 SVG 标签中。所以IE可以正确渲染。我相信 IE11 在你的 CSS 中使用宽度 200% 会被抛弃。但由于xml:space="preserve"是默认设置，因此仅设置高度将保持 SVG 夹克的比例。
Test codepen example in IE11:
在 IE11 中测试 codepen 示例：
http://codepen.io/jonathan/pen/MarvEm
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">
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.
还要删除 XML 命名空间标记，因为它在 HTML 页面中不需要。你也可以删除一些像SVG属性version，xmlns，xmlns:xlink，x，和y，因为那些不需要为好。
回答by Sandeep M
I was having SVG image display issue in IE11. The issue was inner svg image was having width and height mentioned. Due to this it was failing to scale properly on IE11 and it was working fine on IE edge, chrome, firefox very fine.
我在 IE11 中遇到了 SVG 图像显示问题。问题是内部 svg 图像提到了宽度和高度。因此，它无法在 IE11 上正确缩放，并且在 IE edge、chrome、firefox 上运行良好。
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
To fix the issue I removed width="120" height="120" and its working fine. When I observed svg image was having width="120" height="120" viewBox="0 0 120 120"but in IE11 it was only showing width="120" height="120".
为了解决这个问题，我删除了 width="120" height="120" 并且它工作正常。当我观察到 svg 图像有width="120" height="120" viewBox="0 0 120 120"但在 IE11 中它只显示width="120" height="120"。
output was:
输出是：
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120">
