重新排序RaphaelJS创建的SVG元素?

时间:2013-10-29 12:13:03

标签: javascript svg raphael

让我们假设我创建了两个Raphael元素并附加到DOM中的单个div元素。例如:http://jsfiddle.net/sreedharmb/ApnwB/2/

<!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,或者有一种方法可以在将div添加到div时控制RaphaelJS的行为。

1 个答案:

答案 0 :(得分:2)

Raphael将新的SVG元素添加为容器的第一个子元素。拉斐尔的相关code是第1247-1251行:

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

最简单的“修复”是以相反的顺序初始化Raphaël画布,因此在paper1之前paper。您也可以手动对它们进行重新排序,例如:

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

然而会破坏从Raphaël到DOM元素的连接,因此如果您之后仍需要更改/添加元素,那么它实际上不是解决方案。

最后,您还可以在div sample-1中创建其他div元素,并将Raphaëls初始化为这些元素。