CODEWITHSUNDEEP
javascriptpathsvgraphael
whildkatz
whildkatz

Reputation: 71

raphael.js how to add id to a path

I just started using Raphael.js and I am stumped on adding an id to a path. I have read a lot of posts on how to do it, but I think the way my file is set up doesn't allow me to easily translate those solutions.

I have an init.js file and a path.js file

init.js

var r = Raphael('man', 500, 573),
    attributes = {
        fill: '#204ad3',
        opacity: '0.0',
        'stroke-linejoin': 'round'

    },
arr = new Array();

for (var muscles in paths) {

    var obj = r.path(paths[muscles].path);

    obj.attr(attributes);

    arr[obj.id] = muscles;

    obj
    .hover(function(){
        this.animate({
            fill: '#204ad3',
            opacity: '0.3'
        }, 300);
    }, function(){
        this.animate({
            fill: attributes.fill,
            opacity: attributes.opacity
        }, 300);
    })
    .click(function(){
        document.location.hash = arr[this.id];

        var point = this.getBBox(0);

        $('#man').next('.point').remove();

        $('#man').after($('<div />').addClass('point'));

        $('.point')
        .html(paths[arr[this.id]].name)
        .prepend($('<a />').attr('href', '#').addClass('close').text('Close'))
        .prepend($('<img />').attr('src', 'flags/'+arr[this.id]+'.png'))
        .css({
            left: point.x+(point.width/2)-80,
            top: point.y+(point.height/2)-20
        })
        .fadeIn();

    });

    $('.point').find('.close').live('click', function(){
        var t = $(this),
            parent = t.parent('.point');

        parent.fadeOut(function(){
            parent.remove();
        });
        return false;
    });
}

path.js file:

var paths = { 
    neck: {
        name: 'Neck',
    path: 'd="M412.294,73.035c0,0,7.661,28.869,9.406,31.78c1.746,2.911,4.657,2.911,9.896,2.911 s9.313-1.746,9.896-5.239c0.582-3.493,6.985-28.523,6.985-28.523s-2.963,2.599-6.232,5.984c-2.543,2.632-7.2,5.904-11.088,5.904 c-3.889,0-6.705-2.431-10.367-5.04C418.063,78.868,418.08,79.22,412.294,73.035z"',
},
pecks: {
    name: 'Pecks',
    path: 'd="M379.581,117.994c0,0,0.396-1.586,6.936-4.558c6.539-2.972,13.475-5.351,16.844-6.737 c3.369-1.387,4.559-1.784,4.559-1.784s13.674,2.973,15.061,3.17c1.387,0.198,4.36,1.982,8.72,1.982s9.511-1.387,11.097-2.18 s10.307-2.973,11.693-3.171s1.387-0.198,1.387-0.198s12.286,3.369,16.845,4.36c4.558,0.991,8.917,2.378,9.116,3.765 c0.197,1.387,1.584,4.954,1.584,6.341s-0.197,5.945-0.396,6.738c-0.198,0.792-3.171,15.457-4.757,21.997 c-1.585,6.54-1.188,8.918-7.331,11.494s-10.899,7.53-22.79,2.378s-13.277-5.549-17.241-5.152s-11.098,3.963-14.862,5.351 c-3.766,1.387-16.251,2.179-20.412-0.198c-4.162-2.378-10.9-9.314-12.881-16.844c-1.981-7.531-3.963-16.052-4.359-17.638 C377.995,125.525,377.798,121.165,379.581,117.994z"',
},
}

The generated SVG element does not have an id, nor do I know how to get one in there. Any advise/help would be much appreciated.

Upvotes: 4

Views: 9817

Answers (3)

b_dubb
b_dubb

Reputation: 421

to add an id to a SVG element .... paper.path( path data ).node.id = 'pathIdString';. to test ... try alert( document.getElementById("pathIdString").id );. should return the id

Upvotes: 1

mihai
mihai

Reputation: 38543

This will add the id attribute to the svg path elements:

var id = 0;

for (var muscles in paths) {

    var obj = r.path(paths[muscles].path);
    obj.node.id = "muscles_or_whatever_you_want_" + id;
    id++

    //....

Upvotes: 8

Russell Zahniser
Russell Zahniser

Reputation: 16364

It looks like what you are trying to do is to pop up a div with an image and a close link above the path that is clicked. The problem is that you are confusing the Raphael id of the path object with the index in your paths array. You probably want to eliminate arr entirely and pass the index to your handler through a closure:

.click(function(index) { return function() {
    document.location.hash = index;

    var point = this.getBBox(0);

    $('#man').next('.point').remove();

    $('#man').after($('<div />').addClass('point'));

    $('.point')
    .html(paths[index].name)
    .prepend($('<a />').attr('href', '#').addClass('close').text('Close'))
    .prepend($('<img />').attr('src', 'flags/'+index+'.png'))
    .css({
        left: point.x+(point.width/2)-80,
        top: point.y+(point.height/2)-20
    })
    .fadeIn();

}; }(muscles));

Upvotes: 0

Related Questions