Get correct X Y value from event on svg with viewBox attribute

Question

Here is a codepen example https://codepen.io/yury-leonov/pen/gjQPNN

Code from example:

$("polygon").on("mousemove", function(e) {
  console.log("=============");
  console.log("clientX, clientY = ", e.clientX, e.clientY);
  console.log("offsetX, offsetY = ", e.offsetX, e.offsetY);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width: 700px;height: 700px;margin-left: 100px">
  <svg viewBox="-100 0 2000 2000" preserveAspectRatio="xMinYMin meet">
    <polygon points="100,0 200,43 200,180 100,216 0,180 0,43"></polygon>
    <polygon points="300,0 400,43 400,180 300,216 200,180 200,43"></polygon>
    <polygon points="500,0 600,43 600,180 500,216 400,180 400,43"></polygon>
    <polygon points="700,0 800,43 800,180 700,216 600,180 600,43"></polygon>
    <polygon points="900,0 1000,43 1000,180 900,216 800,180 800,43"></polygon>
    <polygon points="1100,0 1200,43 1200,180 1100,216 1000,180 1000,43"></polygon>
    <polygon points="1300,0 1400,43 1400,180 1300,216 1200,180 1200,43"></polygon>
    <polygon points="1500,0 1600,43 1600,180 1500,216 1400,180 1400,43" ></polygon>
    <polygon points="1700,0 1800,43 1800,180 1700,216 1600,180 1600,43"></polygon>
  </svg>
</div>

Issue:

When mouse is moved on last right polygon log shows following:

"============="
"clientX, clientY = " 773 47
"offsetX, offsetY = " 665 39

Expected:

X value between 1600-1800
Y value between 0-216

Question:

How to "normalize" or get required values X Y from mouse event?

PS: main idea is normalize X Y value in case of using attribute viewBox="0 0 some_big_value some_big_value"

Answer:

Based on This question I edited my code.Link and code below https://codepen.io/yury-leonov/pen/qyQwKP

$("polygon").on("mousemove", function(e){
  console.log("=============");
  console.log("clientX, clientY = ", e.clientX,  e.clientY);
  console.log("offsetX, offsetY = ", e.offsetX,  e.offsetY);
  var svg = $("svg")[0];
  var point = svg.createSVGPoint();
  point.x = e.clientX;
  point.y = e.clientY;
  var target = e.target;
  var ctm = target.getScreenCTM();
  var normalize_pointer = point.matrixTransform(ctm.inverse());
  console.log("normalizeX, normalizeY = ", normalize_pointer.x,  normalize_pointer.y);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width: 700px;height: 700px;margin-left: 100px">
  <svg viewBox="-100 0 2000 2000" preserveAspectRatio="xMinYMin meet">
    <polygon points="100,0 200,43 200,180 100,216 0,180 0,43"></polygon>
    <polygon points="300,0 400,43 400,180 300,216 200,180 200,43"></polygon>
    <polygon points="500,0 600,43 600,180 500,216 400,180 400,43"></polygon>
    <polygon points="700,0 800,43 800,180 700,216 600,180 600,43"></polygon>
    <polygon points="900,0 1000,43 1000,180 900,216 800,180 800,43"></polygon>
    <polygon points="1100,0 1200,43 1200,180 1100,216 1000,180 1000,43"></polygon>
    <polygon points="1300,0 1400,43 1400,180 1300,216 1200,180 1200,43"></polygon>
    <polygon points="1500,0 1600,43 1600,180 1500,216 1400,180 1400,43" ></polygon>
    <polygon points="1700,0 1800,43 1800,180 1700,216 1600,180 1600,43"></polygon>
  </svg>
</div>

Answer 1

In this case use an svg editor to scale the polygons to the desired size and make the viewBox fit on the polygons. Like this:

This gives the following clean svg code and the measuring js works correctly:

<svg width="700px" height="84px" viewBox="0 0 700 84">
    <polygon points="38.889,0 77.779,16.723 77.779,70 38.889,84 0,70 0,16.723 " />
    <polygon points="116.666,0 155.557,16.723 155.557,70 116.666,84 77.779,70 77.779,16.723 " />
    <polygon points="194.446,0 233.333,16.723 233.333,70 194.446,84 155.557,70 155.557,16.723 " />
    <polygon points="272.223,0 311.112,16.723 311.112,70 272.223,84 233.333,70 233.333,16.723 " />
    <polygon points="350,0 388.89,16.723 388.89,70 350,84 311.112,70 311.112,16.723 " />
    <polygon points="427.779,0 466.667,16.723 466.667,70 427.779,84 388.89,70 388.89,16.723 " />
    <polygon points="505.555,0 544.446,16.723 544.446,70 505.555,84 466.667,70 466.667,16.723 " />
    <polygon points="583.333,0 622.222,16.723 622.222,70 583.333,84 544.446,70 544.446,16.723 " />
    <polygon points="661.112,0 700,16.723 700,70 661.112,84 622.222,70 622.222,16.723 " />
</svg>