Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
4
Help us understand the problem. What is going on with this article?
@takeshisakuma

CSSによるSVGアニメーション

More than 1 year has passed since last update.

今回はSVG独自のプロパティのみを扱うので、CSSアニメーション自体は下記の記事を参照してください。
CSSによるアニメーション(CSS Transition、CSS Animation)

CSS以外の方法でのSVGアニメーションはこちらをご参照ください。
SVGのアニメーション方法の比較

読み込み方

SVGの読み込み方によってCSSが効くかどうかが決まります。

読み込み方 反映
objectタグで読み込んだ場合 CSSでスタイルを書いても反映されない
インラインSVG CSSで書いたスタイルは反映される

準備

SVGをHTML内に配置し、classを指定します。
全てのパーツを別々に動かしたい場合は別のクラス名をつけます。
一緒に動かすパーツは同一のクラス名でよいです。

プロパティ 内容
stroke 線の色を指定する
stroke-width 線の太さを指定(pxは不要、小数点も使用可能)
stroke-dasharray 線の間隔を指定
stroke-dashoffset 線の位置を指定する(書き順アニメーション)線の開始位置をずらす
stroke-opacity 線の透明度
svg
<svg width="200" height="100" viewBox="0, 0, 200, 100" xmlns="http://www.w3.org/2000/svg">

  <path d="M10,10 l0,0 180,0" stroke="#333333" fill="none" stroke-width="10" class="anime1"></path>

  <path d="M10,30 l0,0 180,0" stroke="#333333" fill="none" stroke-width="10" class="anime2"></path>

  <path d="M10,50 l0,0 180,0" stroke="#333333" fill="none" stroke-width="10" class="anime3"></path>

  <path d="M10,70 l0,0 180,0" stroke="#333333" fill="none" stroke-width="10" class="anime4" stroke-dasharray="2 4"></path>

  <path d="M10,90 l0,0 180,0" stroke="#333333" fill="none" stroke-width="10" class="anime5"></path>
</svg>
css
.anime1{
  animation: strokeAnimation1 ease-in-out 3s;
}

@keyframes strokeAnimation1{
  from{
    stroke:#333333;
  }
    to{
      stroke:#e74c3c;
    }
}

.anime2{
  animation: strokeAnimation2 ease-in-out 3s;
}

@keyframes strokeAnimation2{
  from{
    stroke-width:10; 
  }
    to{
      stroke-width:1;
    }
}

.anime3{
  animation: strokeAnimation3 ease-in-out 3s;
}

@keyframes strokeAnimation3{
  from{
    stroke-dasharray:2 4;
  }
  to{
    stroke-dasharray:2 2;
  }
}

.anime4{
  animation: strokeAnimation4 ease-in-out 3s;
}

@keyframes strokeAnimation4{
  from{
    stroke-dashoffset:1;
  }
  to{
    stroke-dashoffset:100;
  }
}

.anime5{
  animation: strokeAnimation5 ease-in-out 3s;
}

@keyframes strokeAnimation5{
  from{
    stroke-opacity:1; 
  }
  to{
    stroke-opacity:0;
  }
}

※hoverをきっかけにするときはanimationではなくtransitionを使うこともできます。

塗り

プロパティ 内容
fill 塗りつぶし(transparentも可)
fill-opacity 透明度(0〜1)

fill:none;

塗りつぶし色を透明にできますが、イベントも無効になります。
SVGをツールで書きだした時には、意図しないnoneが付いていないか確認が必要です。

none回避方法

pointer-eventsを設定します。
noneではなくrgbaのalpha0で色を透明にします。

svg
<svg width="130" height="230" viewBox="0, 0, 130, 230" xmlns="http://www.w3.org/2000/svg">

  <rect x="10" y="10" width="100" height="100" fill="#333333" class="anime1"/>

  <rect x="10" y="120" width="100" height="100" fill="#333333" class="anime2"/>

</svg>
css
.anime1{
  animation: fillAnimation1 ease-in-out 3s;
}

@keyframes fillAnimation1{
  from{
    fill:#333333;
  }
    to{
      fill:#e74c3c;
    }
}

.anime2{
   animation: fillAnimation2 ease-in-out 3s;
}

@keyframes fillAnimation2{
  from{
    fill-opacity:1; 
  }
  to{
    fill-opacity:0; 
  }
}
4
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
takeshisakuma
就業先絶賛募集中

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
4
Help us understand the problem. What is going on with this article?