如何使 <svg> 元素扩展或收缩到其父容器？
目标是让 <svg> 元素扩展到其父容器的大小，在本例中为 <div>，无论该容器有多大或多小。
编码：
<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>
此问题的最常见解决方案似乎是在 <svg> 元素上设置 viewBox 属性。
viewBox="0 0 widthOfContainer heightOfContainer"
但是，如果 <svg> 元素中的元素具有预定义的宽度和/或高度，这似乎不起作用。例如，上述代码中的 <rect> 元素明确设置了其宽度和高度。
因此，显而易见的解决方案是在这些元素上也使用 % 宽度和 % 高度。但这甚至必须做吗？特别是，因为 <img src=test.svg > 可以正常工作并且可以扩展/收缩，而明确设置 <rect> 高度和宽度没有任何问题。
如果像 <rect> 这样的元素和其他类似的元素必须以百分比定义它们的宽度和高度，Inkscape 有没有办法设置它，以便 <svg> 文档的所有元素都使用百分比宽度、高度等..而不是固定尺寸？
这样您就可以使用 width:100% 或 height:100%
viewBox 不是容器的高度，而是绘图的大小。将您的 viewBox 定义为 100 个单位的宽度，然后将您的 rect 定义为 10 个单位。之后，无论您缩放 SVG 多大，rect 都将是图像宽度的 10%。
https://i.stack.imgur.com/6sjbk.jpg
我想把它放在一个 div 中，让它响应地填充 div。我的做法如下：
首先，我在诸如 inkscape 之类的应用程序中打开 SVG 文件。在文件->文档属性中，我将文档的宽度设置为 800 像素，将高度设置为 600 像素（您可以选择其他尺寸）。然后我将 SVG 放入这个文档中。
https://i.stack.imgur.com/YRrFU.jpg
然后我将这个文件保存为一个新的 SVG 文件并从这个文件中获取路径数据。现在在 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 600 像素。您需要做的下一件事是将preserveAspectRatio 设置为“none”。如果您需要了解有关此属性的更多信息，这里有一个很好的 link。这就是它的全部。
另一件事是，这段代码几乎适用于所有主流浏览器，甚至是旧浏览器，但在某些版本的 android 和 ios 上，您需要使用一些 javascrip/jQuery 代码来保持它的一致性。我在文档准备和调整大小功能中使用以下内容：
$('#svgId').css({
'width': $('#containerId').width() + 'px',
'height': $('#containerId').height() + 'px'
});
希望能帮助到你！
最近对我有用的是从 <svg> 标记和所有子标记中删除所有 height="" 和 width="" 属性。然后，您可以使用父容器的高度或宽度的百分比进行缩放。
前：
<svg width="3212" height="3212" viewBox="0 0 3212 3212" fill="none" xmlns="http://www.w3.org/2000/svg">
circle cx="1606" cy="1606" r="1387" stroke="black" stroke-width="438"/>
</svg>
后：
<svg viewBox="0 0 3212 3212" fill="none" xmlns="http://www.w3.org/2000/svg">
circle cx="1606" cy="1606" r="1387" stroke="black" stroke-width="438"/>
</svg>
@robertc 说得对，但您还需要注意 svg, #container 会导致 svg 以指数方式缩放，而不是 100%（一次用于 #container，一次用于 svg）。
换句话说，如果我将 50% h/w 应用于两个元素，它实际上是 50% 的 50%，或 0.5 * .5，等于 0.25，或 25% 比例。
正如@robertc 建议的那样，一个选择器可以正常工作。
svg {
width:50%;
height:50%;
}
svg, #container 匹配 both svg dom 元素 和 #container dom 元素。我相信您是在寻找 svg #container，但如果您仍然使用 ID，则不需要指定父级。
对于您的 iPhone，您可以在头部应答器中使用：
"width=device-width"
关注公众号
不定期副业成功案例分享
