Home/ Questions/Q 5936857
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T15:27:26+00:00

I have a huge SVG file inside a DIV. I would like to scroll

  • 0

I have a huge SVG file inside a DIV. I would like to scroll the SVG inside the div by clicking on a A link.

My problem is that I would like my DIV to stay smaller than my SVG document, so I can have active scrollbars.
Let’s say my SVG document’s height is 10.000 and 1.100 width, inside a 200px x 100px DIV element. But whatever I do, my DIV element gets as big as the SVG. How can I restrain the size of my div ?

Here is my code:

<html>
<title>
YOP
</title>

<head>

<style TYPE="text/css"> 
<!--
  div.header{

background:black;
background-color: #ededed; 
margin-top: 0px;
position: fixed;
top: 0px;
//width:100%;
width:1100px;
height: 500px;
   }

 -->
 </style>


<script type="text/javascript" >        
      var pos = 0;

       function  MyFtion(){
       var elem = document.getElementById('aSVG');      

       pos = pos + 100;
       elem.scrollTop = pos + 100;
       window.scroll(0,   pos);

      }
 </script>
 </head>

 <body bgcolor="white" >

        <div class="header" id="MyDiv2">
        <a href='javascript:MyFtion()'>** Move s**</a> 
        </div>


    <div id="oo"  height="200px" width="100px" style="margin-top:100px;overflow:scroll;" >          
            <object id="aSVG" data="out.svg"  style="margin-top:100px;overflow:hidden;" /> 
    </div>


  </body>
 </html>

Note that I tried to add display:block; to the style of my OBJECT tag but doesnt work.

Thanks for helping,

Antoine

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Sometimes the height and width HTML attributes don’t work well with CSS, so try using the CSS equivalents.

    #oo{
  height:200px;
  width:100px;
  margin-top:100px;
  overflow:scroll;
}
    • 0