我正在处理一个带有覆盖（覆盖数组？）的 OpenSeaDragon 图像，该图像具有大约 500 个可点击的 svg 矩形元素，使用 Overlay.onclick() 函数实现
可点击区域的边界矩形各不相同，但总是比可见矩形大得多，并且通常也覆盖相邻的矩形。我试过弄乱边距、边框和填充无济于事。此图像显示了一个示例，显示了差异。实际显示的矩形与可见文本框的尺寸相同，而可点击区域是整个突出显示的矩形。
似乎没有太多可预测性 - 可点击区域以明显随机的方式变化，但总是大于正确的大小，在两个方向上最多大约两倍。如图所示，它并不总是居中 - 我不确定它是否总是居中。放大和缩小图像时，比例保持不变。
我是 JS 的新手，这涉及到很多组件，包括 D3 和 OSD 套件，我不知道从哪里开始。任何建议，将不胜感激！
作为参考，这里是从数组生成框的代码。这是改编自一个矩形示例，我不知道这是否是一个好方法。（我希望盒子的内部完全透明，除非将鼠标悬停在它上面，但这是另一个问题......）
var overlay = this.viewer.svgOverlay();
len = nodes.length;
var d3Rect = [];
var url = [];
for (var i = 0; i < len; i++) {
var mynode = nodes[i];
d3Rect[i] = d3.select(overlay.node()).append("rect")
.style('fill', '#ffffff')
.style('fill-opacity', '0.05')
.style('stroke', '#000066')
.style('stroke-width', '0.0005')
.style('stroke-opacity', '0.5')
.attr("x", mynode.x1)
.attr("width", mynode.width)
.attr("y", mynode.y1)
.attr("height", mynode.height)
.attr("title", mynode.title)
.attr("href", mynode.link);
overlay.onClick(d3Rect[i].node(), function() {
window.open(this.element.getAttribute("href"), '_blank');
});
}