jdowner/example.html

## example.html
<!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>
	<!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>