<style> path#curve1 { transform-origin:50% 50%; animation:anim 5s ease-in-out infinite; } @keyframes anim { 0% {transform:rotateZ(0deg);} 100% {transform:rotateZ(359deg);} } </style> <svg viewBox="0 0 20 20"> <defs> <marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse"> <path d="M0,0 l10,5 -10,5z" /> </marker> </defs> <path id="curve1" d="M10,10 c2,-5 3,-7 4,-3" marker-start="url(#arrow)" marker-end="url(#arrow)" fill="none" stroke="green" stroke-width=".1"/> </svg>
반응형
'svg' 카테고리의 다른 글
svg textPath,stroke-dasharray,stroke-dashoffset (0) | 2023.09.16 |
---|---|
svg radialGradient example (0) | 2023.09.16 |
svg path : leaves (0) | 2023.09.14 |
svg path:flower petals,sepals (0) | 2023.09.14 |
svg path marker circle (0) | 2023.09.14 |