Question

目标是让<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>

此问题的最常见解决方案似乎是在viewBox元素上设置<svg>属性。

viewBox="0 0 widthOfContainer heightOfContainer"

但是，在<svg>元素中的元素具有预定义的宽度和/或高度的情况下，这似乎不起作用。例如，上面代码中的<rect>元素的宽度和高度已明确设置。

所以显而易见的解决方案是在这些元素上使用％widths和％high。但这甚至必须要做吗？特别是，因为<img src=test.svg >工作正常，并且在明确设置<rect>高度和宽度的情况下扩展/收缩没有任何问题。

如果<rect>之类的元素和其他类似元素必须以百分比定义宽度和高度，那么Inkscape中是否有一种方法可以设置它以便所有元素都带有<svg>文档使用百分比宽度，高度等..而不是固定尺寸？

Answer 1

viewBox不是容器的高度，而是图纸的大小。将您的viewBox宽度定义为100个单位，然后将rect定义为10个单位。在此之后，无论您缩放SVG的大小，rect都将是图像宽度的10％。

Answer 2

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

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

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

然后我将此文件保存为新的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。接下来你需要做的是将preserveAspectRatio设置为＆＃34; none＆＃34;。如果您需要有关于此属性的更多信息，那么这里有一个很好的link。这就是它的全部内容。

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

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

希望它有所帮助！

Answer 3

最近为我工作的是从height=""标记和所有子标记中删除所有width=""和<svg>属性。然后，您可以使用父容器的高度或宽度的百分比来使用缩放。

Answer 4

@robertc没错，但您还需要注意svg, #container会导致svg按比例缩放至除100％以外的任何内容（一次用于#container，一次用于svg）

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

当@robertc建议使用时，一个选择器工作正常。

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

Answer 5

对于你的iphone你可以在你的头部应用中使用：

"width=device-width"

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

5 个答案: