1

I have the following Raphael objects, which together form the 3 sections of a pie chart. On mouseover, I want it to scale and translate, as in this example http://raphaeljs.com/pie.html.

This is how they are to start with:

<path style="" fill="#edc240" stroke="#ffffff" d="M0,0L-1.3226185430791413e-14,-72A72,72,0,1,1,-42.32053816505805,58.24922359499623Z" transform="matrix(1,0,0,1,155,80)"></path>
<path style="" fill="#afd8f8" stroke="#ffffff" d="M0,0L-42.32053816505805,58.24922359499623A72,72,0,0,1,-42.32053816505809,-58.2492235949962Z" transform="matrix(1,0,0,1,155,80)"></path>
<path style="" fill="#cb4b4b" stroke="#ffffff" d="M0,0L-42.32053816505809,-58.2492235949962A72,72,0,0,1,-3.086008011632391e-14,-72Z" transform="matrix(1,0,0,1,155,80)"></path>

This is the transformation I apply:

.stop().animate({transform: "t165,90s1.1,1.1,155,80"}, 200, "<>");

Yet on inspecting the object with this transformation applied, I see this transformation string:

transform="matrix(1.1,0,0,1.1,149.5,82)

and it looks strange. If I manually edit the transform string to:

transform="matrix(1.1,0,0,1.1,155,80)"

it works perfectly as I want it to.

So essentially, I want to be able to animate to the transform string that I manually edited it to. Thanks, Ross

Ross Deane
  • 3,100
  • 2
  • 19
  • 25
  • possible duplicate of [Where does come the offset in Raphael javascript](http://stackoverflow.com/questions/1630176/where-does-come-the-offset-in-raphael-javascript) – Paul Sweatte Oct 09 '14 at 00:18

0 Answers0