javascript - How do I get resulted pathString after transformation is applied?

Question

Consider I have the following HTML5 path:

var myPath = paper.path([
  'M', 0, 0
  'L', 100, 100,
  'L', 150, 50,
  'Z']
]);

myPath.transform(['s', 0.5, 0.5, 0, 0]);

After tranformation (scaling) my path resizes accordingly in half, but inspecting the element is the same path string but with transformation matrix applied. Is there any way to retrieve the pathString resulted (lets say M,0,0,L,50,50,L,75,24,z).

Answer 1

I think you need transformPath method: http://raphaeljs.com/reference.html#Raphael.transformPath

Answer 2

The only solution would be using Raphael 1.x which used to modify paths instead of applying transformations. Otherwise you'd need to write your own routines to convert apply matrix transformations to paths (really difficult).

Answer 3

Please check my answer HERE and the testbed HERE.

There is a function flatten_transformations() which can bake (or apply) transforms to paths, so that transform attribute can be removed. It can handle all path segments (also arcs).

---

OLD ANSWER (not so complete implementation):

Of course there is a way (example in JSBIN) to get a resulted path data after transformations applied. And even very easy way.

Let's suppose we have a SVG path pathDOM and it's root element svgDOM. We can get a transformation matrix of path's coordinate space to root element's coordinate space using native getTransformToElement() -function. It is used this way:

var matrix = pathDOM.getTransformToElement(svgDOM);

When we apply this matrix to all points in path, we get a new path data, where all coordinates are relative to root element. It can be done this way:

var pt = svgDOM.createSVGPoint();
pt.x = some_x_coordinate_of_path_data;
pt.y = some_y_coordinate_of_path_data;
var new_point = pt.matrixTransform(matrix); // <- matrix object, which we created earlier
var new_x = new_point.x;
var new_y = new_point.y;

And that's it! After conversion the transform attribute can be emptied.

Of course all coordinates in path have to be converted to absolute and eg. Arc segments have to be converted to Line or Cubic Segments, which both can be achieved with Raphaël's path2curve() function.

I made a full functional example of using this "Flattening transformations" functionality in JSBIN. There is a ready made function flatten_transformations(), which is the only one needed (the rest is needed for UI purposes). The example has got a path that is nested inside two g elements. Path has own transformations applied, as well as both g elements. Purpose is to test that also nested transformations are flattened.

The code works in newest main browsers and even in IE9. My code that modifies transformations is rather interesting mix of jQuery, Raphael and native code that it may be cause of some problems in IE9 when clicking buttons, but fortunately those essential native functions getTransformToElement(), createSVGPoint() and matrixTransform() work as expected also in IE. I wanted to test simultaneously how those different coding bases plays together. Because it's the fact that Raphael itself is not perfect enough to handle all possible coding needs (lack of styles and groups and lack of possibility to append svg elements as textual xml-data are just ones to note).