css元素扩展,css - 如何使<svg>元素扩展或收缩到其父容器？

假设我有一个SVG，如下所示：

而且我想把它放在一个div中并让它响应地填充div。 我这样做的方式如下：

首先，我在像inkscape这样的应用程序中打开SVG文件。 在文件 - ＆gt;文档属性中，我将文档的宽度设置为800px，高度设置为600px(您可以选择其他大小)。 然后我将SVG放入此文档中。

然后我将此文件保存为新的SVG文件并从此文件中获取路径数据。现在在HTML中，实现魔术的代码如下：

id="svgId"

xmlns:svg="http://www.w3.org/2000/svg"

xmlns="http://www.w3.org/2000/svg"

version="1.1"

x="0"

y="0"

width="100%"

height="100%"

viewBox="0 0 800 600"

preserveAspectRatio="none">

请注意，SVG的宽度和高度都设置为100％，因为我们希望它垂直和水平填充容器，但viewBox的宽度和高度与inkscape中文档的宽度和高度相同，即800px X600px的。 您需要做的下一件事是将preserveAspectRatio设置为“none”。 如果您需要有关于此属性的更多信息，这里有一个很好的链接。 这就是它的全部内容。

还有一件事是这个代码适用于几乎所有主流浏览器，甚至是旧版本，但在某些版本的android和ios上你需要使用一些javascrip / jQuery代码来保持它的一致性。 我在文档就绪和调整大小函数中使用以下内容：

$('#svgId').css({

'width': $('#containerId').width() + 'px',

'height': $('#containerId').height() + 'px'

});

希望能帮助到你！