SVG 예제 - 텍스트를 지나가는 원(circle)안의 글자색과 배경을 바꾸기

<?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 width="600" height="100" viewBox="0 0 600 100">

<defs>

<g id="fond">

<rect x="0" y="0" width="600" height="100" fill="white"/>

<text x="300" y="60" style="text-anchor:middle;font-size:35;font-family:Arial;fill:red">

블로그 방문을 환영합니다

</text>

</g>

<clipPath id="spot" clipPathUnits="userSpaceOnUse">

<circle cx="0" cy="50" r="50">

<animateMotion dur="5s" repeatCount="indefinite" path="M0 0 1600 0"/>

</circle>

</clipPath>

</defs>

<rect x="0" y="0" width="600" height="100" fill="black"/>

<text x="300" y="60" style="text-anchor:middle;font-size:35;font-family:Arial;fill:yellow;fill-opcity:0.7">

Welcome to my blog</text>

<use clip-path="url(#spot)" xlink:href="#fond"/>

</svg>

</svg>

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

<animateMotion dur="5s" repeatCount="indefinite" path="M0 0 1600 0"/>

에서 dur은 모션이 이뤄지는 시간, repeatCount는 모션 반복횟수, path는 모션의 이동경로를 뜻하는 것 같음

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