Question

I have path that I then draw with Raphael JS. Code looks like this:

var paper = Raphael($('#draw_here')[0], '32', '32');

var star = paper.path("M 22.137,19.625 32,12 20,12 16,0 12,12 0,12 9.875,19.594 6,32 16.016,24.32 26.008,32 z");

star.attr({
    fill: 'white',
    stroke: 'black',
    title: 'This is a STAAAAAAAR!'
});

It works and it draws 32 x 32 pixels big star. How to change it’s width and height?

I tried to do this:

var paper = Raphael($('#draw_here')[0], 64, 64);

var star = paper.path("M 22.137,19.625 32,12 20,12 16,0 12,12 0,12 9.875,19.594 6,32 16.016,24.32 26.008,32 z");

star.attr({
    fill: 'white',
    stroke: 'black',
    title: 'This is a STAAAAAAAR!',
    width: 64,
    height: 64
});

…but all that changes is “paper element’s“ width and height, not star’s.

The thing I want to do is put effect that star gets bigger when mouse’s cursor is on it.

Thanks in any advice!

P.S. I didn’t write the path myself, it’s get from Iconic set.

Answer 1

You have to adjust the path too!
Just try it on the Raphaël Playground.

The width and height attributes are just the size of the element to draw on, but the path coordinates are still the same.

For a simple resize you may also use

star.transform("s2");

to resize it to the 2x as before.

If don’t want to edit the path and simple scale it, you should use the transform method to resize it and translate the full path by a certain value.

star.transform("t32,32 s2");

This for example will move the object by 32px from the top and 32px from the left and resize it to the 2x as before.