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

【问题标题】：svg positionning on window resize after changing scale / zoom with react改变比例/缩放后调整窗口大小的svg定位反应
【发布时间】：2019-02-08 20:57:01
【问题描述】：

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

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

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

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

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

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

【问题讨论】：

【解决方案1】：

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

【讨论】：

这正是我要寻找的。很干净的答案！谢谢！！
现在，如果您在问题和答案中都在这里展示了您的代码，那么其他人可以看到您在说什么。请比较 How to ask good questions 对帮助他人重现问题的看法。
我明白，但代码很大，我在我的回答中放了一个链接到代码框，codesandbox.io/s/pj07npzjwx。