SVG вътре в ‹div› винаги е по-голям от контейнера

Имам огромен 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='/bgjavascript: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, но не работи.

Благодаря за помощта,

Антоан


svg html scrollbar
person pasta    schedule 25.05.2011    source източник

Отговори (2)


arrow_upward
7
arrow_downward

Понякога HTML атрибутите height и width не работят добре с CSS, така че опитайте да използвате CSS еквивалентите.

#oo{
  height:200px;
  width:100px;
  margin-top:100px;
  overflow:scroll;
}
person nkorth    schedule 25.05.2011
comment
Благодаря много nkorth. Работи !!!!!!!! Това е наистина странно, че не работи обратното, почти ме подлуди... - person pasta; 25.05.2011
comment
Благодаря. Забравих за преливане: превъртане - person kolobok; 06.06.2016
comment
Не намерих решението. каква е разликата тук? - person Abhi; 15.03.2017
comment
Пристигнах тук, занимавайки се със странни подложки, появяващи се извън моя SVG. Конкретно настройката на h/w го оправи. - person ow3n; 01.05.2020

arrow_upward
1
arrow_downward

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

Все още не съм го пробвал.

person user2232350    schedule 01.04.2013