<div>内的SVG始终大于容器

问题描述

| 我在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>

请注意，我尝试添加 display：block;。到我的OBJECT标签的样式，但是不起作用。感谢您的帮助，安托万

解决方法

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

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

,在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\">

变成这样的东西：

<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\">

我还没有尝试过。

div div svg svg svg 大于大于始终容器容器容器容器

<div>内的SVG始终大于容器

问题描述

解决方法

相关问答