SVGのプロパティを理解してアニメーションさせてみよう

SVGのプロパティを理解してアニメーションさせてみよう

はやち

はやち

どうもですよ、はやちですよ( ˇωˇ)☝
今回は、SVGのプロパティを理解して実際に動かしてみようと思います( ˇωˇ)☝

SVGのプロパティについて

以下SVGのプロパティについてご紹介いたします。

fill

fillは、要素の内部の塗りを指定できるプロパティです。

fill:#fb9e28;

fill-opacity

fill-opacityは、fillで塗られた箇所の透明度を変えることができるプロパティです。

fill-opacity:0.3;

stroke

strokeは、線、テキスト、要素のアウトラインの色を指定できるプロパティです。

stroke:#000;

stroke-width

stroke-widthは、外形線の幅を指定できるプロパティです。
px,em,ec,pt,pc,cm,mm,inでの単位で指定することができます。0を指定すると、ストロークの線が消えてしまうので注意です( ˇωˇ)☝

stroke-width:5px;

stroke-opacity

stroke-opacityは、strokeで塗られた箇所の透明度を変えることができるプロパティです。

stroke-opacity:0.3;

stroke-linecap

stroke-linecapは、パスの端に形状を指定するプロパティです。

stroke-linecap:butt;

stroke-linecap:round;

stroke-linecap:square;
  • butt
    線に等しく平らな形状
  • round
    線の端を丸くする
  • square
    線の端を四角くする

stroke-linejoin

stroke-linejoinは、パスのつなぎ目の形状を指定するプロパティです。

stroke-linejoin: miter;

stroke-linejoin: round;

stroke-linejoin: bevel;
  • miter
    つなぎ目が鋭利な形状
  • round
    つなぎ目が丸い形状
  • bevel
    つなぎ目が平らな形状

stroke-dasharray

stroke-dasharrayは、線の間隔を指定するプロパティです。
1pxなら、1pxの線のあとに1pxの隙間、というように等間隔で表示されます。

stroke-dasharray: 1;

stroke-dasharray: 3;

stroke-dasharray: 10;

stroke-dashoffset

stroke-dashoffsetは、線の始まりの位置を指定するプロパティです。

デモではstroke-dasharrayの指定を170pxにすることで要素分の線が指定されるので、stroke-dasharrayを同じ数値分指定してあげることによって、位置が移動されて線の長さが変わったように見えます。

stroke-dasharray: 170;

stroke-dasharray: 100;

stroke-dasharray: 50;

stroke-dasharrayとstroke-dashoffsetの動きに関してはこちらでも説明されておりますのでご参考までに( ˘ω˘)☞三☞シュッシュッ
Animated line drawing in SVG

アニメーションさせてみよう

※アニメーションの確認の際はRERUNを押してください
SVGのプロパティを使って、できたアニメーションさせてみました( ˘ω˘)☞三☞シュッシュッ

丸の部分と顔の部分とで分けてつくります。
まず、stroke-dasharrayは線が全て埋まるまでの数値まで指定をします。

circle{
  fill:none;
  stroke:#000;
  stroke-width:4px;
  stroke-dasharray: 287;
}

path{
  fill:#000;
  fill-opacity:1;
  stroke:#000;
  stroke-width:1px;
  stroke-dasharray: 66;
}

アニメーションはanimationで指定します( ˇωˇ)☝
丸の部分はstroke-dashoffsetのみで顔の部分はfill-opacityも一緒に指定してます( ˇωˇ)☝

circle{
  animation: circle ease 3s;
}
path{
   animation: path ease 3s;
}

@keyframes circle {
  to {
    stroke-dashoffset: 0;
  }
  from {
    stroke-dashoffset: 287;
  }
}

@keyframes path {
  to {
    stroke-dashoffset: 0;
    fill-opacity:1;
  }
  from {
    stroke-dashoffset: 66;
    fill-opacity:0;
  }
}

まとめ

プロパティを理解することによって、動きに関する理解も深まったかと思います( ˇωˇ )
ではでは₍₍ (ง ˘ω˘ )ว ⁾⁾

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る

この記事のシェア数

はやち
はやち フロントエンドエンジニア / 林 佳代子

フロントエンドエンジニアのはやちです( ˘ω˘)☝ 以前までは顔隠しておりましたが思い切ることにしました…。 相変わらず顔文字乱舞ですがブログもコーディングも楽しくやっていこうと思います✌(´ʘ‿ʘ`)✌ 今までに作ったDemoたちはGithubにて公開しております!よろしければ是非( ˘ω˘)☞三☞シュッシュッ

このメンバーの記事をもっと読む