使用viewBox属性从svg上的事件获取正确的X Y值

Question

这是一个Codepen示例https://codepen.io/yury-leonov/pen/gjQPNN

示例代码：

$("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>

问题：

将鼠标移到最后一个右面时，多边形日志显示如下：

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

预期：

X值介于1600-1800之间
Y值介于0-216之间

问题：

如何通过鼠标事件“标准化”或获取所需的值X Y？

PS：主要思想是在使用属性viewBox="0 0 some_big_value some_big_value"的情况下归一化X Y值

答案：

我基于This question编辑了代码。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

在这种情况下，请使用svg编辑器将多边形缩放到所需的大小，并使viewBox适合多边形。像这样：

这提供了以下干净的svg代码，并且测量js正常工作：

<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>