如何在Raphael JS 2中将变换矩阵应用于路径坐标？

Question

我想在Raphael JS 2中应用或"烘焙"几个路径的转换,这样我就可以将它们组合成一条路径.

这是一个示例路径,我希望将"transform"属性应用于所有"d"坐标.

<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">

据我所知,svg-edit框架可以将路径坐标转换为绝对位置,并删除过程中的变换矩阵.

一些相关问题,我无法得到答案:

• 烘焙转换为SVG路径元素命令
• 如何应用转换矩阵？

Answer 1

这是一个适用于你的所有变换的jsFiddle:http://jsfiddle.net/ecmanaut/cFSjt/

拉斐尔可能会暴露我自己填充的部分或全部工具,但如果没有,这些工具可以很好地完成.如果您的需求也包含更多非路径元素(如组,rects,圆,椭圆等),请先将它们转换为路径元素(例如,使用pathify).

Answer 2

可以在此 jsFiddle 中找到部分解决方案：http://jsfiddle.net/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);
}

它根据原始集中的每个字符创建一条新路径。但是，小提琴无法正确间隔字符。

关于拉斐尔谷歌小组的一些相关讨论：这里有一些谷歌小组讨论：https ://groups.google.com/d/msg/raphaeljs/OP29oelR5Eg/zPi5m6rjsvIJ