SVGのアウトライン(線)をアニメーションでラインが描かれるようにする

SVGファイルを用意する

まず以下のような、SVGファイルを用意しましょう。
ここではサンプルとして「HISTORY」という文字のSVGファイルを使います。

<div style="text-align:center;"><svg xmlns="http://www.w3.org/2000/svg" width="300" height="50" viewBox="0 0 271.509 36.456"><path id="svgpath" d="M-133.917-34.3V0h9.506V-13.671h13.524V0h9.506V-34.3h-9.506v12.152h-13.524V-34.3Zm48.412,0V0h9.7V-34.3Zm30.086,21.756-6.468,4.7c2.254,5.145,8.036,9.114,15.092,9.114,6.713,0,13.279-3.871,13.279-11.172,0-5.488-3.626-8.82-8.722-10.584-4.41-1.568-7.5-2.548-7.5-4.753,0-1.323,1.176-2.156,3.087-2.156,2.3,0,4.41,1.274,5.929,3.724l7.154-3.969c-1.813-3.479-5.978-7.546-13.279-7.546-6.909,0-12.593,3.675-12.593,10.045,0,6.762,5.831,9.653,9.212,10.927,5.243,2.009,6.664,2.744,6.664,4.655,0,1.862-1.519,2.793-3.626,2.793C-50.47-6.762-53.41-8.918-55.419-12.544Zm32.634-13.279h9.6V0h9.506V-25.823h9.6V-34.3H-22.785Zm36.75,8.673c0,10.78,7.791,18.424,18.767,18.424S51.5-6.37,51.5-17.15,43.512-35.182,32.732-35.182C22.148-35.182,13.965-27.93,13.965-17.15Zm10.045,0c0-5.586,3.43-9.408,8.722-9.408,5.537,0,8.722,3.822,8.722,9.408s-3.381,9.408-8.722,9.408C27.44-7.742,24.01-11.564,24.01-17.15ZM65.415-34.3V0h9.506V-11.368H76.93L83.692,0H94.766L86.191-12.642c4.41-1.862,6.517-5.537,6.517-10.192,0-6.713-4.459-11.466-13.818-11.466Zm12.691,8.036c2.989,0,4.7,1.421,4.7,3.822,0,2.45-1.715,3.871-4.7,3.871H74.921v-7.693Zm48.51-8.036L120.589-22.3,114.513-34.3H103.537l12.2,20.678V0h9.7V-13.72L137.592-34.3Z" transform="translate(133.917 35.182)" /></svg></div>

ポイント１：<img src=”***.svg”>は使いません。<svg>タグをそのまま使います。svgファイルをメモ帳などで開くと、svgファイルのタグが確認できます。

ポイント２：<svg>タグの中の<path>タグには、id属性を付けてCSSで指定できるようにしておきます。

ポイント３：CSSで色や線を設定できるように<path>タグにある、stroke属性やfill属性は消しておきます。

設定するCSS

次に、CSSでアニメーションを書いていきます。
設定するCSSの全体は以下の通りです。

#svgpath {
  stroke-dasharray:185;
  animation:line-anim 5s infinite;
  fill:none;
  stroke:#000;
  stroke-width:1px;
  stroke-linecap:round;
}
@keyframes line-anim {
  0% {
    stroke-dashoffset:185;
  }
  100% {
    stroke-dashoffset:0px;
  }
}

仕組みとして、まず破線の一つ一つの線の長さを指定するstroke-dasharrayプロパティの値を大きくします。SVGのアウトラインをすべて破線の中の一つ目の線で描けるような大きな値にする必要があります。

次に大事なのが、store-dashoffsetです。
これは、線の始まりの余白を決めるプロパティです。これをstroke-dasharrayの値と同じ値を決定することで、線が描かれていない部分を表現します。

そして、アニメーションで最終的にstore-dashoffsetを0に、つまり線の始まりの余白を0にすることで、あたかも線が描かれているように表現されます。

実行サンプル

線を綺麗に描かせるには？

１．stroke-dasharrayを調整します。SVGのpathの長さによって値が変わるので、Chromeなどのデベロッパーツールで、CSSアニメーションをオフにした状態で、0から10、20と値を増やしていきます。線がすべて絵が描かれたらその値でストップ。

２．CSSのkeyframesの中にあるstroke-dashoffsetをstroke-dasharrayと同じ値に設定します。

線の引かれる秒数を変えたいときは、animationプロパティの秒数を変更します。

ラインを綺麗にするには？

デフォルトの「butt」だと、角が汚くなることがあります。そんな時は、stroke-linecapプロパティを「round」もしくは「square」にしてみてください。

ラインが見切れてしまう…どうすれば…？

ラインの幅を5pxなどにしたら、上記のように描画範囲から線がはみ出てしまい、見た目が良くないなって思うことありませんか？

そんなときは、以下のようにAdobeXDやIllustratorでSVGを作成するとき、一つ大きい透明な四角形で囲みグループ化してあげることで、解決できます。

結果は以下の通り。

<svg xmlns="http://www.w3.org/2000/svg" width="278" height="43" viewBox="0 0 278 43"><g transform="translate(-298 -1112.315)"><path id="svgpath3" d="M-133.917-34.3V0h9.506V-13.671h13.524V0h9.506V-34.3h-9.506v12.152h-13.524V-34.3Zm48.412,0V0h9.7V-34.3Zm30.086,21.756-6.468,4.7c2.254,5.145,8.036,9.114,15.092,9.114,6.713,0,13.279-3.871,13.279-11.172,0-5.488-3.626-8.82-8.722-10.584-4.41-1.568-7.5-2.548-7.5-4.753,0-1.323,1.176-2.156,3.087-2.156,2.3,0,4.41,1.274,5.929,3.724l7.154-3.969c-1.813-3.479-5.978-7.546-13.279-7.546-6.909,0-12.593,3.675-12.593,10.045,0,6.762,5.831,9.653,9.212,10.927,5.243,2.009,6.664,2.744,6.664,4.655,0,1.862-1.519,2.793-3.626,2.793C-50.47-6.762-53.41-8.918-55.419-12.544Zm32.634-13.279h9.6V0h9.506V-25.823h9.6V-34.3H-22.785Zm36.75,8.673c0,10.78,7.791,18.424,18.767,18.424S51.5-6.37,51.5-17.15,43.512-35.182,32.732-35.182C22.148-35.182,13.965-27.93,13.965-17.15Zm10.045,0c0-5.586,3.43-9.408,8.722-9.408,5.537,0,8.722,3.822,8.722,9.408s-3.381,9.408-8.722,9.408C27.44-7.742,24.01-11.564,24.01-17.15ZM65.415-34.3V0h9.506V-11.368H76.93L83.692,0H94.766L86.191-12.642c4.41-1.862,6.517-5.537,6.517-10.192,0-6.713-4.459-11.466-13.818-11.466Zm12.691,8.036c2.989,0,4.7,1.421,4.7,3.822,0,2.45-1.715,3.871-4.7,3.871H74.921v-7.693Zm48.51-8.036L120.589-22.3,114.513-34.3H103.537l12.2,20.678V0h9.7V-13.72L137.592-34.3Z" transform="translate(435 1151.415)" /><rect width="278" height="43" transform="translate(298 1112.315)" fill="none"/></g></svg>

SVGを見てみると、rectで覆われるようにタグが設定されています。四角形が周りにある分、少し文字自体が小さくなりますが、CSSでSVG自体の大きさを調整し、margin・relative・top・leftを使い位置を調整してあげましょう。

代表取締役社長：吉田 基崇 Webサイト制作
Webシステム・サービス開発
顧客アプリ開発 [本店]
〒815-0081
福岡市南区那の川1-19-20 [東京支店]
〒131-0043
墨田区立花2-26-11
有限会社出沼木工所内 Tel:092-983-6427 Fax:092-983-6428 法人番号:2290001046747
法人番号指定年月日:平成27年10月5日
適格請求書発行事業者登録番号:T2290001046747
適格請求書発行事業者登録日:令和5年10月1日

私たちは日本と世界の全ての子どもたちが
希望と未来と愛に満たされることを
目標にIT活動を命をかけて実施します。

あらゆる違い、言語、文化、宗教、貧富の差を越えた学び場づくり、
世界を育てる人材の育成と支援の
研究開発と普及と実践を行います。

本サイトの掲載記事、写真、イラスト、コンテンツの無断転載を禁じます。
記載されているロゴ、システム名、製品名は各社及び商標権者の登録商標あるいは商標です。
© 2017-2025 LEANSYSTEM. All rights reserved.

タッチされた！