Css 如何制作<；svg>；元素是否展开或收缩到其父容器？

目标是使

元素扩展到其父容器的大小，在本例中为

，无论该容器有多大或多小

守则：

<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>

但是，在

元素中的元素具有预定义的宽度和/或高度的情况下，这似乎不起作用。例如，上述代码中的

元素显式设置了其宽度和高度

因此，显而易见的解决方案是在这些元素上使用%宽度和%高度。但这真的非得这么做吗？特别是，由于

工作良好，并且在显式设置

高度和宽度时展开/收缩没有任何问题

---

如果像

这样的元素以及其他类似的元素必须以百分比的形式定义其宽度和高度，Inkscape中是否有一种方法可以将其设置为所有包含

文档的元素都使用百分比宽度、高度等。。取而代之的是固定尺寸？

视图框的高度不是容器的高度，而是图形的大小。将

viewBox

的宽度定义为100个单位，然后将

rect

的宽度定义为10个单位。在此之后，无论SVG的缩放大小，

rect

都将是图像宽度的10%。

@robertc是正确的，但您还需要注意，

SVG、#container

会导致SVG以指数方式缩放，但缩放的对象不是100%（一次是

#container

，一次是

SVG

）

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

当按照@robertc的建议使用时，一个选择器可以正常工作

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

---

对于您的iphone，您可以在头部使用应答器：

"width=device-width"

---

我最近的工作是从

标记和所有子标记中删除所有

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>

圆圈cx=“1606”cy=“1606”r=“1387”stroke=“black”stroke width=“438”/

之后：

<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>

圆圈cx=“1606”cy=“1606”r=“1387”stroke=“black”stroke width=“438”/

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

我想把它放在一个分区里，让它负责地填满分区。我的做法如下：

<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>

首先，我在像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？@AdrianLang当您在SVG对象上设置大小时，缩放会自动发生，正如问题中的代码中所做的那样。你说得对，太好了，这对我来说真的很有用。我想我的问题是svg根元素中的height和width属性。对该提琴进行横向和纵向调整，而不保留纵横比，并使其在IE中工作，而提交的fiddle@robertc则不行。希望它能帮助别人走下去！默认情况下，svg将尽可能大，以便完全可见，但保留其纵横比（因此方形视口不会完全填充矩形父视图）。如果确实要强制它完全覆盖父容器，请添加到SVG元素。这是因为选择器

SVG，#container

与

SVG

dom元素和

#container

dom元素都匹配。我相信您是在寻找

svg#container

，但如果您使用的是ID，那么就不需要指定家长。这不正是我说的“一次用于容器，一次用于svg”吗？哦，对不起，您是对的，但是您的回答有点奇怪，导致了误解。这听起来像是在谈论一个潜在的问题。将svg另存为文件，然后将其作为图像引用，这样您就可以使用宽度：100%或高度：100%可能重复+1作为PreserveSpectratio注释。在上上下下搜寻SVG以实际拉伸（而不是缩放）到div之后，这是正确的答案。@Gazoris，感谢您提供了这个精彩的答案。我有同样的问题。如果我的svg是嵌套的呢。例如，我想有条件地显示SVG1和SVG2，它应该采用容器的宽度和高度。你能帮我解决这个问题吗？@Reza Baradaran:天才。你能举个有效的例子吗？我什么都做不了，这对我也有好处。我编辑了这个问题以添加一个示例。

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