The pointer-events property determines when an element can be a pointer event target (mouse, touch). For SVG, you can target only the painted area (visiblePainted), the bounding box, specific fill or stroke, or disable completely (none)..overlay {
pointer-events: none;
}svg path.hit-only-fill {
pointer-events: visibleFill;
}autoDefault behavior — same as visiblePainted in SVG, receives events in HTML (default).noneElement isn't a pointer-event target — events pass through to elements below.allElement is always a target — even with visibility:hidden or no fill/stroke.visibleTarget only when visibility=visible (regardless of fill/stroke).visiblePaintedTarget only when visibility=visible AND fill/stroke aren't none.visibleFillTarget only when visibility=visible and pointer is over the fill.visibleStrokeTarget only when visibility=visible and pointer is over the stroke.paintedTarget only when fill/stroke aren't none (regardless of visibility).fillTarget only when pointer is over the fill (regardless of visibility or fill value).strokeTarget only when pointer is over the stroke.bounding-boxTarget when pointer is over the bounding box of the element.SVG 2Editor's DraftW3CMDNclick on elementsShow all codeEdit CSS onlineThe plugin that remembers hundreds of CSS items for youEvery CSS property — in a live demonstrationThe bilingual CSS referencedefinitionexamplessyntaxmodulespecificationsourcesvisual demonstrationpreviousnext
