SVG在Internet Explorer中的扩展方式不同

时间：2014-05-15 14:26:35

标签： html5 svg 

<!DOCTYPE html>
<html>
<head>
<title>SVG Test</title>
</head>

<body>

<div style="width: 32%; float: left;">
<svg x="0" y="0" viewBox="0 0 400 400">
<!-- bunch of svg code removed for brevity -->
</svg>
</div>

<div style="margin: 0 2%; width: 32%; float: left;">
<svg x="0" y="0" viewBox="0 0 400 400">
<!-- bunch of svg code removed for brevity -->
</svg>
</div>

<div style="width: 32%; float: left;">
<svg x="0" y="0" viewBox="0 0 400 400">
<!-- bunch of svg code removed for brevity -->
</svg>
</div>

</body>
</html>

这是我在Firefox，Chrome，Safari和Opera中获得的： Firefox

这是我在IE9，IE10和IE11中得到的： Internet Explorer

我做错了什么？我尝试了很多不同的东西：有/没有svg宽度和高度，有/没有viewBox，有/没有px，有/没有浮动...

---编辑---

我得到了它的工作，这是我必须做的：

<!DOCTYPE html>
<html>
<head>
<title>SVG Test</title>
</head>

<body>

<div style="width: 32%; float: left; padding-bottom: 32%; position: relative;">
<svg x="0" y="0" viewBox="0 0 400 400" preserveAspectRatio="xMinYMin meet" style="position: absolute; top: 0; left: 0;">
<!-- bunch of svg code removed for brevity -->
</svg>
</div>

<div style="margin: 0 2%; width: 32%; float: left; padding-bottom: 32%; position: relative;">
<svg x="0" y="0" viewBox="0 0 400 400" preserveAspectRatio="xMinYMin meet" style="position: absolute; top: 0; left: 0;">
<!-- bunch of svg code removed for brevity -->
</svg>
</div>

<div style="width: 32%; float: left; padding-bottom: 32%; position: relative;">
<svg x="0" y="0" viewBox="0 0 400 400" preserveAspectRatio="xMinYMin meet" style="position: absolute; top: 0; left: 0;">
<!-- bunch of svg code removed for brevity -->
</svg>
</div>

</body>
</html>

我在这里找到了我使用的信息：http://demosthenes.info/blog/744/Make-SVG-Responsive

我不够聪明，不能解释为什么会这样。如果没有额外的CSS，当你没有指定svg宽度和高度时，IE会变得脾气暴躁，但这会破坏所有其他浏览器的响应式可伸缩性。我不知道为什么让svg绝对让IE很开心。

0 个答案:

没有答案
相关问题
最新问题