Question

我有一个基本的内联svg设置

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25.51 25.51">
    <rect id="a1" x="0.5" y="0.5" width="25.51" height="25.51"/>
</svg>

JSFIDDLE

在任何浏览器中，svg采用全宽，IE11除外。 css看起来像

svg {
    stroke: #000;
    stroke-width: 2px;
}

svg rect {
    fill: red;
}

我尝试将width: 100%和display: block添加到 svg ，但这没有帮助。有任何建议我如何在IE11中使svg宽度达到100％？

Answer 1

默认情况下，属性preserveAspectRatio = "xMinYMin meet"

设置此属性的值none

＆＃13;

svg {
    stroke: #000;
    stroke-width: 2px;
}

svg rect {
    fill: red;
}

＆＃13;

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" preserveAspectRatio = "none">
    <rect id="a1" x="0.5" y="0.5" width="25.51" height="25.51"/>
</svg>

＆＃13;

现在IE11中svg的宽度为100％。

但是比例不受尊重，并且在与浏览器窗口的比例协商后，方形被拉伸为矩形。要获得矩形，您需要设置视口SVG，例如：

width="900" height="900"

＆＃13;

<svg xmlns="http://www.w3.org/2000/svg" width="900" height="900" viewBox="0 0 30 30" >
    <rect id="a1" x="0.5" y="0.5" width="25" height="25" stroke-width="2px" stroke="#000" fill="red"/>
</svg>

＆＃13;

100％内联svg宽度在IE11中不起作用

1 个答案: