javascript - 改变比例/缩放后调整窗口大小的svg定位与反应

我正在尝试调整和缩放嵌入在 div 容器中的 svg。我的目标是通过 props 将 te svg 更改为 React 组件。您可以在此处查看代码沙箱。

我使用视图框和矩阵变换使 svg 圆在窗口调整大小时保持其位置。我可以在鼠标滚轮上相应地放大圆圈。对于缩放，我在窗口调整大小事件上设置了组件状态下父容器的宽度和高度。

但是当我在更改窗口调整大小之前进行缩放时，圆圈不会保持其位置。

你知道如何让我的坐标独立于缩放比例吗？

我已经尝试了很多东西，比如每次缩放时计算一个新的宽度和高度（以及视图框），但它没有用......

此外，如果您知道任何好的资源可以转发给我，以便在画布中操作 svg，这也将非常有帮助！

标签： javascripthtmlreactjssvg

嗨，我可以看到您的问题，我已经重构了您的代码并使其工作，您可以在这里查看。问题是，当你缩放 svg 时，中心点也会被缩放。你需要做的是将比例的倒数应用到中心，以将圆定位在 div 中心。看看 calculatePoisition 方法。我已经在