CODEWITHSUNDEEP
javascriptsvgraphaelvector-graphics
lenny
lenny

Reputation: 147

Moving the position of triangle in a Raphael vector graphic

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.

Upvotes: 2

Views: 1697

Answers (3)

amadan
amadan

Reputation: 1514

I took the easy way out and altered your path within inkscape. It's pretty easy to do. If you're interested, here's what I did.

  • Create a path in inkscape and select it.
  • Ctrl-shift-x to get the xml editor up. Your path should be selected.
  • Click on the "d" attribute.
  • In the box below replace the value with the value from your fiddle.
  • Click set.
  • The path will be modified to resemble your path in the fiddle.

Then I just selected the triangle nodes and moved them over. Go back to the xml editor, select the "d" value, and put that into your fiddle.

var playBP =          playB.path("M 64,5.864 C 31.892,5.864 5.864,31.892 5.864,
64 5.864,96.108 31.892,122.136 64,122.136 96.108,122.136 122.136,96.108 122.136,
64 122.136,31.892 96.108,5.864 64,5.864 z M 38.640816,102.728 109.16882,
62 38.640816,21.272 z");

Voila.

Upvotes: 0

Chris Wilson
Chris Wilson

Reputation: 6719

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

Upvotes: 2

Plynx
Plynx

Reputation: 11461

Use el.transform('t{x},{y}'), for example el.transform('t1,1') to translate any element right and down by 1 pixel each. You can substitute different values for x and y as needed, including negative values.

Upvotes: -1

Related Questions