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.