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

今回は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; 
  }
}