2

2 つの Raphael 要素を作成し、DOM の 1 つの 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>

この例では、緑の四角形が赤の前にプロットされると予想していました。しかし結果は違うようです。この動作の理由は何ですか?

出力 html を chrome でチェックアウトしましたが、驚いたことに、赤い四角形の 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 の動作を制御する方法はありますか。

4

1 に答える 1

2

Raphael は新しい SVG 要素を常にコンテナーの最初の子要素として追加します。Raphaelの関連コードは 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要素への接続を切断するため、後で要素を変更/追加する必要がある場合、実際には解決策ではありません.

最後に、内部に追加の要素を作成し、Raphaëls をそれらの要素内に初期化することもできdivますsample-1 div。

于 2013-10-29T13:20:54.020 に答える