How to get ScrollBars in SVG?

Question

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.

Example:

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

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

Answer 1

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

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

Answer 2

Part of the point of SVG is so that it can scale to fit the screen. However, I think if you want to get something like what you are describing, then you need to set explicit width and height to the svg element. Something like http://jsfiddle.net/qTFxJ/13/ where I set the width and height in pixels to match your viewBox size.