【发布时间】：2013-04-12 04:12:12
【问题描述】：
我正在 DIV 中绘制 SVG。绘图大于 DIV，因此滚动变为活动状态。我正在我的电脑上测试这个，它有 IE10 和 Windows 7。IE10 似乎将 SVG 绘图滚动到它的终点。 IE9、Chrome 和 Firefox 不这样做。下面的代码重现了这个问题。
如果您使用它来创建一个 html 页面并在 Chrome 中运行它，您应该会在滚动时看到从左上角到右下角的一行。在滚动的最右侧，这条线正好停在黄绿色 SVG 元素的右侧，红线表示限制。
但是，在我的 Windows 7 机器上使用 IE10 时，该行在末端的左侧稍稍停了下来。随着 SVG 绘图大小的增加，这个“有点”会变得更大。似乎 IE 将 SVG 绘图滚动到了其右极限。当我尝试获取点击位置并将其转换回真实坐标时，这对我造成了严重破坏。
我之前发布了这个问题，认为问题出在 IE9 和 IE10 中，但从那以后我将它隔离到 IE10。我也在另一个论坛（http://social.msdn.microsoft.com/Forums/en-US/iewebdevelopment/thread/0d4ef7dd-7e1c-4a09-a483-2760367a2e84）上发帖，有人回来说他们没有看到同样的问题。所以它可能与兼容性视图有关。但是，如果我在测试时在 IE 中按 F12，我会看到“浏览器模式：IE10，文档模式：标准”
非常感谢您的帮助！
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>IE SVG SCroll Problem</title>
<META http-equiv="CACHE-CONTROL" content="NO-CACHE, NO-STORE" />
</head>
<body onload="draw()">
<div style="position:absolute; left:100px; top:50px; width:500px; height: 300px; background-color:wheat;">
<div id="plotRect" style="position:relative; left:40px; top:25px; width:400px; height:240px;
background-color:antiquewhite; border:1px solid black; overflow-x:auto; overflow-y:hidden;">
</div>
</div>
<script type="text/javascript">
var svgNS = "http://www.w3.org/2000/svg";
function draw() {
//plotRect is the inner div that holds the SVG drawing. We want to scroll on this.
var plotRect = document.getElementById("plotRect");
//Add SVG viewbox element to hold the svg drawing
var width = 5800; //container div is only 400px wide, so this will cause scrollbar to show
var height = 240; //same as container div
var svg = document.createElementNS(svgNS, "svg");
svg.setAttribute("id", "test");
svg.setAttribute("version", "1.2");
svg.setAttribute("width", width);
svg.setAttribute("height", height);
svg.setAttribute("style", "background-color:yellowgreen; overflow:hidden");
svg.setAttribute("preserveAspectRatio", "none");
plotRect.appendChild(svg);
//now draw a line from top left corner to bottom right corner
var x1 = 0;
var y1 = 0;
var x2 = width; //note this width is same as the viewbox width
var y2 = 220;
//add the line
var l = document.createElementNS(svgNS, 'line');
l.setAttribute("x1", x1);
l.setAttribute("y1", y1);
l.setAttribute("x2", x2);
l.setAttribute("y2", y2);
l.setAttribute("stroke-width", 3);
l.setAttribute("stroke", "black");
svg.appendChild(l);
var l1 = document.createElementNS(svgNS, 'line');
l1.setAttribute("x1", x2);
l1.setAttribute("y1", y1);
l1.setAttribute("x2", x2);
l1.setAttribute("y2", y2);
l1.setAttribute("stroke-width", 3);
l1.setAttribute("stroke", "red");
svg.appendChild(l1);
}
</script>
</body>
</html>
【问题讨论】：
标签： javascript windows-7 svg internet-explorer-10