Raphaël：将 SVG 图标添加到现有的 SVG 片段

Question

我正在尝试使用 Raphaël 将 svg 图标添加到交互式轮中的现有 svg 片段。我可以将图标的 svg 包含到片段的 svg 参数中，但我需要以不同的方式设置图标的样式，并在片段和图标悬停时保留现有的交互。

见JS Fiddle：https://jsfiddle.net/f4okjLee/2/

您会看到我已经为我的第一段定义了图标对象 "people" 并赋予了它新的样式 "iconStyle"。它在 "people" 段后面可见，但应该覆盖在顶部。我需要以某种方式组合段和图标并保持它们的样式分开（并使用不同的图标对每个段重复此操作）。

有人知道我是怎么做到的吗？

    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

如果你需要使用 Raphael，我认为你需要做一些事情（所以不能使用 CSS 指针事件：例如 none，因为你需要 VML 支持） .

首先，据我所知，在这种情况下你不需要 toFront() toBack()，因为你已经按照正确的顺序绘制了相关部分。

您可以使用 'mouseover'、'mouseout' 添加事件处理程序，然后为图标和滚轮调用 'same' 函数。这看起来像下面这样（我已经删除了一些代码，只是为了突出显示）。

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);
}

Raphaël：将 SVG 图标添加到现有的 SVG 片段

Raphaël: Adding SVG Icon to Existing SVG Segments

javascript

svg

raphael