使用任何浏览器跟踪 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());
  }

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

Tracking pixel clicks on a SVG image element with any browser

javascript

jquery

svg

vector-graphics