Warum funktionieren :hover-Stile nicht für SVG-Elemente und wie kann ich das umgehen?

Adressierung von SVG-Elementen, die mit Use and :hover Style eingebettet sind

Verstehen des Problems

Beim Versuch, :hover-Stile auf SVG-Elemente anzuwenden, die mit eingebettet wurden Tag kann es zu Schwierigkeiten kommen. Dies ergibt sich aus der Tatsache, dass Elemente, auf die durch sind nicht Teil der formalen Dokumentstruktur, was es schwierig macht, sie direkt mit CSS-Selektoren anzusprechen.

Warum :Hover-Stile nicht funktionieren

Gemäß der SVG-Elementspezifikation verwenden CSS-Selektoren kann nicht auf den konzeptionellen DOM-Baum angewendet werden, in dem sich die referenzierten Elemente befinden. Das bedeutet, dass :hover-Pseudoklassen bei diesen Elementen nicht funktionieren, sodass Sie keine interaktiven Stile anwenden können.

Die Firefox-Ausnahme

Während die meisten Browser keine Unterstützung für die Adressierung „virtueller“ Elemente haben, die über < Bei der Verwendung> stellt Firefox eine Ausnahme dar. Es ermöglicht die Änderung von Füll- oder Strichfarben, indem deren Werte im referenzierten Element auf „currentColor“ gesetzt und die Farbeigenschaft des -Elements geändert wird. Element beim Hover.

Ein alternativer Ansatz

Eine alternative Methode zum Erzielen von Hover-Effekten auf eingebetteten SVG-Elementen beinhaltet die Verwendung von „currentColor“. Indem Sie das Füll- oder Konturattribut des referenzierten Elements auf „currentColor“ setzen und die Farbe des -Elements ändern. Element beim Hover können Browser die geerbte aktuelle Farbe aktualisieren. Diese Technik bietet eine Problemumgehung, auch wenn sie nicht das gesamte Spektrum an Styling-Funktionen bietet, die :hover-Pseudoklassen bieten.

Beispiel

Betrachten Sie den folgenden SVG-Code:

<svg>
  <style>
    #p0 { fill: currentColor; }
    #use1:hover { color: green; }
    #use2:hover { color: red; }
    #use3:hover { color: blue; }
  </style>

  <defs>
    <polygon>

Wenn Sie mit der Maus über jedes der Elemente ändern ihre jeweiligen Formen die Farbe in Grün, Rot oder Blau, basierend auf der in ihren :hover-Regeln angegebenen Farbe.

Das obige ist der detaillierte Inhalt vonWarum funktionieren :hover-Stile nicht für SVG-Elemente und wie kann ich das umgehen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!