SVG填充宽度到子元素
我想让我的容器SVG元素缩放，以便适合它的子组元素，或者让它在溢出时显示滚动条。我想知道是否有一个css属性来做到这一点。
例如，如果标记如下所示：
<div class="wrapper" style="width:500px; overflow-x:scroll;">
<svg class="main">
<g width="1000"></g>
</svg>
</div>我如何让svg的宽度填充到'1000‘，或者如果子元素超过宽度就显示滚动条？
以下css对上述内容没有影响：
.main {
width: 500px; // Setting to 100% also does nothing
overflow-x: scroll;
}目前，我使用javascript根据需要更新svg容器的宽度，以达到预期的效果；但这很麻烦，而且容易出错，因为我需要检查以确保在svg中添加任何新元素时，svg容器的大小都会调整到合适的大小。
任何帮助都将不胜感激。
回答 3
Stack Overflow用户
发布于 2014-05-04 17:11:10
从<svg>中删除width和height，然后添加一个viewBox属性。此外，您还需要一个具有所需行为的值的preserveAspectRatio属性。
有关更多详细信息，请查看here。此方法使用SVG视口，乍一看有点复杂，但实际上，它将可见尺寸与图形的图形设置分开。这样，<svg>从它所处的上下文接收其宽度和高度，在本例中是从css接收的。
我花了一段时间来理解这个概念，但一旦你理解了它，你就会注意到它给了你很大的灵活性，这实际上比像素图像要多得多。
Stack Overflow用户
发布于 2014-05-04 06:00:34
我不确定这是否解决了您的问题，但是您可以将约束放在svg的父标记( div标记)上。
如下所示：
<div class="wrapper">
<svg class="main" xmlns="http://www.w3.org/2000/svg">
<g>
<rect x="20" y="20" height="250" width="400" style="fill:#006600"/>
</g>
</svg>
</div>
.wrapper {
width: 200px;
height: 100px;
overflow: scroll;
}
.main {
width: 400px;
height: 250px;
}这是一个jsfiddle。
Stack Overflow用户
发布于 2014-05-05 04:42:06
当您向SVG添加元素时，无法让SVG自动更新其宽度和高度。您所能做的就是手动更新宽度和高度。
但是，不必每次添加内容时都要更新SVG的宽度和高度，您可以添加一个间隔计时器函数来为您执行检查。
setInterval(mySVGCheckFn, 500);
function mySVGCheckFn()
{
var svg = document.getElementById("mysvg");
var bbox = svg.getBBox();
// Add 10 padding for some breathing space
svg.setAttribute("width", bbox.x + bbox.width + 10);
svg.setAttribute("height", bbox.y + bbox.height + 10);
}单击“添加更多”将随机圆添加到SVG中。
DOM2添加了一些事件类型，这些事件类型应该在您向DOM添加节点时触发。它们将是理想的解决方案，但是我相信它们并不是在所有浏览器上都能得到可靠支持。
https://stackoverflow.com/questions/23452610
复制
![wordpress子比主题更改首页样式全宽度[美化教程]](https://developer.qcloudimg.com/http-save/yehe-admin/29c974432e479e2d6c558ac38d83ec48.jpg)
![如何提升你的CSS技能，掌握这20个css技巧即可[完整版]](https://ask.qcloudimg.com/http-save/yehe-5587302/7n8gzjn5p5.gif)
腾讯云开发者
