Skip to content

Instantly share code, notes, and snippets.

@jdowner
Last active August 29, 2015 14:05
Show Gist options
  • Save jdowner/0b7a832b06d1999967ec to your computer and use it in GitHub Desktop.
Save jdowner/0b7a832b06d1999967ec to your computer and use it in GitHub Desktop.
Example of SVG event passthrough
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>svg-event-overlay</title>
<style>
.first {
fill: red;
}
.second {
fill: green;
}
.third {
fill: blue;
pointer-events: none;
}
.forth {
stroke: black;
fill: none;
pointer-events: all;
}
.box:hover {
stroke: black;
stroke-width: 5;
}
</style>
</head>
<body>
<svg id="canvas" width="300" height="300">
<g transform="translate(20, 20)">
<path class="first box" d="M 0 0 L 100 0 L 100 100 L 0 100 z" />
<path class="second box" d="M 50 50 l 100 0 l 0 100 l -100 0 z" />
<path class="third box" d="M 100 100 l 100 0 l 0 100 l -100 0 z" />
<path class="forth box" d="M 150 150 l 100 0 l 0 100 l -100 0 z" />
</g>
</svg>
<p>
This example shows how pointer events can be specified to fall through or
be caught by underlying elements. The transparent box with the black
stroke has its 'pointer-events' property set to 'all' so catches all
events. The blue box has its 'pointer-events' property set to 'none' so
that the events are applied to the green box beneath it. However, the
green box handles its pointer events normally so that it events in the
area where it overlaps with the red box do not affect the red box because
they are captured by the green
box.
</p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment