我想把一个滚动条放到我的svg图像上，这样它就只占用我网页上的特定区域

Question

I have a svg file which occupies almost the entire HTML Page. Instead i wish to put a scrollbar and give it only a specific space so that I can place other elements in the page. But it cuts off my image maybe because it has elements which have co-ordinates that don't fit inside the give space and the scrollbar also doesn't show up.

How to get ScrollBars in SVG? Add scrollbar to svg container

Option 1 that I tried :

    <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>
...
...
...

Option 2 that I tried :

    <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

Try wrapping the <svg></svg> in a <div> and applying an overflow scrollbar on the <div> :

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

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

Any portion of the <svg> that doesn't fit within the container area can be accessed using the scrollbar.

If you also require the <svg> to fully contain within the container area, you might want to play around with SVG transformations like scaling down the SVG.

Please refer to the following jsfiddle example.