我在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标记的样式中但不起作用。
感谢您的帮助,
安托
答案 0 :(得分:5)
有时,height
和width
HTML属性不适用于CSS,因此请尝试使用CSS等效项。
#oo{
height:200px;
width:100px;
margin-top:100px;
overflow:scroll;
}
答案 1 :(得分:1)
定义宽度和宽度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">
我还没试过。