Javascript 子元素的SVG填充宽度

我希望我的容器SVG元素能够缩放，以适合其子组元素，或者在溢出时显示滚动条。我想知道是否有css属性可以这样做

例如，如果标记如下所示：

<div class="wrapper" style="width:500px; overflow-x:scroll;">
   <svg class="main">
      <g width="1000"></g>
   </svg>
</div>

目前，我通过根据需要更新svg容器的宽度来使用javascript实现所需的效果；但这很麻烦，而且容易出错，因为我需要检查以确保在svg中添加任何新元素时，svg容器会调整大小以适应需要

---

任何帮助都将不胜感激。

不确定这是否解决了您的问题，但您可以将约束放在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;
}

.包装纸{
宽度：200px；
高度：100px；
溢出：滚动；
}
梅因先生{
宽度：400px；
高度：250px；
}

---

这里有一个。

从

中删除

宽度
和
高度
，并添加一个
视图框
属性。此外，还需要一个带有所需行为值的
preserveAspectRatio
属性

有关更多详细信息，请查看。此方法使用SVG视口，乍一看有点复杂，但实际上，它将可视维度与图形的图形设置分离。通过这种方式，
从它所处的上下文，从您案例中的css，接收它的宽度和高度

我花了一段时间才理解这个概念，但一旦你理解了它，你就会注意到它给你带来了很大的灵活性，这实际上比像素图像多得多。
当你向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添加节点时触发。它们将是理想的解决方案，但我相信它们在所有浏览器中都不受可靠支持。
有了上述功能，rect仍然会被剪裁（滚动条不会到达其末端）。我仍然需要动态设置svg的宽度和高度，以便外部div的滚动条到达rect的末尾。@funseiki-您可以通过向
svg
元素添加边距来解决这个问题。在我的回答中看到更新的提琴。这并不能解决问题，请尝试将矩形的x位置更改为300以获得夸张的视图。边距只是创建了一个额外的空白，但它实际上并没有将查看范围扩展到rect.Ah之外。我明白你的问题了。您需要一个能够处理svg大小的动态更改（或任何值）的外部容器。如果是这样的话，那么您最初的javascript策略可能是正确的。一直运行它似乎有点浪费。如果要修改DOM，在插入一些子元素后调用这样的函数并不困难。我同意这不是最好的解决方案，但OP希望有一种方法可以做到这一点，而不必“检查以确保在添加任何新元素时”。）这可以根据需要工作（除了负值），尽管我想我可能会坚持在添加新元素时进行更新。是的，我故意选择不处理负值以保持简单。如果希望这些对象可见，则需要更新viewBox以及宽度和高度。我不确定设置viewBox属性有何帮助。下面是一个关于你以上建议的例子。Preserve aspect ratio只有“meet”和“slice”，它们似乎都不能根据需要更新宽度（或添加滚动条）。老实说，我仍然不清楚您想要实现什么，但通过上述方法，您可以将svg适应其上下文的范围。如果不能通过一些css设置创建一个html元素以您希望的方式进行更新，那么svg元素也是不可能的，您必须使用javascript来实现这一点。
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);
}