Jak zastosować macierz transformacji do współrzędnych ścieżki w Raphael JS 2?

Question

Chcę zastosować lub "wypalić" transformację kilku ścieżek w Raphael JS 2, dzięki czemu mogę połączyć je w jedną ścieżkę.

Oto przykładowa ścieżka, w której chciałbym zastosować atrybut "transformacja" dla wszystkich współrzędnych "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"> 

I rozumieć, że ramy SVG edycja można przekształcić ścieżkę współrzędne pozycji bezwzględnych i usunąć macierzą transformacji w procesie.

Niektóre inne pytania, których nie mogłem moją odpowiedź od:

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

Answer 1

Częściowym rozwiązaniem może być znaleziony w tym 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); 
} 

To cr tworzy nową ścieżkę, opartą na każdej postaci z oryginalnego zestawu. Jednak skrzypce nie umieszcza poprawnie znaków.

Niektóre pokrewne dyskusja na grupie Raphael Google: jakaś grupa dyskusji google tutaj: https://groups.google.com/d/msg/raphaeljs/OP29oelR5Eg/zPi5m6rjsvIJ

Answer 2

Oto jsFiddle że stosuje wszystkie transformacje dla Ciebie: http://jsfiddle.net/ecmanaut/cFSjt/

Jest możliwe, że Raphael eksponuje niektóre lub wszystkie narzędzia, które sam wypełniłem, ale jeśli nie, to ładnie działają. Jeśli twoje potrzeby obejmują więcej elementów bez ścieżek (takich jak grupy, prostokąty, okręgi, elipsy itd.), Najpierw przekształć je w elementy ścieżki (na przykład za pomocą pathify).