apply transforms to Path pata

[puzrin]

This optimization is useful, if you like to generate SVG fonts without FontForge. Source image can have multiple paths + transformation rules. Result should be a single path. What needed:

1. Apply transformations "inline" (recalculate paths)
2. Join paths (chaining works fine)

Example:

• source image: https://github.com/fontello/brandico.font/blob/master/src/svg/blogger-rect.svg#L81
• result in font: https://github.com/fontello/brandico.font/blob/master/font/brandico.svg#L105

Also, it would be nice to know how to calculate path bounding box (that's useful, if you like to crop or center image)

[deepsweet]

Joining (chaining) paths seems to be a very simple task, but applying tricky transforms like rotate or skew by recalculating path data sounds scary :) I'll take a look at it later, very interesting and not so trivial exercise.

Maybe I'll do it step by step.

[puzrin]

https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.core.js#L294

Seems, Raphael has matrix transformation mapping.

[deepsweet]

I got it! Thank you.

[puzrin]

It works! Example https://github.com/fontello/font-builder/blob/1e8af5db26708777ae8d6cd4407b7c2dc6f463ea/lib/font-dump-phantom.js#L99 (from our font dumper tool).

Important!!! Current Raphael release has serious bug DmitryBaranovskiy/raphael#629 . It breaks paths, but can be fixed. That's working code fontello/font-builder@b470a52 (a bit dirty, but tested)

Finally, i can confirm, that transformation math not only exists, but also can be extracted and used :)

[deepsweet]

http://www.ia.hiof.no/~borres/cgraph/math/twod/p-twod.html

will be ready soon ;)

[deepsweet]

sorry for a long delay :)
I get to the issue at v0.2.0

[deepsweet]

there is a big problem with some transformations applying and stroke (and probably something else).

for example if we are trying to replace:

<svg xmlns="http://www.w3.org/2000/svg" height="100%" width="100%">
    <path transform="skewX(30)" stroke="red" stroke-width="10px" fill="none" d="M10,10 l100,0 l 0,100"/>
</svg>

with the:

<svg xmlns="http://www.w3.org/2000/svg">
    <path stroke="red" stroke-width="10" fill="none" d="M15.774 10l100 0l57.735 100"/>
</svg>

then 10px stroke is not distorted.

also i'm not sure if it possible to convert scale(2) to the stroke-width="10*2" if input transform is a complex matrix like matrix(1.732, 1, -1, 1.732, 0, 0) which is equal to scale(2) rotate(30).

so Path with strokes will be ignored.

[puzrin]

IMHO it would be more correct to leave path, but rip stroke attributes.

[deepsweet]

• move or just leave transform attr from Group to the inner Path Elems #86
• new plugin: merge multiple Paths into one #87