How to make a <svg> element expand or contract to its parent container?

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.

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 viewBox attribute on the <svg> element. 

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.

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.

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?

149401 次浏览
小开

viewBox不是容器的高度，而是绘图的大小。定义您的 viewBox为100个单位的宽度，然后定义您的 rect为10个单位。之后，无论 SVG 的尺寸有多大，rect都将是图像宽度的10% 。

小开

@ robertc 是正确的，但是您还需要注意，svg, #container会导致 svg 对于除100% 以外的任何情况都以指数方式缩放(对于 #container和 svg分别缩放一次)。

换句话说，如果我对两个元素都应用50% h/w，它实际上是50% 的50% ，或者.5 * .5，等于.25，或者25% 的比例。

One selector works fine when used as @robertc suggests.

svg {
width:50%;
height:50%;
}
小开

对于你的 iphone 你可以使用在你的头部应答器:

"width=device-width"
小开

我最近的工作是从 <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>
小开

假设我有一个这样的 SVG: pic1

我想把它放到一个 div 中，让它响应地填充 div。我的做法如下:

首先，我在一个类似 inkscape 的应用程序中打开 SVG 文件。在 File-> Document Properties 中，我将文档的宽度设置为800px，高度设置为600px (您可以选择其他大小)。然后我将 SVG 放入这个文档中。

pic2

然后，我将这个文件保存为一个新的 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 600px。接下来需要做的事情是将 presveAspectratio 设置为“ 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:

$('#svgId').css({
'width': $('#containerId').width() + 'px',
'height': $('#containerId').height() + 'px'
});

希望能有帮助！


提交答案