Question

我正在尝试熟悉raphael.js。我想创建一个美国地图，每个状态都有默认颜色，那些颜色就在那里。

Here is我想出了什么。

如果你看AK，我会加载默认颜色，但如果我突出显示另一个状态，AK的默认颜色会消失。我希望AK - 和其他州 - 保持相同的颜色。

具体来说，我不知道什么是清除我的AK全彩色。我认为当我将鼠标移到另一个状态时，此声明的一部分是清除填充封面：

        for (var state in aus) {
        //aus[state].color = Raphael.getColor();
        (function (st, state) {
            st[0].style.cursor = "pointer";
            st[0].onmouseover = function () {
                current && aus[current].animate({fill: "#333", stroke: "#666"}, 500) && (document.getElementById(current).style.display = "");
                st.animate({fill: st.color, stroke: "#ccc"}, 500);
                st.toFront();
                R.safari();
                document.getElementById(state).style.display = "block";
                current = state;
            };

        })(aus[state], state);
    }

我可能会出错的任何想法？

Answer 1

自从我与Raphael.js合作以来已经有一段时间了，但我认为这是重置你的州的一条线：

current && aus[current].animate({fill: "#333", stroke: "#666"}, 500) && (document.getElementById(current).style.display = "");

尝试用st.color或任何状态颜色替换＃333。如果我的假设是正确的，那就像aus ['AK'] ???您可能必须捕获先前状态的颜色。如果这不起作用，请告诉我，我可以仔细看看。

祝你好运。

Answer 2

将您的美国SVG放入.. this

您可以选择删除OR LEAVE IN也可以生成鼠标悬停代码。

Answer 3

Bryan Allo触及我的部分问题，但最终导致问题的是动画代码。我从来没有弄清楚如何动画到类似的色调并完全抛弃以下代码：st.animate({fill: st.color, stroke: "#ccc"}, 500);

最终结果是一个允许用户按州创建自己的总统竞选预测的网站。 Here it is.

Raphael.js映射默认填充颜色

3 个答案: