SVG внутри <div>всегда больше контейнера - PullRequest
Новая
       2

SVG внутри <div>всегда больше контейнера

1 голос
/ 25 мая 2011

У меня огромный файл SVG внутри DIV. Я хотел бы прокрутить SVG внутри div, нажав на ссылку A.

Моя проблема в том, что я хотел бы, чтобы размер DIV был меньше, чем у моего SVG-документа, чтобы у меня были активные полосы прокрутки. Допустим, высота моего SVG-документа составляет 10.000 и 1.100 ширины, внутри элемента DIV 200px x 100px. Но что бы я ни делал, мой элемент 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, но не работает.

Спасибо за помощь,

Antoine

Ответы [ 2 ]

5 голосов
/ 25 мая 2011

Иногда атрибуты HTML height и width плохо работают с CSS, поэтому попробуйте использовать эквиваленты CSS. 

#oo{
  height:200px;
  width:100px;
  margin-top:100px;
  overflow:scroll;
}
1 голос
/ 01 апреля 2013

Определите ширину и высоту в 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">

Я еще не пробовал.

...