Warum funktioniert :hover nicht mit SVG-Elementen und was ist die Alternative?

SVG-USE-Element und :hover-Stil – ein Problem mit der Browserunterstützung

Beim Versuch, den :hover-Stil auf SVG-Elemente anzuwenden, die über < defs> Bei der Verwendung von kann es bei einigen Browsern zu Einschränkungen kommen.

Die Einschränkung der Browserunterstützung

Die SVG-Spezifikation besagt eindeutig, dass CSS2-Selektoren nicht auf das konzeptionell geklonte DOM angewendet werden können Baum der Elemente, auf die durch verwiesen wird. Dies bedeutet, dass :hover nicht verwendet werden kann, um bestimmte Elemente innerhalb des eingebetteten Objekts anzusprechen.

Firefox-Ausnahme

Firefox sticht als Ausnahme hervor und unterstützt die Adressierung von „virtuell“. " Elemente, die über eingebunden wurden Wurmloch. Andere Browser verfügen jedoch nicht über diese Funktion.

Ein alternativer Ansatz mit currentColor

Anstatt sich auf :hover zu verlassen, besteht ein weiter verbreiteter Ansatz darin, das Referenzierte festzulegen Füll- oder Strichwert des Elements auf currentColor setzen. Durch Ändern der Farbeigenschaft des Element beim Schweben ändert sich die Füll- oder Strichfarbe des referenzierten Elements entsprechend.

Hier ein Beispiel:

<svg version="1.1" width="640" height="480"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">

  <style type="text/css">
    #p0 {fill:currentColor}
    #use1:hover {color:green}
    #use2:hover {color:red}
    #use3:hover {color:blue}
  </style>

  <defs>
    <polygon>

Mit dieser Technik können Sie die Füll- oder Strichfarbe von eingebettetem SVG effektiv ändern Elemente, wenn das Das Element wird mit der Maus darüber bewegt und ahmt so den Effekt von :hover auf diese Elemente nach.

Das obige ist der detaillierte Inhalt vonWarum funktioniert :hover nicht mit SVG-Elementen und was ist die Alternative?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!