Question

我使用SVG绘制地理地图。但是，当viewbox带有负值时-鼠标事件不起作用。请查看一个小提琴波纹管：

<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坐标。正如您所看到的-单击黄色矩形时-没有任何反应。

谢谢。

更新：08.01.2018 经过一些评论和其他研究，我发现该问题的原因是较小的实数（非整数）。在chrome中，问题已修复，但在Firefox中，即使存在issue log in bugzilla，版本64中仍然存在问题。对于我来说，很难缩放地图中的所有SVG元素，因为我已经从GIS软件中获取了它们。感谢所有人的帮助。

Answer 1

这些是与浏览器有关的计算错误。在以下代码段中，我为<svg>设置了px宽度和高度，以获得可比较的结果。从.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，但是边界rect的值为（sic！）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>

视图框为负数时，鼠标事件产生svg问题

1 个答案: