西出正美です。有益なことや無益なことなどいろいろ書いています。

SVGとCSSだけで文字をクルクル回す

JavaScriptを使わずにSVGとCSSだけで文字をクルクル回したいこと、ありますよね。
僕はあるので自分用にメモです。

文字がクルクル回ります。
<svg
  style="animation: spin 5s linear infinite; max-width:300px"
  viewBox="0 0 100 100"
>
  <defs>
    <path
      id="Circle"
      d="M 25, 50 a 25,25 0 1,1 50,0 a 25,25 0 1,1 -50,0"
    />
  </defs>
  <text>
    <textPath href="#Circle">
      文字がクルクル回ります。
    </textPath>
  </text>
</svg>

SVGは大きさ50*50の円とその周囲を沿うようにテキストを記述しています。SVGのスタイルにはクルクル回るCSSを書いてます。
これだけでクルクル回ったので楽しかったです。

NISHIDEMASAMI.GITHUB.IO
NISHIDE, Masami

西出正美です。有益なことや無益なことなどいろいろ書いています。

©NISHIDE, Masami Some Rights Reserved