Question

我正在用svg创建一个交互式地图，我已经将svg格式转换为javasript文件（rahpael）。我想在路径元素上放一个类来创建一个悬停效果，但我似乎无法让它工作：

var path_cz = rsr.path("M513.4,537l-329,19.3L209.5,666c0,0,9.5,36.8,51.5,48.8l108,22.7c13.3-16.7,119-43.4,175.6-8.7l165.7-58.6   c0,0,210.2-54.5,113.6-150.5c-33.3-27.3-61.9-50.4-61.9-50.4l-72.8-5.5l-46.9,2l-154,6.7l-2.6,21L513.4,537z").attr({fill: '#4F217C',parent: 'farver','stroke-width': '0','stroke-opacity': '1'}).data('id', 'path_cz');

我试过.attr（“class”，“classname”）;和.attr中的其他一些东西，但仍然没有..

任何建议都将受到赞赏，thx：）

Answer 1

当您使用Raphael JS时，最简单的方法是使用Raphael提供的悬浮方法，并以此方式更新。

$(document).ready(function() {
    var rsr = Raphael(0, 0, 1000, 1000);
    var path_cz = rsr.path("M513.4,537l-329,19.3L209.5,666c0,0,9.5,36.8,51.5,48.8l108,22.7c13.3-16.7,119-43.4,175.6-8.7l165.7-58.6   c0,0,210.2-54.5,113.6-150.5c-33.3-27.3-61.9-50.4-61.9-50.4l-72.8-5.5l-46.9,2l-154,6.7l-2.6,21L513.4,537z").attr({fill: '#4F217C',parent: 'farver','stroke-width': '0','stroke-  opacity': '1'}).data('id', 'path_cz');
    path_cz.hover(function() {
        path_cz.node.setAttribute('class', 'one');
    }, function() {
        path_cz.node.setAttribute('class', 'two');
    });
});

举个例子，这是一个小提琴：http://jsfiddle.net/n9Mt6/1/

路径元素上的Javascript类

1 个答案: