SVG HTML

Animated Rotating Oriented Letter

This SVG example illustrates how to create an animated rotating letter that keeps its orientation by a reverse rotation.

RotateOrientedLetter.svg

<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <marker id="idArrowhead" markerWidth="9" markerHeight="9" refX="8" refY="4" orient="auto">
      <path d="M 0,0 L8,4 L0,8 Z" fill="black" stroke="black" />
    </marker>
  </defs>
  <circle cx="200" cy="200" r="150" fill="none" stroke="gray" />
  <g transform="translate(200 200)">
    <g transform="">
      <animateTransform attributeName="transform" type="rotate" dur="7s" from="360" to="0" repeatCount="indefinite" />
      <g transform="translate(150 0)">
        <!-- This internal text translation comes before the internal rotation to center the rotation at (-8, 5) -->
        <text x="-8" y="5" font-size="20" fill="black">A
          <animateTransform attributeName="transform" type="rotate" dur="7s" from="0" to="360" repeatCount="indefinite" />
        </text>
      </g>
    </g>
  </g>
</svg>
 

Output

A
 
 

© 2007–2025 XoaX.net LLC. All rights reserved.