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

Question

目标是使<svg>元素扩展到其父容器的大小,在这种情况下为a <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文件.在文件 - >文档属性中,我将文档的宽度设置为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设置为"none".如果您需要有关于此属性的更多信息,这里有一个很好的链接.这就是它的全部内容.

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

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

希望能帮助到你!

Answer 3

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