如何使一个<svg>元素展开或收缩到它的父容器？
目标是将<svg>元素扩展为其父容器的大小，在这种情况下是一个<div>，不pipe容器有多大或多小。
代码：
<style> svg, #container{ height: 100%; width: 100%; } </style> <div id="container"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" > <rect x="0" y="0" width="100" height="100" /> </svg> </div> 这个问题最常见的解决scheme似乎是在<svg>元素上设置viewBox属性。
viewBox="0 0 widthOfContainer heightOfContainer"
但是，在<svg>元素中的元素具有预定义的宽度和/或高度的情况下，这似乎不起作用。 例如，在上面的代码中，<rect>元素的宽度和高度都是明确设置的。
所以显而易见的解决scheme是在这些元素上使用％宽度和％高度。 但是，这甚至必须完成？ 尤其是，因为<img src = test.svg />可以正常工作，并且扩展/合同没有任何明确设置<rect>高度和宽度的问题。
如果象<rect>这样的元素和其他像这样的元素必须以百分比来定义它们的宽度和高度，那么在Inkscape中是否有这样的方法来设置它，以便所有具有<svg>文档的元素使用百分比宽度，高度等..而不是固定的尺寸？
viewBox不是容器的高度，而是graphics的大小。 将你的viewBox定义为100个单位的宽度，然后定义你的rect为10个单位。 之后，无论您的SVG规模如何， rect都是图像宽度的10％。
假设我有一个SVG，如下所示： 
而且我想把它放在一个div中，并使其填充分区响应。 我的做法如下：
首先，我在像inkscape这样的应用程序中打开SVG文件。 在文件 – >文档属性中，我将文档的宽度设置为800px，高度设置为600px（可以select其他尺寸）。 然后我把SVG放到这个文件里。
然后我把这个文件保存为一个新的SVG文件，并从这个文件中获取path数据。 现在在HTML中，这样做的代码如下所示：
<div id="containerId"> <svg 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"> <path d="m0 0v600h800v-600h-75.07031l-431 597.9707-292.445315-223.99609 269.548825-373.97461h-271.0332z" fill="#f00"/> </svg> </div>
请注意，SVG的宽度和高度都设置为100％，因为我们希望它垂直和水平地填充容器，但是viewBox的宽度和高度与inkscape中的文档的宽度和高度相同，即800px X 600px的。 接下来你需要做的是将preserveAspectRatio设置为“none”。 如果你需要更多关于这个属性的信息，这里有一个很好的链接 。 这就是它的一切。
还有一件事是，这个代码几乎可以在所有的主stream浏览器上工作，甚至是旧的，但在某些版本的android和ios上，您需要使用一些javascrip / jQuery代码来保持一致。 我在文档准备和resizefunction中使用以下内容：
$('#svgId').css({ 'width': $('#containerId').width() + 'px', 'height': $('#containerId').height() + 'px' });
希望它有帮助！
最近我的工作是从<svg>标签和所有子标签中删除所有height=""和width=""属性。 然后，您可以使用父容器的高度或宽度的百分比进行缩放。
@robertc是正确的，但是你也需要注意到svg, #container导致svg以100％（一次为#container和一次为svg ）的指数级别进行缩放。
换句话说，如果我对这两个元素应用50％h / w，实际上是50％的50％，或者.5 * .5，这等于0.25或者25％的比例。
一个select器在被@robertc使用时performance很好。
svg { width:50%; height:50%; }
对于你的iPhone你可以用你的头上的应答器：
"width=device-width"
