Clever Geek Handbook

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!

+3


source to share


3 answers


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/

+3


source


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


source


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.

+1


source






More articles:


All Articles