SVG inside <div> always bigger than container_问答_开发者

SVG inside <div> always bigger than container

开发者 https://www.devze.com 2023-03-08 02:34 出处：网络

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.

相关专题：scrollbar svg

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">开发者_C百科;
        <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

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

Define the width & height in the svg:

<svg version="1.1" id="baum" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="100%"
     xml:space="preserve">

into something like this:

<svg version="1.1" id="baum" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="1000px" height="1000px" viewBox="0 0 200 200"
     xml:space="preserve">

I did not try it yet.