问题描述
我有一个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问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!