如何在SVG中获取ScrollBars？ [英] How to get ScrollBars in SVG?

问题描述

我有一个SVG元素里面有很多元素。 SVG元素有一个viewbox，所以你可以按一个缩放按钮，元素显示更大或更小。效果很好。现在问题是，当元素溢出父SVG元素时，不会出现ScrollBars。

I have a SVG-element with a lot of elements inside. The SVG-element has a viewbox, so you can press a zoom-button and the elements appear bigger or smaller. Works well. Now the problem is, when the elements overflow the parent SVG-element no ScrollBars appear.

示例：

<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标签中。不工作。

Can someone help me? I put the overflow attribut in the svg and also in the div tag. doesn't work.

推荐答案

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

Try making the SVG element bigger than the div, and let the div handle the overflow using scroll.

例如，请参阅 jsfiddle ，它使用以下css ：

For example, see this jsfiddle, which utilizes the following 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;
}

这篇关于如何在SVG中获取ScrollBars？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！