javascript - 使用任何浏览器跟踪 SVG 图像元素上的像素点击

Question

我正在用 Node.js 编写一个照片编辑服务器。我遇到的问题是当尝试跟踪用户在图像上单击的像素时。我的实现在 Firefox 上运行良好，但当我在 Chrome 上测试它时，event.offsetX 和 event.offsetY 返回的像素在浏览器之间完全不同，这长期以来一直是一个常见问题(至少根据研究)。

如果我期望使用的图像不是那么大，这不会是一个问题。平均约为 (1000+px x 5000+px)，一些图像在 1 个方向上达到超过 20,000px。当我将其缩放到适合页面的 div 时，Firefox 使用父级的偏移量，这是正确的，但在 chrome 中，返回的 px 值要么大于图像，要么小于图像，具体取决于图像如何呈现到 div 中。

我需要一种方法来可靠地跟踪用户在考虑缩放的 SVG 图像元素上单击的像素。我尝试调整每个父元素的大小，并尝试根据 getBoundingClientRect() 计算图像位置，但该值再次出现太高或完全不正确。

https://jsfiddle.net/ruamz0oe/

HTML

<svg id="svgWrapper" class="image-image" viewBox="0 0 2880 1620" style="border:2px black solid;" width="2880" height="1620">
  <image id="crop" width="2880" height="1620" xlink:href="https://d2r55xnwy6nx47.cloudfront.net/uploads/2019/07/Planet-Formation_2880x1620_Lede.jpg"
         preserveAspectRatio="xMaxYMax meet" style=" position:relative; " clip-path="url(#image_box)"/>         
  <defs>
    <clipPath id="image_box">
      <rect x="0" y='0' width="100%" height="100%" style="fill:rgb(0,0,255);"/>
    </clipPath>
  </defs> 
</svg>

CSS

.image-image {
  display: block;
  align-content: center;
  margin-left: auto;
  margin-right: auto;
}

.image-image:hover {
  cursor: crosshair;
}

svg { position: relative; text-align: center; top: 0; left: 0; width: 100%; height: 100%;}

JS

$(document).ready(function(){
    $("image").on("click", function(event)
  { 
    // In firefox
    if(typeof InstallTrigger !== 'undefined')
    {
    alert('Image was clicked in FF');
        var x = event.offsetX;
        var y = event.offsetY;
      alert("The Pixel clicked was: " + x + ", " + y);
    }
    else
    {
        // some other browser
        var x = event.offsetX;
        var y = event.offsetY;
      alert("The Pixel clicked was: " + x + ", " + y);    
     }

  });// end click event
});

这就是我正在处理的内容，我尝试更改 svg 元素的宽度和高度，但由于我的图像太大，它以一种对用户来说非常不方便的方式呈现。在 Firefox 上运行上述代码效果非常好，但使用 Chrome 会以非常明显的方式破坏像素位置。

我没有收到错误，它只是得到了错误的位置，而且我已经用尽了所有的想法，因为我是矢量图形的新手。

Answer 1

我明白了!!!非常感谢this article它很好地描述了 SVG 点映射系统，甚至还有一个对我的方法有帮助的示例。

This is the cross browser code in jsfiddle

关键是这个函数:

  // convert client coordinates to svg element coordinates
  function svgPoint(element, x, y) {
    var pt = svg.createSVGPoint();
    pt.x = x;
    pt.y = y;
    return pt.matrixTransform(element.getScreenCTM().inverse());
  }