web-dev-qa-db-ja.com

SVG並べ替えz-index（オプションのラファエル）

作成後にRaphaelまたはその基礎となるSVG要素を並べ替える方法を教えてください。さらに良いことに、SVGにはレイヤーのようなものがありますか？

理想的には、いつでも要素を配置する2つ以上のレイヤーが欲しいです。背景レイヤーと前景レイヤー。それがオプションではない場合、要素を前面にポップしても問題ありません。この特定のケースでは、要素を背面にプッシュする方が適切です。

おかげで、

javascriptsvgraphael
67
Miles

コードをギミ！

_// move element "on top of" all others within the same grouping
el.parentNode.appendChild(el); 

// move element "underneath" all others within the same grouping
el.parentNode.insertBefore(el,el.parentNode.firstChild);

// move element "on top of" all others in the entire document
el.ownerSVGElement.appendChild(el); 

// move element "underneath" all others in the entire document
el.ownerSVGElement.appendChild(el,el.ownerSVGElement.firstChild); 
_

特にRaphael内では、 toBack() および toFront() を使用するとさらに簡単です。

_raphElement.toBack()  // Move this element below/behind all others
raphElement.toFront() // Move this element above/in front of all others
_

詳細

SVGは、オブジェクトの描画時に "painters model" を使用します。ドキュメントの後半に表示されるアイテムは、ドキュメントの前に表示される要素の後に（上に）描画されます。アイテムの階層化を変更するには、 appendChild または insertBefore などを使用して、DOMの要素を並べ替える必要があります。

こちらの例をご覧ください： http://phrogz.net/SVG/drag_under_transformation.xhtml

  1. 赤と青のオブジェクトをドラッグして、重なるようにします。
  2. 各オブジェクトをクリックして、上部にポップするのを見てください。 （ただし、黄色の円は常に表示されることを目的としています。）

この例の要素の並べ替えは、ソースコードの行93/94によって行われます。

_el.addEventListener('mousedown',function(e){
  el.parentNode.appendChild(el); // move to top
  ...
},false);
_

マウスが要素上で押し下げられると、マウスはすべての兄弟の最後の要素に移動し、他のすべての要素の最後に「上に」描画されます。

93
Phrogz

Raphaelを使用している場合、要素を前後にポップするのは非常に簡単です。

element.toBack()
element.toFront()

関連ドキュメント です。

40
Herman Schaaf

SVGにはz-indexはありません。コードの後半にあるオブジェクトは、最初のオブジェクトの上に表示されます。そのため、必要に応じて、ノードをツリーの最初または最後に移動できます。

<g>（グループ）要素はsvgの汎用コンテナーであるため、レイヤーにすることができます。グループ間でノードを移動するだけで、必要なものを実現できます。

4
Spadar Shut

まだ試していませんが、 SVG render order は解決策のようです。また、「z-index」が来ています。すでに 提案 にあります

0
sgimeno

グラフィックオブジェクトを事前に定義しておけば、時間の経過に応じてさまざまな順序でそれらを重ねることができます。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1000 1000" width="400" height="400">
  <rect x="0" y="0" width="1000" height="1000" fill="black"/>
  <defs>
    <rect id="a1" x="0"   y="0"   width="500" height="500" fill="red"/>
    <rect id="a2" x="100" y="100" width="500" height="500" fill="blue"/>
  </defs>
  <g> 
    <use xlink:href="#a1"/>
    <use xlink:href="#a2"/>
    <set attributeName="visibility"  to="hidden" begin="2s"/> 
  </g>
  <g visibility="hidden"> 
    <use xlink:href="#a2"/>
    <use xlink:href="#a1"/>
    <set attributeName="visibility"  to="visible" begin="2s"/> 
  </g>
</svg>
0
user846969