web-dev-qa-db-ja.com

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>

SVGドキュメントの上部にある次のCSSを使用して、ホバーで変更するfillプロパティを取得できます。

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

しかし、CSSトランジションでfill色をフェードインさせることはできません。色がただちに変化するだけです。誰もこれに光を当てることができますか？

csssvghovercss-transitions
49
David Alsbright

遷移/フェードするために、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がフェードを行うためには、（SVG fill=属性を使用するのではなく）CSS /インラインスタイルで開始値と終了値を処理する必要があります。

100
Robbie Wxyz

HTMLドキュメント内からCSSを介してSVGをスタイルするには、SVGをページのHTML内に埋め込む必要があります。つまり、HTMLの<object>または<img>を介して埋め込むと機能しません。またはCSSのbackground-imageなどを介して。

HTMLに埋め込むと、CSSセレクターを使用してHTML要素のスタイルを設定するように、すべての要素のスタイルを設定して、スタイルを設定する要素に合わせて適切なスタイルを適用できます。 fillに加えて、CSSプロパティでもある他のSVG属性がたくさんあります。それらのリストは SVG仕様 または [〜＃〜] mdn [〜＃〜] にあります。

移行を機能させるには、開始値と終了値の両方をCSSで定義する必要があります。そのため、fill属性（fill="#FAFAFA"）で塗りつぶしの色を定義する代わりに、次のようにstyle属性で定義する必要があります。

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

または、SVG内の<style>要素にパックされたCSSルールを介して：

<style type="text/css">
  #south-america > path {
    fill: #FAFAFA;
  }
</style>

どちらの場合でも、言及したCSSルールを介して値を移行できます。

HTMLにSVGを埋め込むことには、HTMLに使用するスタイルシート内からスタイルを設定できるという利点があるため、ページのHTMLと埋め込みSVGの間で共有されるスタイルを定義できます。

2
Sebastian Zartner