重新排列RaphaelJS創建的SVG元素？

讓我們假設我創建了兩個Raphael元素並附加到DOM中的單個div元素。例如：http://jsfiddle.net/sreedharmb/ApnwB/2/重新排列RaphaelJS創建的SVG元素？

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>append demo</title> 
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script> 
</head> 
<body> 

    <div id="sample-1"></div> 

    <script> 
     var paper = Raphael("sample-1", 200, 75); 
     var paper1 = Raphael("sample-1", 200, 75); 
     var rect = paper.rect(10, 10, 50, 50); 
     var rect1 = paper1.rect(10, 10, 50, 50); 

     rect.attr({fill: "green"}); 
     rect1.attr({fill: "red"});  
    </script> 

</body> 
</html>

在這個例子中，我希望綠色矩形前紅色標繪。但結果似乎不同。這種行爲的原因是什麼？

我檢出了chrome中的輸出html，令我驚訝的是紅色矩形的SVG元素位於綠色矩形的上方。

<body> 
<div id="sample-1"> 
<svg height="75" version="1.1" width="200" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative;"><desc style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Created with Raphaël 2.1.0</desc><defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></defs><rect x="10" y="10" width="50" height="50" r="0" rx="0" ry="0" fill="#ff0000" stroke="#000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></rect></svg> 
<svg height="75" version="1.1" width="200" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative;"><desc style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Created with Raphaël 2.1.0</desc><defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></defs><rect x="10" y="10" width="50" height="50" r="0" rx="0" ry="0" fill="#008000" stroke="#000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></rect></svg> 
</div> 

<script> 
    var paper = Raphael("sample-1", 200, 75); 
    var paper1 = Raphael("sample-1", 200, 75); 
    var rect = paper.rect(10, 10, 50, 50); 
    var rect1 = paper1.rect(10, 10, 50, 50); 

    rect.attr({fill: "green"}); 
    rect1.attr({fill: "red"});  
</script> 
</body>

是否有重新排序由RaphaelJS創建的SVG的方式還是有辦法控制RaphaelJS的行爲，同時加入SVG到一個div。

來源

2013-10-29 Sreedhar M B

Raphael總是添加新的SVG元素作爲容器的第一個子元素。在拉斐爾相關code是線1247至1251年：

if (container.firstChild) { 
    container.insertBefore(cnvs, container.firstChild); 
} else { 
    container.appendChild(cnvs); 
}

最簡單的「修復」是初始化拉斐爾的油畫以相反的順序，所以paper1前paper。您也可以手動重新排序，通過，例如：

var cont = document.getElementById("sample-1"); 
cont.appendChild(cont.firstChild);

然而，這將擺脫拉斐爾DOM元素連接，因此是不是一個真正的解決辦法，如果你還需要更改/添加元素之後。

最後，您還可以在您內部創建其他div元素sample-1div並初始化Raphaëls以進入這些元素。

來源

2013-10-29 13:20:54 ville

非常感謝..臨時我以相反的順序初始化Raphael畫布。 –

重新排列RaphaelJS創建的SVG元素？

回答

相關問題