This SVG example illustrates how to create an animated rotating letter that keeps its orientation by a reverse rotation.
<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>
© 20072025 XoaX.net LLC. All rights reserved.