Прокрутка svg внутри div

Question

У меня есть простой вариант использования. У меня есть внешний div и svg внутри. Мол,

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

Я пытаюсь получить SVG для прокрутки внутри DIV, но без удачи :(Я попытался установить:

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

svg { 
    width: 100%; 
} 

Но это не работает, вы, ребята, можете мне помочь

Answer 1

Обычно прокрутка отображается, когда вы устанавливаете размер в div, а содержимое (в вашем случае svg) переполняет размер. Например, это класс css, который я написал ранее сегодня который имеет полосу прокрутки на нем, когда содержимое начинает переполняться за пределами div

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

Answer 2

Я бы пометил div как переполнение: прокрутка.

Таким образом, по мере того, как компонент svg растет, div будет прокручивать его.

При использовании компонентов svg я всегда помещаю их в свой собственный div, чтобы отделить графический код от остальной части страницы.

Answer 3

вы должны определить высоту контейнера, иначе высота контейнера будет соответствовать высоте svg.

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

см https://jsfiddle.net/Lvnozzn2/1/