Home/ Questions/Q 9116405
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T04:39:53+00:00

I am using Raphael.js to create a Play button icon. However, the triangle is

  • 0

I am using Raphael.js to create a “Play” button icon. However, the triangle is positioned too close to the edge of the circle. On mouseover, I am increasing the stroke width – the problem being that the triangle actually comes outside the circle, which is not what I want at all. The HTML is just a div with an id:

<html>
 <head>
 </head>
 <body>
  <div id="playB"></div>
 </body>
</html>

The javascript is rather long so here is the jsfiddle

What is the easiest way to “move” a path of an SVG in this case? i.e. – starting further from the right and further from the top. I have tried various things, but apart from changing the size of an icon – multiplying each number of the path by x, I cannot manipulate icons at all. In this case move a specific element of the icon.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You need to split up the path in order to adjust the position of the triangle. I was able to do this by eye by picking out where the second “M” was in the path:

    var playB = Raphael('playB', 200, 200);
var circle =          playB.path("M64,5.864C31.892,5.864,5.864,31.892,5.864,64c0,32.108,26.028,58.136,58.136,58.136c32.108,0,58.136-26.028,58.136-58.136C122.136,31.892,96.108,5.864,64,5.864z");
var triangle =  playB.path("M26.736,102.728L97.264,62L26.736,21.272V102.728z");

    Then you can move the triangle over:

    triangle.attr("transform", "T15,0");

    To keep the properties and animation intact, add both to a Raphael set:

    var playBP = playB.set();
playBP.push(circle, triangle);
playBP.attr({
  'stroke-width': 5,
  'stroke': "#000",
  'fill': "#fff",
  'opacity': 1
});

    Then you only need one small change: Change “this” in the mouseover commands to “playBP”. This may seem redundant, but “this” refers to the single element that was moused over, not the set.

    var speed = 5;

playBP.mouseover(function(){
  playBP.animate({
    'stroke-width': 10,
    'stroke': "#fff",
    'fill': "#000",
    'opacity': .9
  }, 1000, 'elastic');

});
playBP.mouseout(function(){
  playBP.stop().animate({
    'stroke-width': 5,
    'stroke': "#000",
    'fill': "#fff",
    'opacity': 1    
  }, speed*4, 'elastic');

});

    jsFiddle updated

    If you’d rather just fix the path, you can use the Raphael.mapPath() function to get the adjusted x/y for the triangle, like so:

    console.log(Raphael.mapPath(triangle.attr("path"), triangle.matrix));
    • 0