0

I have this path M -13 11 A 17.81 17.81 0 0 0 14 11 L 41 30 A 50 50 0 0 1 -39 29 Z which is a shape like 1/4 of a circle that I want to make it rotate around the center. So far what I tried was to compare the same shape rotated at 10 deg increments and see if any pattern emerges. I noticed that the values are incremented and decremented in relatively same quantities. At a 10 deg rotation they move about 2 points. But is not exact and when I tried to increment the values like that I got slightly distorted shape. Here same shape with 30 deg rotatian: M -19 17 A 17.81 17.81 0 0 0 18.5 5 L 50 9 A 50 50 0 0 1 -57 47 Z

The nature of my project only allows me to use the d attribute to modify shapes. How can I rotate an SVG by only manpulating the path d attribute?

code_dude
  • 951
  • 2
  • 15
  • 28
  • 2
    change the shape of your project so that you can use transforms. What you have now is an [XY problem](https://en.wikipedia.org/wiki/XY_problem) – Robert Longson Jan 24 '22 at 11:38
  • 2
    You will have to apply a rotation matrix explicitly to all your points using JavaScript - see here for the Math https://en.wikipedia.org/wiki/Rotation_matrix – Michael Mullany Jan 24 '22 at 13:16
  • 2
    **ray hatfield's** answer [Pie chart using circle element](https://stackoverflow.com/questions/70648538/pie-chart-using-circle-element/70659532#answer-70660415) might be helpful (actually about the d calculation of circle segment) – herrstrietzel Jan 24 '22 at 15:41
  • Do you have a ready path you want to rotate, or it's OK to build the path using its inner / outer radius and start / end angle? – Michael Rovinsky Jan 24 '22 at 16:12
  • This is the shape I want to rotate. I made three of them and rotated them manually so I can see which way can I change the points to get rotation correctly. https://yqnn.github.io/svg-path-editor/ – code_dude Jan 24 '22 at 20:53

0 Answers0