当viewbox为负值时，svg鼠标事件出现问题

Question

我使用 SVG 来绘制地理地图。但是当视图框具有负值时 - 鼠标事件不起作用。请回顾一下下面的小提琴：

<svg 
	id="svg" class="mapNavSVG"
	width="100%" 
	viewBox="27.7333333 -43.2233334 0.2183334 0.0566667"
	preserveAspectRatio="xMidYMid meet" 
	xmlns="http://www.w3.org/2000/svg" 
	xlink="http://www.w3.org/1999/xlink" 
	ev="http://www.w3.org/2001/xml-events" 	
	shape-rendering="geometricPrecision"
	>
  <rect x="27.7333333" y="-43.2233334" width="0.2183334" height="0.0566667" style="fill:#0059b3;" />
  <rect onClick="alert('Test!');" x="27.9408" y="-43.1944975" width="0.006" height="0.006" style="fill:yellow;" />
  </svg>

值是真实的 GPS 坐标。正如您所看到的 - 当单击黄色矩形时 - 什么也没有发生。

先感谢您。

更新：2018 年 1 月 8 日，经过一些评论和其他研究后，我发现该问题的原因是实数（非整数）很小。在 Chrome 中，问题已得到解决，但在 Firefox 中，问题在版本 64 中仍然存在，即使bugzilla 中有问题日志。对我来说缩放地图中的所有 SVG 元素太困难了，因为我是从 GIS 软件获取它们的。感谢大家的帮助。

Answer 1

这些是与浏览器相关的计算错误。在下面的代码片段中，我设置了 px 宽度和高度以<svg>获得可比较的结果。.getBoundingClientRect()当从 中返回和从 中计算时，报告的黄色矩形宽度应匹配.getBBox()，并乘以 中的比例值.getScreenCTM()：

var rect = document.querySelector('rect:last-child');
var size = rect.getBBox().width;
console.log('local width:', size);
var scale = rect.getScreenCTM().a;
console.log('screen scale:', scale, 'screen width:', size*scale);
console.log('bounding rect width', rect.getBoundingClientRect().width);

<svg 
	id="svg" class="mapNavSVG"
	width="500px" height="100px"
	viewBox="27.7333333 -43.2233334 0.2183334 0.0566667"
	preserveAspectRatio="xMidYMid meet" 
	xmlns="http://www.w3.org/2000/svg" 
	xlink="http://www.w3.org/1999/xlink" 
	ev="http://www.w3.org/2001/xml-events" 	
	shape-rendering="geometricPrecision"
	>
  <rect x="27.7333333" y="-43.2233334" width="0.2183334" height="0.0566667" style="fill:#0059b3;" />
  <rect x="27.9408" y="-43.1944975" width="0.006" height="0.006" style="fill:yellow;" />
  </svg>

在 Chromium 71/Debian 中，结果（或多或少）匹配：10.588px 到 10.589px。

在 Firefox 60esr/Debian 和 Firefox 64/Windows 中，它们没有：边界矩形为 10.589px 到 29.416px（也在开发工具中报告）。

Edge 和 IE11 计算 10.655px，但边界矩形的值为（原文如此！）1775.275px。至少鼠标事件捕获似乎正确地获取了该区域。

你能从中学到什么？非常小的数字会导致某些浏览器出现大错误。根据网站上的其他问题和之前的经验，我认为最好不要调整值低于 1px 的元素大小。如果将每个数字缩放为 1000，错误就会消失：

<svg 
	id="svg" class="mapNavSVG"
	width="100%" 
	viewBox="27733.3333 -43223.3334 218.3334 56.6667"
	preserveAspectRatio="xMidYMid meet" 
	xmlns="http://www.w3.org/2000/svg" 
	xlink="http://www.w3.org/1999/xlink" 
	ev="http://www.w3.org/2001/xml-events" 	
	shape-rendering="geometricPrecision"
	>
  <rect x="27733.3333" y="-43223.3334" width="218.3334" height="56.6667" style="fill:#0059b3;" />
  <rect onClick="alert('Test!');" x="27940.8" y="-43194.4975" width="6" height="6" style="fill:yellow;" />
  </svg>