Как получить ScrollBars в SVG?

У меня есть SVG-элемент с большим количеством элементов внутри. SVG-элемент имеет окно просмотра, поэтому вы можете нажать кнопку масштабирования, и элементы выглядят больше или меньше. Работает хорошо. Теперь проблема в том, что когда элементы переполняют родительский SVG-элемент, не появляются прокрутки.

Пример:

<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. не работает.

Ответ 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;
}

Ответ 2

Часть точки SVG такова, что она может масштабироваться, чтобы соответствовать экрану. Тем не менее, я думаю, что если вы хотите получить что-то вроде того, что вы описываете, вам нужно установить явные width и height в элемент svg. Что-то вроде http://jsfiddle.net/qTFxJ/13/, где я установил width и height в пикселях в соответствии с вашим размером viewBox.