当SVG超出浏览器窗口时添加滚动条

时间:2012-06-19 20:57:42

标签: javascript svg embed

这里有一个问题,通过embed标签嵌入html中的svg元素。我只是为了调整正在显示的图形的功能而调整了大小,但是当调整大小超出浏览器窗口范围时会出现问题,因为没有显示滚动条。由于没有滚动条,因此图形卡在屏幕上,因为拖动手柄位于屏幕右下方。我尝试设置溢出来滚动嵌入元素,正文,html和它们的各种组合。我也尝试调整svg和embed元素的宽度,但这也没有。此外,我尝试将嵌入切换为对象标记,但这似乎也没有做到这一点。这是我的.xhtml页面的样式

html, body { margin:0; padding:0}
embed {  overflow:scroll; position: absolute; width: 100%; height: 100%; background-color: #AAAAAA}

这是文件中的svg元素定义

<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:ev="http://www.w3.org/2001/xml-events" version="1.1" baseProfile="full"
preserveAspectRatio="xMinYMin meet"
viewBox="0 0 1024 768" width="1024px" height="768px" 
onload="Initialize(evt)">

调整大小也是通过更改scale属性来完成的,而不是更改宽度和高度。这是指向页面的链接,以便您更好地了解问题(红色三角形是缩放处理):http://reu.dimacs.rutgers.edu/~scottm/SVG/Bellman.xhtml。德里克提供了一个小提琴:http://jsfiddle.net/DerekL/Cw9Dx/。当svg超大窗口时添加滚动条的任何帮助都将非常感激。提前致谢!

0 个答案:

没有答案