在 div 内滚动 svg

Question

我有一个简单的使用案例。我有一个外部div和内部的svg。如下所示：

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

我正在尝试让svg在div内滚动，但是一直不成功:( 我尝试设置:

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

svg {
  width: 100%;
}

但是它不起作用，你们能帮我吗？感谢您的帮助！

- waka-waka-waka

---

您应该发布完整的代码或创建fiddle。 - ketan

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;
}

see https://jsfiddle.net/Lvnozzn2/1/

- Pavel Gatnar

---

这适用于固定高度。我希望对于具有固定高度和固定宽度的div也是如此。 - Kamalakannan J

Answer 2

通常情况下，当你设置 div 的大小并且内容（在您的情况下为 svg）超出了大小时，将会出现滚动条。例如，这是我今天早些时候编写的 CSS 类，一旦内容开始溢出 div 外部，它就会出现滚动条。

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

- Mark

---

谢谢，它帮了我很大的忙。 - Harsh Trivedi

Answer 3

我会将div标记为overflow:scroll。

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

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

- Marcus Henry

---

谢谢，我将外部div的溢出设置为滚动（纠正了问题）。外部div和svg的宽度均设置为100％。看起来似乎没有效果。 - waka-waka-waka

不要在SVG上设置大小。这会阻止SVG变得比其包含的DIV更大。 - Marcus Henry

谢谢，这很有帮助。 - Harsh Trivedi

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>

- Simon Francesco