Scroll svg inside div

Question

I have a simple use case. I have an outer div and an svg inside. Like,

<div>
  <svg>
     ...
     ...
  </svg>
</div>

I am trying to get the svg to scroll inside the div, but without any luck :( I tried setting:

div {
  position: relative;
  width: 100%;
  overflow: scroll;
}

svg {
  width: 100%;
}

But it does not work, can you guys help me out? Thanks for the help!

Answer 1

you have to define the container height, otherwise the container height will be adjusted to the svg height.

html:

<div>
    <svg viewbox="0 0 400 400">
        <path d="M 200 100 l 100 200 l -200 0 Z" stroke-width="5" stroke="red"></path>
    </svg>
</div>

css:

div {
  position: relative;
  width: 100%;
  height: 400px;
  overflow-y: scroll;
}

see https://jsfiddle.net/Lvnozzn2/1/

Answer 2

Usually scrolling will show up when you set a size to the div and the content (in your case the svg) overflows the size. for instance this is the css class that I wrote earlier today that has a scroll bar on it once the content starts overflowing outside the div

#outbox_div {
border: 3px solid grey;
border-radius:2px;
height:200px;
width:80%;
overflow-y:scroll;
}

Answer 3

I would mark the div as overflow:scroll.

This way, as the svg component grows the div will scroll fit it.

When using svg components I always put them inside their own div to compartmentalize the graphics code from the rest of the page.