SVG click test

HTML

<div class="container">
  <div class="spacer"></div>
  <svg>
    <g id="polygonGroup" transform="translate(80, 50)">
      <polygon points="-60,-10 -35,-30 -10,-10 -10,30 -60,30"></polygon>
      <polygon points="10,-10 35,-30 60,-10 60,30 10,30"></polygon>
      <polygon class="origin" points="-4,0 0,4 4,0 0,-4"></polygon>
    </g>
    <g id="textGroup" transform="translate(80, 50)">
      <text x="-35" y="10">Text</text>
      <text x="35" y="10">Text</text>
    </g>
  </svg>
</div>

CSS

body{
  background: black;
}
.container {
  height: 100px;
  width: 300px
}
.spacer {
  height: 100%;
  width: 30%;
  float: left;
  background: gray;
}
svg {
  height: 100%;
  width: 70%;
  float: right;
  background: white;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currentlysupported by Chrome and Opera */
}
polygon {
  fill: blue;
}
polygon.origin {
  fill: black;
}
text {
  alignment-baseline: middle;
  text-anchor: middle;
  font-size: 20px;
  cursor: default;
}

JavaScript

function clicked(event) {
	console.log(event.offsetX, event.offsetY);
}

$('svg').click(clicked);