how to keep text orientation unchanged during rotation in SVG

Question

I am using <g transform = "rotate(45, 10, 30)"> in svg to roate som circles and texts around a point at the same time, however, I want to keep orientation of each individual font the same (e.g., always facing one direction while the text is moved/rotated).

For example,how could I change the labels such as "A" in the right-side image to correct orientation after rotation?

How should I do that?

Thanks!

Answer 1

Pure SVG

1. Rotate the entire group of elements: triangle, spiral and colored circles with the letters

<g id = "common"`>
 ....
</g> 
<animateTransform xlink:href="#common"
  attributeName="transform"
  type="rotate"
  begin="svg1.click"
  restart="whenNotActive"
  repeatCount="indefinite"
  dur="10s"
  values="
       0, 75.74, 74.91;
      -360, 75.74, 74.91"
  additive="sum" />   

2. Inside is the second animation of the rotation of circles and letters.

<animateTransform  attributeName="transform" type="rotate" begin="svg1.click" restart="whenNotActive"
repeatCount="indefinite" dur="10s"  
values="
    0, 56.13, 106.87;
    360, 56.13, 106.87"
additive="sum" /> 

3. We find the coordinates of the center of rotation of the letters using the getBBox () JS method

<script> 
  //Find the center of rotation of the letter A
  let bb = a1.getBBox();
console.log(bb.x+bb.width/2); 
console.log(bb.y+bb.height/2);
</script> 

The animation will start after clicking

text {
  font-family:sans-serif;
  font-size:14px;
  font-weight:bold;
  fill:#6E6E6E;
  }

<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" width="190px" height="190px" viewBox="0 0 150 150" version="1.1">
 <defs> 
  </defs>
  <g id="common">
  <g transform="translate(-27.970238,-63.089294)">
    <circle cx="102.9" cy="138.0" r="75" fill="#faa"/> 
    <path   d="m163.7 175.2-121.5 0 60.8-105.2z" fill="#fea"/>
   
   
          <!-- Spiral -->
    <path  d="m101.3 136.5c1.1 2-2.1 2.5-3.3 1.9-3.2-1.7-2.6-6.2-0.5-8.4 3.7-4.1 10.2-2.9 13.6 0.9 5 5.6 3.3 14.3-2.3 18.8-7.4 6-18.4 3.7-23.9-3.6-7-9.2-4.1-22.5 5-29.1 11-8 26.6-4.4 34.3 6.4 9 12.8 4.8 30.7-7.8 39.4-14.6 10-34.8 5.2-44.6-9.2-11.1-16.4-5.6-39 10.6-49.7 18.2-12.1 43.1-6 54.9 11.9 13.1 19.9 6.4 47.2-13.3 60.1" style="fill:none;stroke-width:1;stroke:#6E6E6E">
      
    </path>
    <g id="La">
    <circle cx="55.9" cy="108.0" r="12.9" fill="#efa"/>
        <text id="a1"  x="51" y="112">
          A  
        </text> 
           <!-- Animation of the rotation of the letter `A` -->
         <animateTransform  attributeName="transform" type="rotate" begin="svg1.click" restart="whenNotActive" repeatCount="indefinite" dur="10s"  
        values="0, 56.13, 106.87;360, 56.13, 106.87" additive="sum" /> 
    </g>
    <g>
    <circle cx="153.7" cy="110.3" r="12.9" fill="#efa"/>
    <text id="b1" xml:space="preserve" x="114" y="116" >
        B
    </text> 
        <!-- Animation of the rotation of the letter `B` -->
       <animateTransform  attributeName="transform" type="rotate" begin="svg1.click" restart="whenNotActive" repeatCount="indefinite" dur="10s"  
        values="0, 153.7, 110.3;360, 153.7, 110.3" additive="sum" /> 
  </g> 
  <g>
  <circle cx="105.2" cy="192.5" r="12.9" fill="#efa"   />
    <text id="c1" x="100" y="198"  >
    C
  </text> 
       <!-- Animation of the rotation of the letter `C`   -->
       <animateTransform  attributeName="transform" type="rotate" begin="svg1.click" restart="whenNotActive" repeatCount="indefinite" dur="10s"  
        values="0, 104.93, 193.46;360, 104.93, 193.46" additive="sum" /> 
    </g>
   </g>  
  </g>  
      <!-- Animating the rotation of the entire shape   -->
   <animateTransform xlink:href="#common" attributeName="transform" type="rotate" begin="svg1.click" restart="whenNotActive" repeatCount="indefinite" dur="10s"  
        values="0, 75.74, 74.91;-360, 75.74, 74.91" additive="sum" />   
</svg> 
<script> 
  //Find the center of rotation of the letter A
  let bb = a1.getBBox();
console.log(bb.x+bb.width/2); 
console.log(bb.y+bb.height/2);
</script> 

Example with adding animation of the ball movement in a spiral

text {
  font-family:sans-serif;
  font-size:14px;
  font-weight:bold;
  fill:#6E6E6E;
  }

<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" width="190px" height="190px" viewBox="0 0 150 150" version="1.1">
 <defs> 
  </defs>
  <g id="common">
  <g transform="translate(-27.970238,-63.089294)">
    <circle cx="102.9" cy="138.0" r="75" fill="#faa"/> 
    <path   d="m163.7 175.2-121.5 0 60.8-105.2z" fill="#fea"/>
   
       
   <path   d="m163.7 175.2-121.5 0 60.8-105.2z" fill="#fea"/>
      <!-- Spiral track (pink) -->
    <path id="track"  d="m101.3 136.5c1.1 2-2.1 2.5-3.3 1.9-3.2-1.7-2.6-6.2-0.5-8.4 3.7-4.1 10.2-2.9 13.6 0.9 5 5.6 3.3 14.3-2.3 18.8-7.4 6-18.4 3.7-23.9-3.6-7-9.2-4.1-22.5 5-29.1 11-8 26.6-4.4 34.3 6.4 9 12.8 4.8 30.7-7.8 39.4-14.6 10-34.8 5.2-44.6-9.2-11.1-16.4-5.6-39 10.6-49.7 18.2-12.1 43.1-6 54.9 11.9 13.1 19.9 6.4 47.2-13.3 60.1" style="fill:none;stroke-width:3;stroke:#FFAAAA"/>
          <!-- Spiral -->
    <path  stroke-dasharray="0,432" d="m101.3 136.5c1.1 2-2.1 2.5-3.3 1.9-3.2-1.7-2.6-6.2-0.5-8.4 3.7-4.1 10.2-2.9 13.6 0.9 5 5.6 3.3 14.3-2.3 18.8-7.4 6-18.4 3.7-23.9-3.6-7-9.2-4.1-22.5 5-29.1 11-8 26.6-4.4 34.3 6.4 9 12.8 4.8 30.7-7.8 39.4-14.6 10-34.8 5.2-44.6-9.2-11.1-16.4-5.6-39 10.6-49.7 18.2-12.1 43.1-6 54.9 11.9 13.1 19.9 6.4 47.2-13.3 60.1" style="fill:none;stroke-width:2;stroke:#6E6E6E">
       <!-- Spiral animation -->
     <animate attributeName="stroke-dasharray" begin="svg1.click" repeatCount="indefinite" restart="whenNotActive" dur="10s" values="0,432;432,0;0,432" fill="freeze" />
    </path> 
    <circle cx="0" cy="0" r="6" fill="#6E6E6E">
       <!-- Ball movement in a spiral clockwise -->
    <animateMotion id="forwards"
      begin="svg1.click;back.end"
      dur="5s" >
      <mpath xlink:href="#track" />
    </animateMotion> 
       <!-- Ball movement in a spiral counterclockwise -->
      <animateMotion
           id="back"
           dur="5s"
           begin="forwards.end"
           repeatCount="1"
           keyPoints="1;0"
           keyTimes="0;1"
           calcMode="linear"
           rotate="auto"
           fill="freeze" > 
    <mpath xlink:href="#track" />
    </animateMotion> 
   </circle>    
    
    <g id="La">
    <circle cx="55.9" cy="108.0" r="12.9" fill="#efa"/>
        <text  x="51" y="112"> A  </text> 
         <animateTransform  attributeName="transform" type="rotate" begin="svg1.click" restart="whenNotActive" repeatCount="indefinite" dur="10s"  
        values="0, 55.9, 108;360, 55.9, 108" additive="sum" /> 
    </g>
    <g>
    <circle cx="153.7" cy="110.3" r="12.9" fill="#efa"/>
    <text xml:space="preserve" x="114" y="116" >
        B
    </text> 
       <animateTransform  attributeName="transform" type="rotate" begin="svg1.click" restart="whenNotActive" repeatCount="indefinite" dur="10s"  
        values="0, 153.7, 110.3;360, 153.7, 110.3" additive="sum" /> 
  </g> 
  <g>
  <circle cx="105.2" cy="192.5" r="12.9" fill="#efa"   />
    <text x="100" y="198"  > C
</text> 
       <!-- Animation of the rotation of the letter `C`   -->
       <animateTransform  attributeName="transform" type="rotate" begin="svg1.click" restart="whenNotActive" repeatCount="indefinite" dur="10s"  
        values="0, 105.2, 192.5;360, 105.2, 192.5" additive="sum" /> 
    </g>
   </g>  
  </g>  
      <!-- Animating the rotation of the entire shape   -->
   <animateTransform xlink:href="#common" attributeName="transform" type="rotate" begin="svg1.click" restart="whenNotActive" repeatCount="indefinite" dur="10s"  
        values="0, 75.38, 75;-360, 75.38, 75" additive="sum" />   
</svg>