Created
February 14, 2026 09:37
-
-
Save softmarshmallow/07a72ac90a5328e70dd860b790d506b1 to your computer and use it in GitHub Desktop.
Demonstration of SVG marker refX is not arc-length aware
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <svg width="460" height="200" viewBox="0 0 460 200" | |
| xmlns="http://www.w3.org/2000/svg"> | |
| <defs> | |
| <!-- Small arrow marker --> | |
| <marker id="arrow" | |
| viewBox="0 0 10 10" | |
| refX="0" | |
| refY="5" | |
| markerWidth="8" | |
| markerHeight="8" | |
| orient="auto"> | |
| <!-- HUGE refX sweep while marker stays tiny --> | |
| <animate attributeName="refX" | |
| values="-40; 40; -40" | |
| dur="3s" | |
| repeatCount="indefinite" /> | |
| <path d="M0,0 L10,5 L0,10 Z" fill="black"/> | |
| </marker> | |
| </defs> | |
| <!-- Curved path --> | |
| <path d="M40,150 C150,10 310,10 420,150" | |
| fill="none" | |
| stroke="black" | |
| stroke-width="4" | |
| marker-end="url(#arrow)" /> | |
| </svg> |
Author
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This demo animates a small arrow marker’s refX across a large range on a curved path.
The arrow visibly detaches from the endpoint instead of sliding along the curve, proving that:
refX is applied as a simple post-translation in marker space after orientation is solved,
not as a geometric movement along the path’s arc length or local frame.