css - svgの使用に関する質問

Question

デザイナーは、svg と互換性がない場合は提供された png 画像を使用し、svg と互換性がある場合は svg を使用するように求めました。この互換性の問題については、Zhang Xinxu のブログに次のように書かれていました。

<svg width="96" height="96">
<image xlink:href="svg.svg" src="svg.png" width="96" height="96" />
</svg>

しかし、このように書いてマウスをSVGに移動し、塗りつぶしの色を設定しても、効果がないことがわかりました。今はsvgタグを使って以下のように書きます

こう書くと色を変えることは可能ですが、こう書くとどうやって互換性を持たせるのでしょうか？ 。 svg対応・非対応で画像を使用している場合でも、マウスを通すと色が変わるようにするにはどう対処すればよいでしょうか。友達ありがとう

Answer 1

通常、IE では互換性の問題が発生します。IE の互換性の問題を解決したい場合は、実際には <!--[if lt IE]> のようなものを使用できます。次に、CSS を使用して svg または画像 display:none を削除します。
より具体的なアプローチは、<!--[if lt IE x]> を使用して html タグにいくつかのクラスを追加することです。 SVG の互換性については、Can I Use を確認する必要があります。

Answer 2

xlink:href を使用する場合、参照される外部 svg ファイルまたはシンボル内で、親から継承する必要がある属性 (fill など) を変更するだけで継承できます。