0
繰り返しループで円形のパスの周りにテキストをアニメーション表示しようとするときに問題があります。基本的には、レコードプレーヤーをシミュレートしようとしていますが、スピンしながらレコードを回転させるテキストがいくつかあります。 Illustratorでシンプルなレコードプレーヤーを簡単に作成し、それをsvgファイルとして保存してから、関連する部分をWebページにスローしました。私はSVGアニメーションをかなり新しくして、これに最も近づける方法を考えていました。私はjavascript/jQueryを使ってページ上の他のイベントを処理していますので、私はここでもアニメーションに近づく計画をしていました。 SVGでこれを行う簡単な方法はありますか？可能であれば、私は本当に回転とx/yの座標を変更する適切な値をjavascriptのアニメーション反復ごとに手作業で計算する必要はありませんが、そうであれば十分です。私の記録のためのSVG出力（Illustratorから）は次のとおりです（円の線は私がテキストを持っていた場所を示しています）。SVGのテキストにアニメーションを適用する
<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>
ご協力いただきありがとうございます！
ありがとうございます –