I want to apply or 'bake' a transformation of several paths in Raphael JS 2, so that I can then bine them into one single path.

Here is an example path, where I would like the "transform" attribute to be applied to all the "d" coordinates.

<path style="" fill="#000000" stroke="none" d="M150,-265C182,-275,171,-220,180,-194L178,-194C181,-192,180,-185,181,-180C211,-169,282,-173,306,-166C308,-169,316,-171,315,-165C268,-157,225,-148,184,-137C188,-118,186,-96,190,-79L282,-131C289,-131,296,-135,297,-126C293,-118,271,-105,236,-80C190,-48,155,-20,125,-6C112,-15,115,-34,111,-51C121,-70,108,-107,107,-133C70,-132,-5,-126,0,-157C18,-170,39,-181,64,-191C75,-190,92,-181,100,-185C99,-198,95,-211,89,-225Z" transform="matrix(0.1389, 0, 0, 0.1389, 291.91, 235.465)" stroke-width="7.199999999999999">

I understand that the svg-edit framework can convert path coordinates to absolute positions, and remove the transform matrix in the process.

Some related questions, which I couldn't get my answer from:

• Baking transforms into SVG Path Element mands
• How to apply a transformation matrix?

I want to apply or 'bake' a transformation of several paths in Raphael JS 2, so that I can then bine them into one single path.

Here is an example path, where I would like the "transform" attribute to be applied to all the "d" coordinates.

<path style="" fill="#000000" stroke="none" d="M150,-265C182,-275,171,-220,180,-194L178,-194C181,-192,180,-185,181,-180C211,-169,282,-173,306,-166C308,-169,316,-171,315,-165C268,-157,225,-148,184,-137C188,-118,186,-96,190,-79L282,-131C289,-131,296,-135,297,-126C293,-118,271,-105,236,-80C190,-48,155,-20,125,-6C112,-15,115,-34,111,-51C121,-70,108,-107,107,-133C70,-132,-5,-126,0,-157C18,-170,39,-181,64,-191C75,-190,92,-181,100,-185C99,-198,95,-211,89,-225Z" transform="matrix(0.1389, 0, 0, 0.1389, 291.91, 235.465)" stroke-width="7.199999999999999">

I understand that the svg-edit framework can convert path coordinates to absolute positions, and remove the transform matrix in the process.

Some related questions, which I couldn't get my answer from:

• Baking transforms into SVG Path Element mands
• How to apply a transformation matrix?

• javascript
• svg
• raphael
• svg-edit

• SvgToHtml will convert path coordinates to absolute positions, and remove the transform matrix in the process. irunmywebsite./raphael/SVGTOHTML_LIVE.php – Chasbeen Commented Dec 2, 2011 at 7:23
• I ended up storing the original transformation for each path in the set. Each time I need to transform the entire set, I'll first pre-transform "...T" the individual paths using the stored transforms. This solution is not ideal, as it makes dragging laggy for large sets. – Jedateach Commented Feb 6, 2012 at 23:00

2 Answers 2

Here's a jsFiddle that applies all the transforms for you: http://jsfiddle/ecmanaut/cFSjt/

It's possible that Raphael exposes some or all of the tools I've filled in myself, but if not, these do the trick nicely. If your needs cover more non-path elements too (like groups, rects, circles, ellipses, and so on), first convert them to path elements (using pathify, for instance).

A partial solution can be found in this jsFiddle: http://jsfiddle/X6YNm/1/

//include whoa font, and raphael
paper = Raphael('holder');
var text = paper.print(300, 50, 'Foo', paper.getFont('whoa'), 50, 'baseline');
var path = new Array();
for ( var i = 0; i < text.length; i ++ ) {
   path[i] = paper.path(Raphael.pathToRelative(text[i].attr('path')));
   path[i].attr({ fill: 'red' }).translate(i * 250, 300);
}

It creates a new path, based on each character in the original set. However, the fiddle does not correctly space the characters.

Some related discussion on the raphael google group: Some google group discussion here: https://groups.google./d/msg/raphaeljs/OP29oelR5Eg/zPi5m6rjsvIJ