<div> 内的 SVG 总是比容器大答案

【问题标题】：SVG inside <div> always bigger than container<div> 内的 SVG 总是比容器大
【发布时间】：2011-09-01 18:26:42
【问题描述】：

我在 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 标记的样式中，但不起作用。

感谢您的帮助，

安东尼

【问题讨论】：

标签： html svg scrollbar

【解决方案1】：

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

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

【讨论】：

非常感谢 nkorth。有用！！！！！！！！这真的很奇怪，它不能反过来工作，几乎让我发疯......
谢谢。我忘了溢出：滚动
我没有解决方案。这里有什么区别？
我来到这里是因为我的 SVG 外部出现了奇怪的“填充”。专门设置硬件修复它。

【解决方案2】：

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

我还没试过。

【讨论】：