Tengo un SVG importado en mi proyecto paper.js.

Lo que estoy tratando de hacer es rotar cada uno de los puntos del segmento de svg alrededor de un radio establecido, animándolo con el método onFrame() .

Sé cómo colocar la posición x e y de cada punto de segmento, pero realmente no puedo entender cómo colocarlo en una 'rotación'.

Lo que tengo ahora:

 var words = project.importSVG(document.querySelector("svg")); words.visible = true; // Turn off the effect of display:none;; words.position = view.center; var letterR = words.children.letter_r; var letterR_outside = letterR.children.letter_r_outside; letterR_outside.selected = true; var rotate_point = view.center; function onFrame(event) { var _delta = Math.sin(event.time); // console.log(Math.round(50 * Math.cos(theta[0])) * _delta); // letterR_outside.segments[0].point.x = Math.round(_radius * Math.cos(theta[0])); // letterR_outside.segments[0].point.y = Math.round(_radius * Math.sin(theta[0])); for (var i = 0; i < letterR_outside.segments.length; i++) { var segment = letterR_outside.segments[i]; // segment.point.x += _delta; segment.point.rotate(3, rotate_point); } }

Ejemplo de lo que estoy tratando de lograr al rotar cada punto alrededor de un radio. [Hice visibles los círculos negros para mostrar el círculo de rotación de cada punto]

No estoy exactamente seguro de cómo abordar esto. Cualquier ayuda es muy apreciada