如何在 SVG 中获取滚动条？

Question

我有一个 SVG 元素，里面有很多元素。 SVG 元素有一个视图框，因此您可以按下缩放按钮，元素看起来更大或更小。效果很好。现在的问题是，当元素溢出父 SVG 元素时，不会出现 ScrollBars。

示例：

<div width="100%" height="100%">
<svg height="100%" width="100%" style="overflow-x: auto; overflow-y: auto; "viewBox="0 0 793 1122">
<g>
...
<line y2="44.9792mm" y1="44.9792mm" x1="197.203mm" x2="12.7028mm"></line>
<line y2="44.9792mm" y1="44.9792mm" x1="197.203mm" x2="12.7028mm"></line>
<text x="43.4516mm" y="52.9167mm" style="font-size: 11pt;">S</text>
<rect x="0" width="210mm" y="0" height="297mm"></rect>
...
</g>
</svg>
</div>

---

//here I set the viewbox after clicking the zoomOut-Button
float width = svg.getViewBox().getBaseVal().getWidth();
float height = svg.getViewBox().getBaseVal().getHeight();

svg.getViewBox().getBaseVal().setHeight((float) (height / 0.9));
svg.getViewBox().getBaseVal().setWidth((float) (width / 0.9));

有人可以帮助我吗？ 我将溢出属性放在 svg 和 div 标签中。不工作。

Answer 1

尝试让 SVG 元素大于 div，并让 div 使用滚动处理溢出。

例如，看这个jsfiddle，它利用了以下css：

div#container {
  height: 400px;
  width: 400px;
  border:2px solid #000;
  overflow: scroll;
 }
svg#sky {
  height: 100px;
  width: 1100px;
  border:1px dotted #ccc;
  background-color: #ccc;
}

Answer 2

SVG 的部分意义在于它可以缩放以适应屏幕。但是，我认为如果你想得到你所描述的东西，那么你需要将明确的width 和height 设置为svg 元素。像http://jsfiddle.net/qTFxJ/13/ 这样我将width 和height 设置为像素以匹配您的viewBox 大小。