0

特定の地域がグループ化された米国の地図があります。各領域にカーソルを合わせると、ドロップ シャドウが適用されます。Firefoxで素晴らしい作品！しかし、Safari では svg オブジェクトのグループがホバー時に消え、Chrome では何も起こりません。これはホバー効果であるため、他の場所で参照されている定義を入れることはできません。これに対する合理的な解決策はありますか？

これは私が使用しようとしているCSSです:

filter: drop-shadow( 5px 5px 3px rgba(0,0,0,0.5) );
-webkit-filter: drop-shadow( 5px 5px 3px rgba(0,0,0,0.5) );
z-index: 1;

インライン SVG 画像内の図形のグループに適用しています。

<g id="auc">
    <polygon id="x">
    <polygon id="xx">
    <path id="xxx">
</g>

上記の定義は、こちらの例で見ることができます。

4

1 に答える 1

0

いくつかの実験の後、Chrome では、CSS フィルターは SVG 要素自体には適用されますが、まだ SVG 子要素には適用されないようです。SVG フィルターといくつかの JavaScript イベント コードを使用して、昔ながらの方法でそれを行う必要があります。

于 2016-05-18T05:06:02.480 に答える