38

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.

snapple
  • 411
  • 1
  • 5
  • 7
  • 1
    Don't know how I ended up on this page a few days ago but take a look: http://www.carto.net/svg/gui/scrollbar/ might be of help – jValdron Dec 01 '11 at 16:25
  • i know this example, but they create their own scrollbar with svg/js and not the html/css default scrollbar. – snapple Dec 01 '11 at 16:33
  • https://old.carto.net/papers/svg/gui/scrollbar/ updated link – Simon D Nov 08 '21 at 00:02

2 Answers2

47

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;
}
s2t2
  • 2,462
  • 5
  • 37
  • 47
Akhilesh
  • 522
  • 4
  • 5
  • 1
    Dear Akhilesh, [it would be preferable](http://meta.stackexchange.com/q/8259) to include the essential parts of the answer here, and provide the link for reference. – osyan Oct 11 '12 at 08:14
6

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.

ScottS
  • 71,703
  • 13
  • 126
  • 146
  • Thanks. I updated the code but it doesn't look better now. Here's the code: http://jsfiddle.net/qTFxJ/17/. – snapple Dec 04 '11 at 12:41
  • I'm not sure what you mean by not better. I see scroll bars, which was what you wanted. I don't know what your final "look" is supposed to be. I did notice that your example did not have the width/height of the svg element set to the same numbers as the viewBox like mine did. I don't know if that is why yours does not look as you expect or not. – ScottS Dec 04 '11 at 19:03
  • Ok, well I try to describe my problem again. Example: http://jsfiddle.net/qTFxJ/18/ I have a svg element with a fixed width and height (400px). I have also a viewbox to make the elements inside the svg element bigger or smaller. In this example, my rects width/height is 400px and the x/y coordinates are 40px. Soo you can't see the rect completly. Now I want to get the scrollbar in the svg element to see the rect completly. – snapple Dec 06 '11 at 13:28
  • 2
    @snapple--I don't know why I missed this a few months ago when you posted it. Anyway, recent activity drew my attention back. What you need to do is always scale the viewbox to the size you need to display the items on it, then set your wrapper `div` to the fixed `width` and `height` and `overflow: auto`. See http://jsfiddle.net/qTFxJ/30/. – ScottS May 26 '12 at 02:56
  • @ScottS When you say 'what you want to do' do you really mean 'what you need to do because browsers are broken'? – Thomas Ahle Sep 07 '12 at 23:24