Snap.svg를 사용하여 z 공간에서 SVG 그룹 이동

Question

Snap SVG를 사용하여 SVG 요소를 대화 형으로 만듭니다.

내 모든 다른 모양의 '앞'에Element.group개의 모양 그룹을 어떻게 이동할 수 있습니까?이 동작은 마우스를 올리면 수행됩니다. 여기

간단한 JSFiddle 예 : 나는 그들이 이상 공중 선회 할 때 다시 두 개의 원이 전면에 와서 얻으려고

http://jsfiddle.net/offmilk/b0av7jx6/

.

Raphaël은 Element.toFront() 형태로 개별 요소에 대해 유사한 기능을 제공합니다. 모두 작성자가 비슷한 질문 here에 응답하지만 내 솔루션에 내 hover 설정을 추가 할 수 없습니다.

미리 도움 주셔서 감사합니다.

Answer 1

저는 이것이 실제 SVG의 변경 여부 나 SVG가 그대로 남아 있는지 여부에 달려 있다고 생각합니다 (어떤 경우에는 CSS가 필요합니다).

toFront()에 언급했듯이 SVG를 변경해도 괜찮을 것 같습니다.

이 경우 요소를 용지/svg에 다시 추가하면됩니다. 그러면 앞면으로 이동합니다. 당신이이 용지에 대해 작동하는 함수가 될하려는 경우

그래서 당신은 s.append (요소) 또는 this.paper.append (요소) 를 작성할 수 있습니다. 이 예에서

, 나는 ...을 재사용 가능한 호버 기능을 다음과 같이 그것을 쓰기

function hoverOverFront() { 
    this.paper.append(this); 
    this.attr({ fill: 'green' }); 
} 

function hoverOut() { 
    this.attr({ fill: 'black' }); 
}; 

back.hover(hoverOverFront, hoverOut); 
front.hover(hoverOverFront, hoverOut); 

jsfiddle