SVGで円形に配置したテキストを回転させる方法 | ニッティ・グリッティとはマーケティングweb戦略デザイン美容室向け記事 | お役立ち情報 | 岡山のホームページ制作会社。WEB戦略が得意なホームページ成績上げ屋さん！

前回はSVGを使ってテキストを円周にそって配置してみました。

SVGにできることはまだあります。

SVGを使用すると、さらにアニメーションを加えることができるのです！！

円であれば、回転させたくなるのが人の常というものです。

なので、今回はテキストを円周に沿って回転させてみましょう

cssで処理することも可能ですが、なんとSVGは単独でアニメーションできます

SVGタグに、次の記載(animateTransform)を加えます

<animateTransform

    xlink:href = "#アニメーション対象のID"

    attributeName = "transform"

    type = "rotate"

    from = "0 75 66"

    to = "360 75 66"

    dur = "10s"

    repeatCount = "indefinite"

    />

xlink:hrefにアニメーションさせる対象のID、attributeNameとtype にアニメーションの内容を書きます。(今回はtransformとrotate)

そして、始まりの状態は、from = “角度、中心のX座標,　中心のY座標”、完了の状態は、to=に記載します。

durは時間、repeatCountは実行回数です。

ここで問題になってくるのは、回転の中心の座標です

回転させるには、回転の中心を探さなくてはなりませんが、完全な円ではないので、中心点を見つけるのは

難しいです。

そんなときの中心点の見つけ方ですが、画像編集ソフトやhttps://boxy-svg.com/などのオンラインツールで

SVGファイルを開き、円を追加してみるといいです。

SVGファイルに追加されたcircleのcx とcyが(ほぼ)中心になります。

そして今回のコードはこちらです、

単純にanimateTransformを追加しているだけです

<svg viewBox="0 0 200 200">
        <path id="circle" fill="transparent" 
              d="M114.17 66.88C114.17 88.95 96.24 106.88 74.17 106.88C52.09 106.88 34.17 88.95 34.17 66.88C34.17 44.8 52.09 26.88 74.17 26.88C96.24 26.88 114.17 44.8 114.17 66.88Z"/>
        <text width="300">
        <textPath xlink:href="#circle">
        Go above and beyond your expectations! <tspan class="color-red">NITTY GRITTY</tspan>
        </textPath>
        </text>
          
　　　　<animateTransform
　　　　　　xlink:href = "#circle"
　　　　　　attributeName = "transform"
　　　　　　type = "rotate"
　　　　　　from = "0 75 66"
　　　　　　to = "360 75 66"
　　　　　　dur = "10s"
　　　　　　repeatCount = "indefinite"
　　　　/>
 </svg>

くるくるまわり始めましたね。

さらにcssでアニメーションを追加することもできますよ