Fri*_*z45 1 javascript svg windows-7 internet-explorer-10
我正在 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>
我遇到了同样的问题，IE10 上的 SVG 滚动超出了内容。我通过简单地将以下内容添加到我的样式表或样式属性中的等效项来修复它。
svg {
overflow: hidden;
}
这花了我几个小时来追踪，但在我的默认样式表中使用一个规则，所有问题都消失了。
尽管 IE9 默认为隐藏，但似乎 IE9 和 10 是唯一支持 SVG 对象溢出的浏览器。看起来 IE10 是符合规范的，因为溢出意味着默认对 HTML 中的所有对象可见。
仍然不确定为什么 svg 内容不适合 svg 对象，但是......
希望这可以帮助。