Javascript class on path element

Question

I'm creating a interactive map with svg and I have converted the svg format to a javasript file (rahpael). I want to put a class on a path element, to create a hover effect, but I can't seem to get it to work:

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

I've tried .attr("class","classname"); and some other stuff inside .attr, but still nothing..

Any suggestions would be appreciated, thx :)

Answer 1

As you are using Raphael JS, the easiest way to do this is to hook into the hover method that Raphael supplies out of the box and update it that way.

$(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');
    });
});

For an example, here is a fiddle: http://jsfiddle.net/n9Mt6/1/