Windows 7上的IE10：SVG在div內滾動太遠

我正在做一個DIV內的SVG繪圖。圖形大於DIV，因此滾動變爲活動狀態。我在我的電腦上測試了這個功能，IE10和Windows 7都支持IE10。IE10似乎將SVG繪圖捲動到最終點。 IE9，Chrome和Firefox不會這樣做。下面的代碼重現了這個問題。Windows 7上的IE10：SVG在div內滾動太遠

如果你使用這個來創建一個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>

來源

2013-04-18 Fritz45

我有同樣的問題，與IE10上的SVG滾動超出內容。我通過簡單地將以下內容添加到我的樣式表或樣式屬性中的等效項中來修復它。

svg { 
    overflow: hidden; 
}

這花了我小時追查，但在我的默認樣式單一的規則，所有的問題都沒有了。

IE9 & 10是唯一支持SVG對象溢出的瀏覽器，儘管IE9默認爲隱藏。看起來IE10是符合規格的，因爲溢出意味着默認爲在HTML中的所有對象上都可見。

不過不知道爲什麼SVG內容不適合不過SVG對象中......

希望這有助於。

來源

2013-07-19 14:53:57 Mog0

這也解決了我的IE11與SVG問題。這裏有一些非常愚蠢的東西，我把它追蹤到一個單獨的元素，這個元素是NOWHERE靠近屏幕邊緣或任何其他div邊界。文檔中的任何SVG 節點都會導致出現滾動條。當然，所有其他臺式機和設備上的Chrome，FF和Safari都可以使用FINE。測試Win7，iPad（原創和Air）和Nexus 7 Android平板電腦。在W3C上驗證的代碼也是如此。這是MSIE的錯誤。但我們當然知道，對吧？ IE 11，新號碼，同一件s ^％t。 –

@ Fritz45 - 這值得標記爲答案，是嗎？ –

Windows 7上的IE10：SVG在div內滾動太遠

回答

相關問題