イナヅマTVログ

SVG Animation, fill(塗り)色(color)遷移をCSS3でね

| 0件のコメント

SVG fill(塗り)の色(color)遷移アニメーションをCSS3でねのメモ。

SVG作成ツールが揃いだし本格的にWebでも使われ始めてる様子。
リニューアル後のAppleサイトもSVGがあちらこちらと使われてたりしてます。

サイトに何かと組み込まれるアニメーション。
SVGでも対応できるようにしておかないと…

SVG の色指定

SVG fill 色指定あれこれ。

CSS color: currentColor;

CSSのcolorプロパティでcurrentColorを設定できる様子。
W3C: 12.2 The ‘color’ property

<p id="some-id">
  <svg>
    <circle cx="50" cy="50" r="2"/>
  </svg>
</p>
#some-id {
  color: #000;
}
#some-id svg {
  color: currentColor;
}

fill属性

fill属性で指定する。

<svg>
<circle fill="#fff" cx="50" cy="50" r="2" id="some-id"/>
</svg>

fillをCSSで指定

#some-id {
  fill: #000;
}

color: currentColor;でアニメーション

色の指定はどれでも良かったんだけど CSS transition-property を使用したアニメーションは color: currentColor; を使わないと IE でアニメーションしてくれませんでした。

<p id="some-id">
  <svg>
    <circle cx="50" cy="50" r="2"/>
  </svg>
</p>

親要素の color プロパティへ transition 設定し、子要素の SVG の color プロパティへ currentColor を設定しました。

#some-id {
  color: #000;
  -moz-transition-property: color;
  -o-transition-property: color;
  -webkit-transition-property: color;
  transition-property: color;
}
#some-id svg {
  color: currentColor;
}

コメントを残す

必須欄は * がついています