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; } |