This SVG example illustrates how to create an animated rotating arrow with a marker as its arrowhead.
<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)">
<path d="M 0,0 L150,0" stroke="gray" fill="none" marker-end="url(#idArrowhead)">
<animateTransform attributeName="transform" type="rotate" dur="7s" from="360" to="0" repeatCount="indefinite" />
</path>
</g>
</svg>
© 20072025 XoaX.net LLC. All rights reserved.