Question

我希望我的容器SVG元素可以扩展以适应其子组元素或者在溢出时显示滚动条。我想知道是否有一个css属性才能这样做。

E.g。如果标记如下所示：

<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容器会调整大小以适应。

非常感谢任何帮助。

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

从width删除height和<svg>，然后添加viewBox属性。另外，您需要一个preserveAspectRatio属性，其值为您所需的行为。

有关详细信息，请查看here。此方法使用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);
}

Demo here

点击＆＃39;添加更多＆＃39;将随机圆圈添加到SVG。

DOM2添加了一些在向DOM添加节点时应该触发的事件类型。它们将是理想的解决方案，但我相信它们并非在所有浏览器中得到可靠支持。

SVG填充宽度为子元素

3 个答案: