Svg scrolling inside div
I have a simple use case. I have an outer div and an svg inside. How,
<div>
<svg>
...
...
</svg>
</div>
I'm trying to get the svg to scroll inside a div, but with no luck :( I tried setting:
div {
position: relative;
width: 100%;
overflow: scroll;
}
svg {
width: 100%;
}
But it won't work, can you guys help me? Thanks for the help!
You have to define the height of the container, otherwise the height of the container will be adjusted for 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/
Usually the scrolling is displayed when you set the size to the div and the content (svg in your case) overflows the size. for example this is a css class I wrote earlier today that has a scrollbar on it when the content starts to overflow outside the div
#outbox_div {
border: 3px solid grey;
border-radius:2px;
height:200px;
width:80%;
overflow-y:scroll;
}
I would mark the div as overflow: scroll.
This way, as the svg component grows, the div will scroll through it.
When using svg components, I always put them in my own div to separate the graphical code from the rest of the page.