Warum funktioniert mein :hover-CSS nicht mit SVG-Elementen, die mit „' eingebettet sind, und wie kann ich das Problem beheben?

Styling von eingebetteten SVG-Elementen über mit :hover CSS

In Ihrem bereitgestellten Code versuchen Sie, eingebettete SVG-Elemente mit :hover CSS zu formatieren, aber es funktioniert nicht für Elemente innerhalb einer Gruppe, auf die mit einem verwiesen wird. Element. Dies liegt daran, dass gemäß der SVG-Spezifikation CSS-Selektoren nicht auf geklonte DOM-Bäume angewendet werden können, die aus dem Klonen von Elementen über resultieren.

Firefox-Unterstützung und eine Problemumgehung

Firefox ist der einzige Browser, der die Adressierung virtueller Elemente unterstützt, die über eine Wurmloch. Bei anderen Browsern ist dies jedoch nicht der Fall.

Eine Problemumgehung besteht darin, currentColor zu verwenden, um unterschiedliche Farben auf Elemente mit Füll- oder Stricheigenschaften anzuwenden, wenn Die Farbeigenschaft des Elements wird beim Hover geändert. Zum Beispiel:

#p0 {fill:currentColor}
#use1:hover {color:green}
#use2:hover {color:red}
#use3:hover {color:blue}

Eine mögliche Alternative

Ein alternativer Ansatz zum Erreichen Ihres Ziels besteht darin, JavaScript zu verwenden, um die SVG-Elemente bei Mausbewegungsereignissen zu ändern. Dies würde das Hinzufügen von Ereignis-Listenern zu jedem Element und aktualisieren Sie dann die Attribute oder Stile der relevanten Elemente innerhalb jeder Gruppe.

Die richtige Lösung auswählen

Die Wahl zwischen der Firefox-kompatiblen CSS-Umgehung und dem JavaScript -basierter Ansatz hängt von der Browserunterstützung und den spezifischen Anforderungen Ihres Projekts ab. Wenn die Browserkompatibilität entscheidend ist, verwenden Sie die JavaScript-Methode. Andernfalls können Sie sich wegen der Einfachheit und einfachen Implementierung für die CSS-Lösung entscheiden.

Weitere Überlegungen

Um den gewünschten Hover-Effekt an bestimmten Teilen innerhalb des eingebetteten Objekts zu erzielen, müssen Sie Möglicherweise muss zusätzliches JavaScript verwendet werden, um die Attribute oder Stile bestimmter Elemente innerhalb jeder Gruppe beim Hover zu ändern. JavaScript bietet mehr Flexibilität für die dynamische Elementmanipulation und ermöglicht es Ihnen, einzelne Elemente innerhalb des eingebetteten Objekts gezielt anzusprechen und zu ändern.

Das obige ist der detaillierte Inhalt vonWarum funktioniert mein :hover-CSS nicht mit SVG-Elementen, die mit „' eingebettet sind, und wie kann ich das Problem beheben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!