在div中滚动svg

Question

我有一个简单的用例。我有一个外部div和一个svg。像，

<div>
  <svg>
     ...
     ...
  </svg>
</div>

我试图让svg在div中滚动，但没有任何运气:(我试过设置：

div {
  position: relative;
  width: 100%;
  overflow: scroll;
}

svg {
  width: 100%;
}

但它不起作用，你们可以帮帮我吗？谢谢你的帮助！

Answer 1

您必须定义容器高度，否则容器高度将调整为svg高度。

HTML：

<div>
    <svg viewbox="0 0 400 400">
        <path d="M 200 100 l 100 200 l -200 0 Z" stroke-width="5" stroke="red"></path>
    </svg>
</div>

的CSS：

div {
  position: relative;
  width: 100%;
  height: 400px;
  overflow-y: scroll;
}

请参阅https://jsfiddle.net/Lvnozzn2/1/

Answer 2

通常在为div设置大小时会显示滚动，并且内容（在您的情况下为svg）会溢出大小。例如，这是我今天早些时候写的css类，一旦内容开始溢出div之外就有一个滚动条

#outbox_div {
border: 3px solid grey;
border-radius:2px;
height:200px;
width:80%;
overflow-y:scroll;
}

Answer 3

我会将div标记为溢出：滚动。

这样，随着svg组件的增长，div将滚动适合它。

使用svg组件时，我总是将它们放在自己的div中，以便从页面的其余部分划分图形代码。

Answer 4

对于希望水平滚动工作的人们，svg需要特定的 css 宽度（以像素为单位），而包含元素（例如div）则需要overflow：scroll或类似内容。

我们在运行时构建了动态svg，因此我们在运行时进行了设置，例如：

<div class="container">
  <svg></svg>
</div>

<style>
.container {
  overflow: scroll;
}
</style>

和一些代码来确定运行时的宽度并将其设置为css属性

var $svg = $("svg"),
    bBox = $svg[0].getBBox();
$svg.css("width", bBox.width + "px");

所以它最终实际上是这样的：

<div class="container" style="overflow:scroll">
  <svg style="width:123px;"></svg>
</div>