Question

我在尝试在重复循环中围绕圆形路径动画一些文本时遇到了一些麻烦。基本上我正在尝试模拟一个带有一些文本的唱机，它随着旋转而旋转。我刚刚在Illustrator中快速制作了一个简单的唱机，并将其保存为svg文件，然后将相关部分放在网页上。我对SVG动画很新，并且想知道如何最好地接近这个。我正在使用javascript / jQuery处理页面上的其他一些事件，所以我也计划在这里接近动画。有没有简单的方法在SVG中执行此操作？如果可能的话，我真的不必手动计算在javascript中改变每个动画迭代的旋转和x / y坐标的正确值，但如果是这样那么公平。这是我的记录的SVG输出（来自Illustrator）（圆形线显示我计划在哪里有文本）。

    <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>

非常感谢任何帮助，谢谢！

Answer 1

可能是这样的：http://hoffmann.bplaced.net/svgtest/textonapath02.svg或http://srufaculty.sru.edu/david.dailey/svg/SVGOpen2008/textPath1.svg。这些动画设置了textPath的startOffset属性。

SVG中的动画文本

1 个答案: