Я хочу поместить полосу прокрутки в мое изображение SVG, чтобы оно занимало только определенную область на моей веб-странице

Question

У меня есть файл SVG, который занимает почти всю страницу HTML.Вместо этого я хочу поставить полосу прокрутки и дать ей только определенное пространство, чтобы я мог разместить другие элементы на странице.Но это обрезает мое изображение, может быть, потому, что в нем есть элементы, координаты которых не помещаются в заданное пространство, а полоса прокрутки также не отображается.

Как получить полосы прокрутки в SVG? Добавить полосу прокрутки к контейнеру SVG

Вариант 1, который я попробовал:

    <svg viewbox = "0 0 825 1275" xmlns="http://www.w3.org/2000/svg" style="overflow-x: scroll; overflow-y: scroll;">
      <line stroke ="black" x1 = "787.5" y1 = "412.5" x2 = "712.5" y2 = "37.5" nodeIndex="1"></line><text text-anchor = "middle" dominant-baseline = "central" x = "758" y = "217" >a6</text><line stroke ="black" x1 = "787.5" y1 = "412.5" x2 = "712.5" y2 = "787.5" nodeIndex="1"></line>
...
...
...

Вариант 2, который я попробовал:

    <div class="container">
    <Object type="image/svg+xml" id="mySVG"  data="svg/glycan-114.svg">
     Your browser does not support SVG
     </Object>
    </div>

CSS:

#container{
        height: 400px;
        width: 400px;
        overflow: scroll;
}
#mySVG {
    width :100px;
    height:1000px;
    position: relative;
    overflow: scroll;
}

Answer 1

Попробуйте обернуть <svg></svg> в <div> и применить полосу прокрутки переполнения на <div>:

<div class="container">
    <svg>
        <line></line>
        <text></text>
        <line></line>
    </svg>
</div>

.container {
    width: 200px;
    height: 200px;
    overflow: scroll;
}

Любая часть <svg>, которая не помещается в области контейнерадоступ к ним можно получить с помощью полосы прокрутки.

Если вам также требуется, чтобы <svg> полностью содержал в области контейнера, вы можете поиграть с преобразованиями SVG, такими как уменьшение SVG.

Пожалуйста, обратитесь к следующему jsfiddle примеру.