Using a motion path to move SVG text

A simple example of animating a SVG text over a SVG path.
<!DOCTYPE html>
<html>
<body>

    <svg width="500" height="500">
      <g transform="translate(100,100)">
        <text id="TextElement" x="0" y="0" style="font-family:Arial;font-size:24"> TIZEN
          <animateMotion path="M 0 0 L 100 100 M 100 100 L 200 0 M 200 0 L 0 0" dur="3s" fill="freeze" repeatCount="indefinite"/>
        </text>
      </g>
    </svg>

</body>
</html>

Responses

0 Replies