<div>里面的SVG总是比容器大

pas*_*sta 1 html svg scrollbar

我在DIV中有一个巨大的SVG文件.我想通过单击A链接在div中滚动SVG.

我的问题是我希望我的DIV保持小于我的SVG文档,所以我可以有活动的滚动条.假设我的SVG文档的高度为10.000和1.100宽度,在200px x 100px DIV元素内.但无论我做什么,我的DIV元素都会像SVG一样大.我怎样才能抑制div的大小?

这是我的代码:

<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>
Run Code Online (Sandbox Code Playgroud)

请注意,我尝试添加display:block; 到我的OBJECT标签的样式,但不起作用.

谢谢你的帮助,

安托万

nko*_*rth 5

有时height,widthHTML 和HTML属性不适用于CSS,因此请尝试使用CSS等效项.

#oo{
  height:200px;
  width:100px;
  margin-top:100px;
  overflow:scroll;
}
Run Code Online (Sandbox Code Playgroud)