Raphaël : 기존 SVG 세그먼트에 SVG 아이콘 추가

Question

Raphaël을 사용하여 대화 형 휠에서 기존 svg 세그먼트에 svg 아이콘을 추가하려고합니다. 아이콘의 svg를 세그먼트의 svg 매개 변수에 포함시킬 수는 있지만 아이콘을 다르게 스타일을 지정하고 세그먼트와 아이콘을 마우스로 가리키면 기존 상호 작용을 유지해야합니다.

은 JS 바이올린을 참조하십시오 https://jsfiddle.net/f4okjLee/2/

당신은 내 첫 번째 세그먼트 "사람"의 아이콘 객체를 정의하고 그것을 새로운 스타일 "아이콘 스타일"을 준 것을 볼 수 있습니다. 맨 위에 오버레이해야하지만 '인물'세그먼트 뒤에 표시됩니다. 어떻게 든 세그먼트와 아이콘을 결합하고 스타일을 분리하여 유지해야합니다 (그리고 다른 아이콘을 사용하여 각 세그먼트마다 이것을 반복해야합니다).

누구든지 내가 어떻게하는지 알고 계십니까? (예 : 아무것도, 당신은 VML 지원을 필요로하므로 CSS의 포인터 이벤트를 사용할 수 없습니다)

var R = Raphael("paper", 400, 400); 


    var iconStyle = { 
     fill: "#fff", 
     stroke: "#fff", 
     "stroke-width": 1, 
     "stroke-linejoin": "round", 
     cursor: "pointer" 
    }; 


    var attr = { 
     fill: "#333", 
     stroke: "#fff", 
     "stroke-width": 1, 
     "stroke-linejoin": "round", 
     cursor: "pointer" 
    }; 


    var wheel = {}; 
    wheel.people = R.path("M205.1,84.2c-0.8-0.4-1.6-0.7-2.5-1.1c-0.1-0.1-0.3-0.1-0.5-0.2c-5.4-2.2-11-3.9-16.6-5 c-0.2,0-0.3-0.1-0.5-0.1c-5.7-1.1-11.5-1.7-17.3-1.7h-0.5c-4.7,0-9.4,0.4-14,1.1l-4.7-6.5l-0.8-1.1v0l-40.8-57 c9.1-3.5,18.4-6.2,27.9-8.1c0.2-0.1,0.3-0.1,0.5-0.1c10.5-2.1,21.2-3.1,31.9-3.1h0.5c10.7,0,21.4,1.1,31.9,3.1 c0.2,0,0.4,0.1,0.5,0.1c0.3,0.1,0.7,0.1,1,0.2l3.6,72v0l0.1,1.2v0L205.1,84.2z").attr(attr); 

    wheel.leadEntrepreneur = R.path("M285,50l-0.3,0.6l-35.6,62l-0.6,1l-3.3,5.8c-0.5-0.8-1-1.7-1.6-2.5c-0.1-0.1-0.2-0.3-0.3-0.4 c-3.2-4.7-6.9-9.2-11-13.4c0,0-0.1-0.1-0.1-0.1c-0.1-0.1-0.2-0.2-0.3-0.3c-4.2-4.1-8.7-7.8-13.4-11c-0.1-0.1-0.3-0.2-0.4-0.3 c-4.1-2.7-8.5-5.1-12.9-7.1l-0.3-6.2v0l-0.1-1.2v0l-3.6-72c10.1,2.1,20.1,5.1,29.7,9.1c0.2,0.1,0.3,0.1,0.5,0.2 c9.8,4.1,19.3,9.1,28.3,15.1c0.1,0.1,0.3,0.2,0.4,0.3c8.7,5.9,17,12.7,24.8,20.4C284.8,49.8,284.9,49.9,285,50L285,50z").attr(attr); 
    wheel.assets = R.path("M330.4,134.2l-1.8,0.9l0,0l-1.7,0.8l0,0l-60.1,31.2l-1,0.5l-7,3.6c0-1.2,0.1-2.4,0.1-3.6c0-0.2,0-0.4,0-0.5 c0-5.8-0.6-11.6-1.7-17.3c0-0.2,0-0.3-0.1-0.5c-1.1-5.7-2.8-11.2-5.1-16.7c0-0.2-0.1-0.3-0.2-0.5c-1.8-4.4-4-8.7-6.6-12.8l3.3-5.8 l0.6-1l35.6-62L285,50c0,0,0.1,0.1,0.1,0.1c7.7,7.7,14.5,16,20.4,24.8c0.1,0.1,0.2,0.3,0.3,0.4c6,9,11.1,18.5,15.1,28.3 c0.1,0.2,0.1,0.3,0.2,0.5C325.2,113.9,328.3,124,330.4,134.2").attr(attr); 
    wheel.marketNeed = R.path("M333.7,167.2v0.5c0,10.7-1,21.4-3.1,31.9c0,0.2-0.1,0.4-0.1,0.5c-2,9.9-4.8,19.6-8.6,29l-6.3-0.6h0l-1.8-0.2h0 l-63.6-5.9l-1.1-0.1l-7.9-0.7c0.7-1,1.5-2.1,2.2-3.1c0.1-0.1,0.2-0.3,0.3-0.4c3.3-4.9,6-10,8.2-15.4c0.1-0.2,0.1-0.3,0.2-0.5 c2.3-5.4,3.9-11,5-16.7c0-0.2,0.1-0.4,0.1-0.5c0.9-4.5,1.4-9.1,1.6-13.7l7-3.6l1-0.5l60.1-31.2l0,0l1.7-0.8l0,0l1.8-0.9 c0,0.2,0.1,0.4,0.1,0.6c0,0.2,0.1,0.3,0.1,0.5C332.7,145.8,333.7,156.5,333.7,167.2").attr(attr); 
    wheel.valuePrice = R.path("M322,229.2c-0.2,0.6-0.5,1.2-0.7,1.7c0,0.2-0.1,0.3-0.2,0.5c-4.1,9.8-9.1,19.3-15.1,28.3 c-0.1,0.1-0.2,0.3-0.3,0.4v0c-5.9,8.8-12.7,17-20.4,24.8c-0.1,0.1-0.1,0.2-0.2,0.3c0,0-0.1,0.1-0.1,0.1 c-6.7,6.7-13.9,12.8-21.4,18.1l-10.3-8.1h0l-1.3-1.1l0,0l-46.7-36.5l-0.8-0.7l-4.8-3.8c0.9-0.3,1.9-0.7,2.8-1.1 c0.1-0.1,0.3-0.1,0.5-0.2c5.3-2.2,10.5-4.9,15.4-8.2c0.1-0.1,0.3-0.2,0.4-0.3c4.7-3.2,9.3-6.9,13.4-11.1c0,0,0.1-0.1,0.1-0.1 c0.1-0.1,0.2-0.2,0.3-0.3c3.2-3.3,6.2-6.8,8.9-10.4l7.9,0.7l1.1,0.1l63.6,5.9h0l1.8,0.2h0L322,229.2z").attr(attr); 
    wheel.supplyChain = R.path("M263.5,303.5c-1.1,0.8-2.2,1.6-3.4,2.3c-0.1,0.1-0.3,0.2-0.4,0.3c-9,6-18.5,11.1-28.3,15.2 c-0.1,0.1-0.3,0.1-0.5,0.2c-10,4.1-20.3,7.2-30.7,9.3c-0.2,0-0.3,0.1-0.5,0.1c-8.1,1.6-16.3,2.6-24.5,3l-7.5-21.4l-0.5-1.5 l-17.8-51.1l-0.4-1l-0.6-1.7c0.3,0.1,0.6,0.1,0.9,0.2c0.2,0.1,0.4,0.1,0.5,0.1c5.7,1.1,11.5,1.7,17.3,1.7h0.5 c5.8,0,11.6-0.6,17.3-1.7h0c0.2,0,0.3-0.1,0.5-0.1c4.7-1,9.3-2.3,13.9-4l4.8,3.8l0.9,0.7l46.7,36.5l0,0l1.3,1.1h0L263.5,303.5z").attr(attr); 
    wheel.legislatorsRegulators = R.path("M175.1,333.8c-2.5,0.1-5,0.2-7.5,0.2h-0.5c-10.7,0-21.4-1.1-32-3.1c-0.2,0-0.4-0.1-0.5-0.1 c-10.5-2.1-20.7-5.2-30.7-9.3c-0.2,0-0.3-0.1-0.5-0.2c-6.2-2.6-12.3-5.5-18.2-8.9l8-33.3l0.4-1.5l10.5-43.8c3.8,3.7,7.9,7,12.2,9.8 c0.1,0.1,0.3,0.2,0.4,0.3c4.9,3.3,10,6,15.4,8.2c0.1,0.1,0.3,0.2,0.5,0.2c5.1,2.1,10.4,3.7,15.8,4.9l0.6,1.7l0.4,1l17.8,51.1 l0.5,1.5L175.1,333.8z").attr(attr); 
    wheel.independantEndorsement = R.path("M104.1,233.7l-10.5,43.8l-0.4,1.5l-8,33.3c-3.4-2-6.8-4-10.1-6.2c-0.1-0.1-0.3-0.2-0.4-0.3 c-8.8-5.9-17.1-12.7-24.8-20.4l-0.4-0.4c-7.7-7.7-14.5-16-20.4-24.8c-0.1-0.1-0.2-0.3-0.3-0.4c-2.8-4.3-5.5-8.6-7.9-13.1l33.4-32 l1.1-1l23.5-22.5c1,3.8,2.3,7.5,3.8,11.2c0,0.1,0.1,0.3,0.2,0.5c2.2,5.3,5,10.5,8.2,15.4c0.1,0.1,0.2,0.3,0.3,0.4 c3.2,4.7,6.9,9.3,11.1,13.5c0.1,0.1,0.1,0.2,0.2,0.3l0.1,0.1C103.2,232.9,103.6,233.3,104.1,233.7").attr(attr); 
    wheel.underpinningScience = R.path("M77.7,185.6c0.4,1.8,0.8,3.6,1.3,5.4l-23.5,22.5l-1.1,1l-33.4,32c-2.7-5-5.1-10-7.2-15.2 c-0.1-0.2-0.1-0.3-0.2-0.5c-4.1-10-7.2-20.3-9.3-30.7c-0.1-0.2-0.1-0.3-0.1-0.5C2,189.1,1,178.4,1,167.8v-0.5 c0-3.5,0.1-6.9,0.4-10.4l55.9-10.9h0l1.4-0.3h0l21-4.1c-0.8,2.6-1.4,5.2-2,7.9c0,0.2-0.1,0.3-0.1,0.5c-1.1,5.7-1.7,11.5-1.7,17.3 v0.5c0,5.8,0.6,11.6,1.7,17.3C77.6,185.3,77.6,185.4,77.7,185.6").attr(attr); 
    wheel.intellectualProperty = R.path("M106.7,99.2c-1.3,1.1-2.5,2.3-3.7,3.5l-0.4,0.4c-4.2,4.2-7.9,8.7-11,13.4c-0.1,0.1-0.2,0.3-0.3,0.4 c-3.3,4.9-6,10-8.2,15.3c-0.1,0.1-0.1,0.3-0.2,0.5c-1.2,2.9-2.2,5.8-3.1,8.8l-21,4.1h0l-1.4,0.3h0L1.4,156.8 c0.5-7.2,1.4-14.4,2.8-21.5c0-0.2,0.1-0.3,0.1-0.5c2.1-10.5,5.2-20.7,9.3-30.7c0.1-0.2,0.1-0.3,0.2-0.5c4.1-9.8,9.1-19.2,15.1-28.3 c0.1-0.1,0.2-0.3,0.3-0.4c1.2-1.7,2.4-3.4,3.6-5.1l60.6,24.1l1.3,0.5L106.7,99.2z").attr(attr); 
    wheel.money = R.path("M148.4,70.7l-0.8-1.1v0l-40.8-57c-0.9,0.4-1.9,0.7-2.8,1.1v0c-0.2,0-0.3,0.1-0.5,0.2 c-9.8,4.1-19.3,9.1-28.3,15.1c-0.1,0.1-0.3,0.2-0.4,0.3C66,35.2,57.7,42,50,49.7c-0.1,0.1-0.2,0.2-0.3,0.3l-0.1,0.1 c-6.2,6.2-11.8,12.8-16.8,19.7l60.6,24.1l1.3,0.5l12,4.8c3.1-2.8,6.3-5.2,9.7-7.5c0.1-0.1,0.3-0.2,0.4-0.3c4.9-3.3,10-6,15.4-8.2 c0.1-0.1,0.3-0.1,0.5-0.2c5.4-2.2,11-3.9,16.6-5c0.2-0.1,0.3-0.1,0.5-0.1c1.1-0.2,2.2-0.4,3.3-0.6L148.4,70.7z").attr(attr); 

    var icon = {}; 
    icon.people = R.path("M178.1,40.9l0-1.2c1.7,0.2,5.1-1,5.1-1c-1.2-1.2-1.4-2.6-2.2-8s-5.5-5.4-5.8-5.4c-0.4,0-5.1-0.1-5.8,5.4 c-0.8,5.4-1,6.8-2.2,8c0,0,3.4,1.2,5.1,1l0,1.2c-0.9,0.9-1.9,1.7-2.9,2.3c0.3,0.2,0.7,0.4,1,0.5c2.3,1.2,4.4,2.4,4.4,4.8v2.6h10.6 c0.4,0,0.7-0.3,0.7-0.7v-3C186,44.7,181,44.1,178.1,40.9 M164.8,41.2L164.8,41.2v-1c0.9-1,1.5-2.2,2-3.5c0.1-0.2,0.1-0.4,0.2-0.6c0.5-0.2,0.8-0.8,0.9-1.6 c0-0.3,0-0.5,0-0.7c-0.1-0.4-0.2-0.7-0.4-0.9c0-0.7,0-1.5,0-2.3c0-0.6-0.1-1.3-0.1-1.9c0-0.2,0-0.3-0.1-0.5 c-0.7-3.9-4.2-4.3-5.5-4.3c-0.1,0-1,0-1,0c-1.3,0-4.9,0.4-5.5,4.3c0,0.2,0,0.3-0.1,0.5c-0.1,0.7-0.1,1.3-0.1,1.9 c0,0.8,0,1.6,0,2.3c-0.2,0.2-0.3,0.5-0.4,0.9c0,0.2,0,0.5,0,0.7c0.1,0.8,0.5,1.4,0.9,1.6c0.1,0.4,0.2,0.8,0.4,1.2 c0.4,1.1,1,2.1,1.8,3v1c-3.3,3.6-8.8,4.3-8.8,7.3v3.3c0,0.4,0.3,0.7,0.7,0.7h23.4c0.4,0,0.7-0.3,0.7-0.7v-3.3 C173.6,45.5,168.1,44.8,164.8,41.2").attr(iconStyle); 


    var current = null; 
    for (var segment in wheel) { 
     wheel[segment].color = "#005190"; 
     (function (st, segment) { 
      st[0].onmouseover = function() { 
       current && wheel[current].animate({fill: "#333", stroke: "#fff"}, 500) && (document.getElementById(current).style.display = ""); 
       st.animate({fill: st.color, stroke: "#005190", "stroke-width": 3}, 500); 
       st.toFront(); 
       document.getElementById(segment).style.display = "block"; 
       current = segment; 
      }; 
      st[0].onmouseout = function() { 
       st.animate({fill: "#333", stroke: "#fff", "stroke-width": 1}, 500); 
       st.toFront(); 
      }; 
      if (segment == "people") { 
       st[0].onmouseover(); 
      } 
     })(wheel[segment], segment); 
    } 

Answer 1

난 당신이 라파엘 사용해야하는 경우 당신은 몇 가지를 할 필요가 없다 생각합니다.

먼저, 적절한 순서로 관련 부분을 그린 것처럼,이 경우에는 toFront() toBack()을 알 필요가 없습니다.

'mouseover', 'mouseout'을 사용하여 이벤트 처리기를 추가 한 다음 아이콘과 휠 모두에 'same'함수를 호출 할 수 있습니다. 이것은 다음과 같이 보일 것입니다 (강조하기 위해 일부 코드를 제거했습니다). 당신은 그러나 두 아이콘 및 휠에 마우스 오버를 부착하고이 같은 전화를 수 있도록하거나 필요 https://jsfiddle.net/f4okjLee/3/ 같은 것을 의미하는 경우

jsfiddle

for (var segment in wheel) { 
    wheel[segment].color = "#005190"; 
    wheel[segment].mouseover(myHover.bind(null, segment)) 
    icon[segment].mouseover(myHover.bind(null, segment)) 
    wheel[segment].mouseout(myHoverOut.bind(null, segment)) 
    icon[segment].mouseout(myHoverOut.bind(null, segment)) 
} 

function myHover(type) { 
    wheel[ type ].animate({ fill: 'red' }, 1000); 
    icon[ type ].animate({ fill: 'blue', transform: 's1.2' }, 1000); 
} 

function myHoverOut(type) { 
    wheel[ type ].animate({ fill: 'blue'}, 1000); 
    icon[ type ].animate({ fill: 'red', transform: 's1' }, 1000); 
}