0
Ich habe eine Schaltfläche mit einem Symbol, dessen Quelle ist ein SVG von ~ 4kb. Wenn ich den Mauszeiger über die Schaltfläche halte, möchte ich, dass das Symbol in Farbe wechselt und von Schwarz zu Weiß wechselt. Um diesen Effekt zu erzielen, ist es besser, CSS zu verwenden, etwa so:Ist es besser, ein Bild src durch JS zu ersetzen oder CSS-Filter zu verwenden, um es zu manipulieren?
#btn:hover #icon-img {
-webkit-filter: invert(1);
filter: invert(1);
}
... oder ist es besser (zB schneller/Best Practice/besser für Speicher), um die Bildquelle direkt zu manipulieren und eine weiße Version hinzufügen der Ikone so?
document.getElementById('btn').addEventListener('mouseover', (e) => {
document.getElementById('icon-img').src = 'white-image.svg';
}
Ich denke, ich wäre noch besser Weg, die 'fill' Farbe zu ändern, wenn Sie bereits eine SVG verwenden ... Sie müssen nur sicherstellen, dass Ihre SVGs inline sind, nicht mit'![]()
'Tags. –
mpen
Danke! Ich habe viele SVGs, daher denke ich, dass das Einfügen aller SVGs ein wenig zu wartungsintensiv ist ... aber es ist eine gute Idee! –
Es ist nicht zu schlimm, wenn Sie eine Template-Engine oder ein Skript verwenden, um es für Sie zu tun. Geben Sie einfach einen Dateinamen und es wird die ganze Arbeit machen. – mpen