Part 2 of 2 for testing the 'pointer-events' property.

Each small picture tests a particular combination of property settings for 'pointer-events', 'fill', 'stroke' and 'visibility'. Each small picture consists of a green rectangle with an ellipse on top, and a diamond on the right which indicates what events are fired. When a mouseover happens on the inside or perimeter of the ellipse or rectangle, the diamond might turn red or blue as a result of the mouseover or mouseout, depending on various property settings. When a mouseover if over the rectangle and not blocked by the ellipse, then the diamond turns blue. For example, if 'pointer-events' is 'none' on the elllipse, then the mouseover should never be blocked by the ellipse, even when the mouseover occurs over the ellipse. It may be easier, given the small size of the active areas, to zoom in on the SVG image.

In the first column, the ellipse is filled with yellow and stroked with black. In the second column, the ellipse is filled with yellow with no stroke. In the third column, the ellipse is not filled, but is stroked with black. In the fourth column, the ellipse is neither filled nor stroked, and its 'visibility' property is set to 'visible'. In the fifth column, the ellipse is both filled and stroked, and its 'visibility' property is set to 'hidden'.

The first row has 'pointer-events' set to 'painted'. The second row has 'pointer-events' set to 'fill'. The third row has 'pointer-events' set to 'stroke'. The fourth row has 'pointer-events' set to 'all'. The fifth row has 'pointer-events' set to 'none'.

The red lines of text indicate when the diamond should turn red. The string [inside or perim] indicates that the diamond should turn red if you mouseover on either the inside or the perimeter of the ellipse. The string [inside only] indicates that the diamond should turn red if you mouseover on the inside of the ellipse, but not the perimeter. (Note that the interior goes all of the way to the edge of the geometry and thus approximately half of the stroke-width overlaps the interior.) The string [perim only] indicates that the diamond should turn red if you mouseover on the perimeter of the ellipse, but not the inside. The string [never] indicates that the diamond should never turn red no matter what part of the ellipse you mouseover on.