Skip to content Skip to sidebar Skip to footer

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?

<svgxmlns="http://www.w3.org/2000/svg"xmlns:svg="http://www.w3.org/2000/svg"viewbox="50 70 200 200"><pathstroke="black"fill="none"d="M70,85H125V140H70V85Z" ></path><pathd="M0,0 L-2.69,-4.95L0,-2.2L2.69,-4.95L0,0z"transform="rotate(-90)"style="fill: #ff0000;"><animateMotionpath="M70,85H125V140H70V85Z"dur="10s"rotate="auto"repeatCount="indefinite"></animateMotion></path><g><desc>white mask</desc><rectx="90"y="80"width="15"height="65"fill="white"  /><rectx="65"y="105"width="65"height="15"fill="white" /></g></svg>

Post a Comment for "Svg Animation - Rotation And Transformation Problem"