我正在尝试调整和缩放嵌入在 div 容器中的 svg。我的目标是通过 props 改变 te svg 作为 React 组件。 可以看一下代码沙箱here .
我使用 viewbox 和矩阵变换使 svg 圆在窗口调整大小时保持其位置。我可以通过鼠标滚轮相应地放大圆圈。对于缩放，我在窗口调整大小事件的组件状态中设置父容器的宽度和高度。
但是当我在更改窗口调整大小之前进行缩放时，圆圈不会保持其位置。
你知道如何使我的坐标独立于缩放比例吗？
我尝试了很多事情，例如每次缩放比例变化(以及 View 框)时计算新的宽度和高度，但它不起作用......
此外，如果您知道任何好的资源可以转发给我，以在 Canvas 上操作 svg，这也会非常有帮助!
最佳答案
您好，我可以看到您的问题，我已经重构了您的代码并使其正常工作，您可以查看 here 。 问题是，当您缩放 svg 时，中心点也会缩放。您需要做的是将比例的倒数应用到中心，以将圆定位在 div 中心。看一下calculatePoisition 方法。 我已经在
中完成了关于javascript - 使用 react 更改缩放/缩放后，svg在窗口调整大小上定位，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52155885/