SVG 예제 - 라인을 따라 움직이는 텍스트

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

xml:space="preserve">

<svg id="root" xml:space="presserve" width="600" height="400">

<rect x="0" y="0" width="600" height="400" style="fill:#E0E0E0"/>

<defs>

<path id="curve" d="M100 200Q200,100 300,200 T500,200" style="stroke:blue;stroke-opacity:0.2;stroke-width:2;fill:none"/>

</defs>

<text style="font-size:25;fill:red;text-anchor:left">

<textPath id="result" method="align" spacing="auto" startOffset="100%" xlink:href="#curve">

<tspan dy="-10">칙칙폭폭 기차놀이 ~</tspan>

<animate begin="go.click" dur="5s" repeatCount="1" attributeName="startOffset" values="100%;0%"/>

</textPath>

</text>

<use xlink:href="#curve"/>

<text x="550" y="380" style="font-size:25;fill:black;text-anchor:middle">GO</text>

<rect id="go" x="520" y="355" width="60" height="30" style="fill:black;fill-opacity:0.1"/>

</svg>

</svg>

---------------------------------------------------------------------------------------------------------------------------