css – Fragen zur Verwendung von SVG

Question

Der Designer hat mich gebeten, das von ihm bereitgestellte PNG-Bild zu verwenden, wenn es nicht mit SVG kompatibel ist. Wenn es mit SVG kompatibel ist, verwende ich SVG. Zu diesem Kompatibilitätsproblem habe ich Zhang Xinxus Blog wie folgt geschrieben.

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

Ich habe jedoch festgestellt, dass es keine Wirkung hat, wenn ich so schreibe, die Maus auf die SVG-Datei bewege und die Füllfarbe dafür einstelle. Ich verwende jetzt SVG-Tags, um wie unten gezeigt zu schreiben

Es ist möglich, die Farbe beim Schreiben auf diese Weise zu ändern, aber wie kann man sie beim Schreiben auf diese Weise kompatibel machen? . Wie soll ich damit umgehen, damit, egal ob es mit SVG kompatibel oder inkompatibel mit SVG ist und Bilder verwendet, die Farbe nach dem Übergeben der Maus geändert werden kann? Danke Freunde

Answer 1

通常不兼容的情况都发生在 IE 里，如果是解决 IE 的兼容性问题，其实可以使用 <!--[if lt IE]> 这样的东东。然后使用 css 把 svg 或者图片 display:none 掉。
更具体的做法是：使用 <!--[if lt IE x]> 给 html tag 加一些 class。至于 svg 的兼容性，得去查一下 Can I Use。

Answer 2

使用xlink:href时，引用的外部svg文件或者symbol里，把需要从父级继承的属性(fill等) 改成 inherit 就行。