子元素的SVG填充宽度

Question

我希望我的容器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;
}

目前，我通过根据需要更新svg容器的宽度来使用javascript达到预期的效果； 但这很麻烦且容易出错，因为我需要检查以确保在svg内添加任何新元素时，svg容器的大小都可以调整。

任何帮助将非常感激。

Answer 1

不知道这是否可以解决您的问题，但是您可以将约束条件放在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 。

Answer 2

从<svg>删除width和height ，并添加viewBox属性。 Addionally你需要一个preserveAspectRatio与你期望的行为的价值属性。

有关更多详细信息，请在此处查看 。 这种方法使用SVG视口，乍一看有点复杂，但是实际上，这会将可见尺寸与图形的图形设置分开。 这样， <svg>从它所在的上下文（从您的案例中的css）接收其宽度和高度。

我花了一段时间来理解这个概念，但是一旦理解了它，您会发现它给您很大的灵活性，实际上比像素图像具有更多的灵活性。

Answer 3

向其中添加元素时，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时触发。 它们将是理想的解决方案，但是我相信并非所有浏览器都可靠地支持它们。