Html 如何使 <svg> 元素扩展或收缩到其父容器？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8919076/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make a <svg> element expand or contract to its parent container?
提问by user782860
The goal is to have the <svg>element expand to the size of its parent container, in this case a <div>, no matter how big or small that container may be.
目标是让<svg>元素扩展到其父容器的大小，在这种情况下是 a <div>，无论容器有多大或多小。
The code:
编码：
<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>
The most common solution to this problem seems to be setting the viewBoxattribute on the <svg>element.
这个问题最常见的解决方案似乎是viewBox在<svg>元素上设置属性。
viewBox="0 0 widthOfContainer heightOfContainer"
However, this does not seem to work in cases where elements within the <svg>element have predefined widths and/or heights. For example, the <rect>element, in the above code, has its width and height explicitly set.
但是，在元素中的<svg>元素具有预定义的宽度和/或高度的情况下，这似乎不起作用。例如，<rect>上面代码中的元素明确设置了其宽度和高度。
So the obvious solution is to use % widths and % heights on those elements as well. But does this even have to be done? Especially, since <img src=test.svg >works fine and expands/contracts without any problems with explicitly set <rect>heights and widths.
所以显而易见的解决方案是在这些元素上使用 % widths 和 % heights。但这真的是必须要做的吗？特别是，由于<img src=test.svg >工作正常并且扩展/收缩没有任何明确设置<rect>高度和宽度的问题。
If elements like <rect>, and other elements like it, have to have their widths and heights defined in percentages, is there a way in Inkscape to set it so that all elements with the <svg>document use percentage widths, heights, etc.. instead of fixed dimensions?
如果像<rect>和其他类似元素的宽度和高度必须以百分比定义，Inkscape 中是否有一种方法可以设置它，以便<svg>文档中的所有元素都使用百分比宽度、高度等。而不是固定尺寸?
回答by robertc
The viewBoxisn't the height of the container, it's the size of your drawing. Define your viewBoxto be 100 units in width, then define your rectto be 10 units. After that, however large you scale the SVG, the rectwill be 10% the width of the image.
该viewBox不是容器的高度，这是你的绘图的大小。定义您的viewBox宽度为 100 个单位，然后定义您的宽度rect为 10 个单位。之后，无论您缩放 SVG 多大，rect都将是图像宽度的 10%。
回答by Reza Baradaran Gazorisangi
Suppose I have an SVG which looks like this:
假设我有一个如下所示的 SVG：
And I want to put it in a div and make it fill the div responsively. My way of doing it is as follows:
我想把它放在一个 div 中，让它响应式地填充 div。我的做法如下：
First I open the SVG file in an application like inkscape. In File->Document Properties I set the width of the document to 800px and and the height to 600px (you can choose other sizes). Then I fit the SVG into this document.
首先，我在inkscape 等应用程序中打开SVG 文件。在 File->Document Properties 中，我将文档的宽度设置为 800px，将高度设置为 600px（您可以选择其他大小）。然后我将 SVG 放入这个文档中。
Then I save this file as a new SVG file and get the path data from this file. Now in HTML the code that does the magic is as follows:
然后我将这个文件保存为一个新的 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>
Note that width and height of SVG are both set to 100%, since we want it to fill the container vertically and horizontally ,but width and height of the viewBox are the same as the width and height of the document in inkscape which is 800px X 600px. The next thing you need to do is set the preserveAspectRatio to "none". If you need to have more information on this attribute here's a good link. And that's all there is to it.
注意SVG的宽度和高度都设置为100%，因为我们希望它垂直和水平地填充容器，但是viewBox的宽度和高度与inkscape中文档的宽度和高度相同，即800px X 600 像素。您需要做的下一件事是将preserveAspectRatio 设置为“none”。如果您需要有关此属性的更多信息，请访问这里的一个很好的链接。这就是全部。
One more thing is that this code works on almost all the major browsers even the old ones but on some versions of android and ios you need to use some javascrip/jQuery code to keep it consistent. I use the following in document ready and resize functions:
还有一件事是，这段代码几乎适用于所有主要浏览器，甚至是旧浏览器，但在某些版本的 android 和 ios 上，您需要使用一些 javascrip/jQuery 代码来保持一致。我在文档准备和调整大小功能中使用以下内容：
$('#svgId').css({
'width': $('#containerId').width() + 'px',
'height': $('#containerId').height() + 'px'
});
Hope it helps!
希望能帮助到你！
回答by Geoff Colbath
What's worked for me recently is to remove all height=""and width=""attributes from the <svg>tag and all child tags. Then you can use scaling using a percentage of the parent container's height or width.
最近对我有用的是从标签和所有子标签中删除所有height=""和width=""属性<svg>。然后，您可以使用父容器高度或宽度的百分比进行缩放。
回答by Justin Putney
@robertc has it right, but you also need to notice that svg, #containercauses the svg to be scaled exponentially for anything but 100% (once for #containerand once for svg).
@robertc 说得对，但您还需要注意，这svg, #container会导致 svg 以指数方式缩放，但 100%除外（一次#container又一次svg）。
In other words, if I applied 50% h/w to both elements, it's actually 50% of 50%, or .5 * .5, which equals .25, or 25% scale.
换句话说，如果我对两个元素应用 50% 的 h/w，它实际上是 50% 的 50%，或 0.5 * .5，等于 0.25，或 25% 比例。
One selector works fine when used as @robertc suggests.
按照@robertc 的建议使用时，一个选择器可以正常工作。
svg {
width:50%;
height:50%;
}
回答by vincent
For your iphone You could use in your head balise :
对于您的 iphone 您可以在您的头脑中使用 balise：
"width=device-width"
