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

删除 width和 height来自 <svg>并添加 viewBox属性代替。另外你需要一个 preserveAspectRatio具有所需行为值的属性。

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

我花了一段时间才理解这个概念，但是一旦你理解了它，你就会发现它给了你很大的灵 active ，这实际上比像素图像要多得多。