连接 svg 上的 div 和点的线

Question

我有 SVG 地图和一些信息卡。我正在尝试实现连接卡片和地图上的点的线。小例子：

https://codesandbox.io/p/sandbox/map-k5fgmr?file=%2Fsrc%2FMap.jsx%3A61%2C18

计算线坐标的最佳方法是什么，这样它就不会在缩放时中断？

这是我用来画线的代码。

<line
   x1={item.cardCoordinate.left + item.cardCoordinate.width / 2}
   y1={-item.cardCoordinate.height}
   x2={item.regionCoordinate.x + item.regionCoordinate.width / 2}
   y2={item.regionCoordinate.y + item.regionCoordinate.height / 2}
   stroke="red"
   strokeWidth="1px"
   opacity="1"
/>

Answer 1

要在不破坏缩放的情况下绘制将信息卡连接到 SVG 地图上的点的线，您应该使用矢量计算并确保 SVG 元素均匀缩放。

以下是实现此目标的一些步骤和建议：

1. 使用 SVG 坐标 确保在绘制线条时使用正确的 SVG 坐标。 SVG 使用原点 (0,0) 位于左上角的坐标系。

2. 缩放 缩放 SVG 或其中的任何元素时，请确保均匀缩放它们。这可确保您用于绘制线条的坐标相对于 SVG 视口保持一致。

3. 计算线端点 要动态计算线端点，请考虑以下事项：

对于卡端点：

x1 将是卡片的水平中心。 y1 通常是卡的顶部（或底部，具体取决于您的设计）。 对于地图点端点：

x2 将是区域的中心或水平点。 y2 将是该区域的中心或垂直点。 4. 处理缩放和变换 如果您要对 SVG 或任何父 SVG 元素应用任何变换（例如缩放或平移），则在计算线条端点时需要考虑这些变换。