假设我创建了两个 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 重新排序，或者有没有办法在将 SVG 添加到 div 时控制 RaphaelJS 的行为。
最佳答案
Raphael 始终将新的 SVG 元素添加为容器的第一个子元素。相关code拉斐尔的第 1247-1251 行:
if (container.firstChild) {
container.insertBefore(cnvs, container.firstChild);
} else {
container.appendChild(cnvs);
}
最简单的“修复”是以相反的顺序初始化 Raphaël Canvas ，因此 paper1 在 paper 之前。您还可以手动重新排序它们，例如:
var cont = document.getElementById("sample-1");
cont.appendChild(cont.firstChild);
然而，这会断开 Raphaël 与 DOM 元素的连接，因此如果您之后仍需要更改/添加元素，那么这并不是一个真正的解决方案。
最后，您还可以在 sample-1 div 中创建额外的 div 元素，并将 Raphaëls 初始化为位于这些元素内。
关于javascript - 重新排序 RaphaelJS 创建的 SVG 元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19657919/