SVGアニメーションの例

元の投稿を読む: [CSSとJavaScriptでSVGをアニメーション化する方法](https://www.coding-dude.com/wp/css/animate-svg/)

## SVGタイポグラフィアニメーション

<p class="codepen" data-height="600" data-default-tab="result" data-slug-hash="ZYYbRyw" data-pen-title="CSS Scroll Color Animation" data-user="inegoita" style="height: 600px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/inegoita/pen/ZYYbRyw">
  CSS Scroll Color Animation</a> by Ion Emil Negoita (<a href="https://codepen.io/inegoita">@inegoita</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>

SVG画像に命を吹き込みましょう。このチュートリアルでは、CSSとJavaScriptを使ってSVG画像をアニメーション化する方法を紹介します。CSSアニメーションの基本、SVG要素のアニメーション化、そしてスクロールやクリックによるアニメーションのトリガーについても解説します。上のデモで実際の動作を確認してください。スクロール、クリック、または再生ボタンを押してループ再生することでアニメーションをトリガーできます。

## アニメーション用のSVG画像を作成する

SVGアニメーションを始めるには、SVG画像が必要です。 [Inkscape](https://inkscape.org/)、[Adobe Illustrator](https://www.adobe.com/products/illustrator.html)、または[Photoshopの最新バージョン](https://www.psd-dude.com/tutorials/resources/adobe-photoshop-twenty-five-years-anniversary-infographic.aspx)を使って作成できます。以下のオプションがあります。
* ベクター画像を一から描く
* 写真や画像をSVGに変換する（[Photoshopを使って画像をベクター画像に変換する方法](https://www.psd-dude.com/tutorials/image-to-vector-in-photoshop.aspx)のチュートリアルをご覧ください）
* ベクター画像ジェネレーターを使う

MockoFunの無料オンラインツール (テキストインシェイプジェネレーター)を使用します。クールなタイポグラフィSVGデザインを簡単に作成できます。

MockoFunの無料オンラインツール[text in shape generator](https://www.mockofun.com/template/text-in-shape/) 

[![テキストを図形に](https://www.coding-dude.com/wp/wp-content/uploads/2025/04/Text-In-Shape-Generator-2.webp)](https://www.mockofun.com/template/text-in-shape/)
{% cta https://www.coding-dude.com/wp/wp-content/uploads/2025/04/text-in-shape-3.svg %} SVGバージョンをダウンロード {% endcta %}

[![](https://www.coding-dude.com/wp/wp-content/uploads/2025/04/Text-In-Shape-Generator-1.webp)](https://www.mockofun.com/template/text-in-shape/)
{% cta https://www.coding-dude.com/wp/wp-content/uploads/2025/04/text-in-shape-2.svg %} SVGバージョンをダウンロード {% endcta %}

[![](https://www.coding-dude.com/wp/wp-content/uploads/2025/04/Text-In-Shape-Generator.webp)](https://www.mockofun.com/template/text-in-shape/)
{% cta https://www.coding-dude.com/wp/wp-content/uploads/2025/04/text-in-shape-2.svg %} SVGバージョンをダウンロード {% endcta %}

SVG画像が完成したので、アニメーション化に進みましょう！

## CSS で SVG をアニメーション化する
CSS で SVG をアニメーション化するには、HTML ページで SVG をインライン SVG として使用する必要があります。つまり、テキストエディターから SVG 定義をコピーし、HTML に貼り付けます。

SVG を開くと、グループ (`<g/>` タグ) とパス (`<path/>` タグ) が表示されます。ここではパスに焦点を当てます。パスがアニメーション化の対象となるためです。

SVG の CSS は HTML と似ていますが、プロパティが異なります。[SVG の CSS](https://www.psd-dude.com/tutorials/resources/adobe-photoshop-twenty-five-years-anniversary-infographic.aspx) の入門ガイドをご覧ください。

## SVG のカラーアニメーション
SVG 内の 2 つの `<path/>` 要素 (背景図形と図形内のテキスト) の色をアニメーション化します。 CSS の `hsl()` 値を使用すると、色の操作が簡単になります。

色を変更するには、彩度と明度はそのままに、色相のみを変更します。これにより、調和のとれた配色が作成されます。

コードは次のとおりです。
```javascript
const SATURATION = '100%';
const LIGHTNESS = '50%';

currentHue = (newHue % 360 + 360) % 360;
const shapeHue = (180 + currentHue)%360;
const dynamicColor = `hsl(${currentHue}, ${SATURATION}, ${LIGHTNESS})`;
const shapeColor = `hsl(${shapeHue}, ${SATURATION}, ${LIGHTNESS})`

svgTexts.forEach(el => {
el.style.fill = dynamicColor;
});
svgShapes.forEach(el => {
el.style.fill = shapeColor;
});
```
## アニメーションのトリガー
アニメーションをトリガーするには、3つの方法を使用します。

1. **再生/一時停止ボタン**: 色のサイクルを開始または一時停止します。
2. **マウスホールド**: マウスボタンを押している間、色が変わります。
3. **マウスホイールスクロール**: スクロール時に色が変わります。

詳しく見ていきましょう。

* **再生/一時停止ボタン**: タイマーを使用して、100ミリ秒ごとに色の変化をトリガーします。
```javascript
document.getElementById("playPauseCheckbox").addEventListener('change', event => {
// ...
});
```
* **マウスホールド**: マウスボタンを押している間、`setInterval()` を使用して色を変更します。
```javascript
function handleMouseDown(event){
// ...
}
function handleMouseUp(event){
// ...
}
```
* **マウスホイールスクロール**: スクロール時に色を変更します。下にスクロールするたびに色相を15度ずつ増加し、上にスクロールするたびに色相を減少させます。
```javascript
window.addEventListener('wheel', handleWheel, { passive: true });
// ...
function handleWheel(event) {
// ...
}
```
これで完了です！これで、シェイプデザインでSVGテキストを作成し、CSSとJSを使ってアニメーションさせる方法が分かりました。

## まとめ

これで、シェイプデザインでSVGテキストを作成し、CSSとJSを使ってアニメーションさせる方法が分かりました。これは、ウェブサイトに簡単に組み込める、とても便利なウェブデザインのテクニックです。ご質問があれば、コメント欄にご記入ください。