Interactivity properties

The final CSS property we're going to look at is the pointer-events property. The pointer-events property indicates whether or not an SVG element can become the target of pointer events (inclusive of all inputs, including mouse, pen, or touch inputs).

The basic way to implement pointer-events is to turn them on or off. The following example shows this in action. This example will also include a little bit of JavaScript, so you can get a small head start on Chapter 6, JavaScript and SVG, where we'll dive headlong into manipulating SVG with JavaScript.

In this sample, we have two rect elements. One is set with a class of pointer-default. This class has a single property, pointer-events set to visiblePaintedvisiblePainted ...

Get Mastering SVG now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.