1

我正在 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>
4

1 回答 1

5

我遇到了同样的问题，IE10 上的 SVG 滚动超出了内容。我通过简单地将以下内容添加到我的样式表或样式属性中的等效项来修复它。

svg {
    overflow: hidden;
}

这花了我几个小时来追踪，但是在我的默认样式表中使用一条规则，所有问题都消失了。

尽管 IE9 默认为隐藏，但 IE9 和 10 似乎是唯一支持 SVG 对象溢出的浏览器。看起来 IE10 是符合规范的，因为溢出意味着默认在 HTML 中的所有对象上可见。

仍然不确定为什么 svg 内容不适合 svg 对象但是......

希望这可以帮助。

于 2013-07-19T14:53:57.307 回答