I’m having some trouble trying to animate some text around a circular path in a repeating loop. Basically I’m trying to simulate a record player with some text on it that rotates around with the record as it spins. I just made a simple record player in Illustrator quick and saved it as an svg file then threw the relevant parts in on a webpage. I pretty new to SVG animations and was wondering how to best approach this. I’m using javascript/jQuery to handle some other events on the page so that’s how I was planning on approaching the animations here too. Is there any easy way to do this in just SVG? If possible I’d really rather not have to manually calculate the proper value by which to change the rotation and x/y coordinates per animation iteration in javascript, but if so then fair enough. Here’s the SVG output (from Illustrator) for my record (the circular lines show where I had planned on having text).
<svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="800px" height="600px" viewBox="0 0 800 600" enable-background="new 0 0 800 600" xml:space="preserve">
<path fill="#CCCCCC" stroke="#FFFFFF" stroke-width="1.24473" d="M400,5C237.07568,5,105,137.07568,105,300
c0,162.9248,132.07568,295,295,295c162.92383,0,295-132.0752,295-295C695,137.07568,562.92383,5,400,5z M400,425.7168
c-69.43164,0-125.71729-56.28418-125.71729-125.7168c0-69.43164,56.28564-125.71729,125.71729-125.71729
c69.43262,0,125.7168,56.28564,125.7168,125.71729C525.7168,369.43262,469.43262,425.7168,400,425.7168z"/>
<circle fill="#CCCCCC" stroke="#FFFFFF" stroke-width="1.24473" cx="399.99976" cy="300" r="11.20239"/>
<circle fill="none" stroke="#FFFFFF" stroke-width="1.20836" cx="399.99951" cy="300" r="265.83936"/>
<circle fill="none" stroke="#FFFFFF" stroke-width="1.05836" cx="399.99951" cy="300" r="232.83936"/>
<circle fill="none" stroke="#FFFFFF" stroke-width="0.90382" cx="399.99951" cy="300" r="198.83936"/>
<circle fill="none" stroke="#FFFFFF" stroke-width="0.75382" cx="399.99951" cy="300" r="165.83936"/>
<rect x="43.1084" y="1.00049" fill="none" stroke="#CCCCCC" stroke-width="1.09253" width="713.78223" height="597.99951"/>
<rect id="name" x="351" y="186.5" fill="none" width="96.79297" height="16"/>
</svg>
Any help would be greatly appreciated, thanks!
Something like this: http://hoffmann.bplaced.net/svgtest/textonapath02.svg or http://srufaculty.sru.edu/david.dailey/svg/SVGOpen2008/textPath1.svg perhaps. These animated the startOffset attribute of a textPath.