在React Redux GUI中从DOM访问SVG节点，用于将鼠标位置转换为viewBox坐标系和从viewBox坐标系转换鼠标位置

Question

我使用React渲染一些svg并使用Redux存储我的应用程序的状态。 为了确保我的鼠标输入是相对于svg viewBox，我需要访问DOM中的svg节点来调用getScreenCTM和一堆相关函数来将鼠标位置转换为viewBox坐标系并返回到事件处理程序。

是否可以安全地进行此操作？

是否可以使用我可以传递给我的事件处理程序的相同视图框来实例化我自己的这些东西所使用的类的版本？

构建我自己的转换函数的正确方法是进行正向和反向转换，所以我不需要在DOM中找到svg节点吗？

Answer 1

使用ref来解决全局变量。 解决方案看起来大致如下：

var SVG_REF

...

 <svg xmlns="http://www.w3.org/2000/svg"
             width="1000"
             height="500"
             ...
             ref={(svg_node) => {
                 if(svg_node != null) {
                     SVG_REF = svg_node
                 }

             }}>

在此之后，当我需要进行坐标系转换时，我可以访问SVG_REF。