**已关闭。**此问题需要debugging details。目前不接受回答。
编辑问题以包括desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem。这将帮助其他人回答问题。
8天前关闭。
Improve this question的
我有SVGMap和一些信息卡。我试图实现连接卡和Map上的点的线。小例子：
https://codesandbox.io/p/sandbox/map-k5fgmr?file=%2Fsrc%2FMap.jsx%3A61%2C18的
enter image description here的
计算直线坐标的最好方法是什么，这样它就不会在缩放时断裂？
下面是我用来画线的代码。
<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"
/>字符串
1条答案
按热度按时间qlvxas9a1#
若要绘制将信息卡连接到SVGMap上的点而不因缩放而中断的线，应使用矢量计算并确保SVG元素的缩放均匀。
以下是实现这一目标的一些步骤和建议：
1.使用SVG坐标确保在绘制线条时使用正确的SVG坐标。SVG使用原点（0，0）位于左上角的坐标系。
1.缩放缩放SVG或其中的任何元素时，请确保统一缩放。这可以确保用于绘制线条的坐标相对于SVG视口保持一致。
1.计算直线端点要动态计算直线端点，请考虑以下事项：
对于卡端点：
x1将是卡片的水平中心。y1通常是卡片的顶部（或底部，取决于您的设计）。对于Map点端点：
x2是区域或点的水平中心，y2是区域或点的垂直中心。4.处理缩放和变换如果您要对SVG或任何父SVG元素应用任何变换（如缩放或平移），则在计算线端点时需要考虑这些变换。