CSS を使用して SVG パスの fill プロパティをホバー時に遷移させる

質問

SVG画像ファイルをページ上の object タグの中に入れています。

<object type="image/svg+xml" data="linkto/image.svg">
   <!-- fallback image in CSS -->
</object>

問題の画像は世界地図です。 fill プロパティにマウスを乗せると group この場合、私は SVG を大陸ごとにグループ化しているので、南米はこのように見えます。

<g id="south_america">
    <path fill="#FAFAFA" d="(edited for brevity)"/>
</g>

を取得することができます。 fill プロパティがホバー時に変化するようにするには、SVG ドキュメントの先頭で以下の CSS を使用します。

<style>
#south_america path {
    transition: fill .4s ease;
}
#south_america:hover path {
    fill:white;
}
</style>

しかし fill の色がCSSのトランジションでフェードインすることができません。

どのように解決するには？

CSSで遷移・フェードを行うには、開始値と終了値が必要です。

パスの色はSVG属性で設定するため fill="#FAFAFA" で設定するため、CSSでは処理されず、遷移がフェードアウトしません。

代わりにCSSで色を設定すると、遷移は期待通りの振る舞いをします。

というわけで、遷移を動作させるために必要なことは #europe から遷移するためのスタートフィルを与えることです。

 path { transition: fill .4s ease; }
 /* set fill for before and for during hover */
 #europe       path { fill: red; }
 #europe:hover path { fill: white; }

以下は、動作中の JSFiddle .

あるいは、インラインで行う方が便利な場合もあります ( style="" ):

<path style="fill: #FAFAFA;" d="..."/>

CSSでフェードを行うためには、CSS/インラインスタイルで開始と終了の値を処理する必要があります（SVGの fill= 属性を使用するのとは対照的です）。