SVG Animation - Rotation And Transformation Problem
I need your help. I have a question regarding to svg animation. I would like to apply animation to red arrows (find me here) and achieve 3 things Each arrow should move on the p
Solution 1:
Is this what you were looking for?
<svg xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" viewbox="50 70 200 200">
<path stroke="black" fill="none" d="M70,85H125V140H70V85Z" ></path>
<path d="M0,0 L-2.69,-4.95L0,-2.2L2.69,-4.95L0,0z" transform="rotate(-90)" style="fill: #ff0000;">
<animateMotion path="M70,85H125V140H70V85Z" dur="10s" rotate="auto" repeatCount="indefinite"></animateMotion>
</path>
<g>
<desc>white mask</desc>
<rect x="90" y="80" width="15" height="65" fill="white" />
<rect x="65" y="105" width="65" height="15" fill="white" />
</g>
</svg>
Post a Comment for "SVG Animation - Rotation And Transformation Problem"