seems to work fine You have two possible solutions for this issue. Either you will have to put the and inside a group and apply transformations to the group Or find actual point on path and then find the transformed point by applying the transformation matrix. Solution 1
var len = firstOrbit.getTotalLength();
var circleA = s.circle(0,0,10);
var group = s.g(firstOrbit,circleA);
group = group.transform('r75,400,400');
this one helps. I do not believe this is possible with CSS transformations (as you have seen), instead you should look at shape-inside. This will let you define a shame that you want the text to be contained in. However as you can see from the link, support isn't great at this time. Would SVG be a better solution? Here is an example of this approach (source):
shape-inside: circle(160px at 400px 60px);
d3.js v4, how do I have a line follow the mouse on hover, but also have a circle follow the path?
SVG path follow flipped & rotated + not following path
By : Ridge Kennedy
Date : March 29 2020, 07:55 AM
Any of those help : sorry, this is just a partial answer: your svc is transformed with scale(1,-1) (that flips it upside down) and then the css scales the svg to 100% screensize, but the followed path still has the same size.
How to make parent div follow the height of a 45 degree rotated child div
By : user3038030
Date : November 24 2020, 05:48 AM