SVG/Attribut/pointer-events

Das pointer-events-Präsentationsattribut ermöglicht es, Elemente gezielt von Interaktionen durch Maus und teilweise auch Tastatur auszuschließen.

Erlaubte Werte

bounding-box, visiblePainted, visibleFill, visibleStroke, visible, painted, fill, stroke, all, none

Standardwert

visiblePainted

anwendbar auf

Grafikobjekte, Text, use

Präsentationsattribut

ja

mit CSS animierbar

ja

Beispiel

<svg viewBox="0 0 20 10" xmlns="http://www.w3.org/2000/svg">
  <!--
  The circle will always intercept the mouse event.
  To change the color of the rect underneath you have
  to click outside the circle
  -->
  <rect x="0" y="0" height="10" width="10" fill="black" />
  <circle cx="5" cy="5" r="4" fill="white" pointer-events="visiblePainted" />

  <!--
  The circle below will never catch a mouse event.
  The rect underneath will change color whether you
  are clicking on the circle or the rect itself
  -->
  <rect x="10" y="0" height="10" width="10" fill="black" />
  <circle cx="15" cy="5" r="4" fill="white" pointer-events="none" />
</svg>

Empfehlung: Beachten Sie die Zugänglichkeit Ihrer Inhalte.

Siehe auch

• SVG/Tutorials/pointer-events

Weblinks

• W3C: pointer-events