Html SVG在Internet Explorer中的缩放方式不同 SVG测试_Html_Svg

Html SVG在Internet Explorer中的缩放方式不同 SVG测试

html svg

Html SVG在Internet Explorer中的缩放方式不同 SVG测试,html,svg,Html,Svg,这就是我在Firefox、Chrome、Safari和Opera中得到的：这是我在IE9、IE10和IE11中得到的：我做错了什么？我尝试了很多不同的方法：有/没有svg宽度和高度，有/没有viewBox，有/没有px，有/没有浮动 ---编辑--- 我让它工作了，以下是我必须做的： <!DOCTYPE html> <html> <head> <title>SVG Test</title> </head> <

这就是我在Firefox、Chrome、Safari和Opera中得到的：

这是我在IE9、IE10和IE11中得到的：

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

---编辑---

我让它工作了，以下是我必须做的：

<!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>


SVG测试

这里是我找到我使用的信息的地方：

我没有足够的智慧来解释这为什么有效。如果没有额外的CSS，IE在没有指定svg的宽度和高度时会变得暴躁，但这会破坏所有其他浏览器的响应性可伸缩性。我不知道为什么让svg绝对化会让IE开心。

您是否在

中设置了

preserveAspectRatio

属性？您是否在某个时候设置了

的最终大小（宽度/高度），可能是通过css设置的？@philipp谢谢。是的，我已经尝试了所有对我有意义的事情。我将我的原始代码简化为FF、Chrome、Safari和Opera的代码。

<!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>