如何在反应中动态修改现有的 SVG？

编程问答 2022-05-24

问题描述

我目前正在使用 state-machine-cat 为 reactJS 应用程序生成动态状态机图作为 SVG 图像。该库将 SVG 生成为字符串，因此我可以使用 <div dangerouslySetInnerHTML={{__html: svg}} /> 将它们集成到 React 应用程序中。

我正在尝试对这些图像进行一些“后处理”，以便添加一些额外的 SVG 元素并将 onClick 事件处理程序附加到 SVG 中的特定节点。

如果这是纯 HTML，我会执行以下操作：

div.querySelectorAll("g.node").forEach((node) => 
{       
    const icon = document.createElementNS("http://www.w3.org/2000/svg","image"); 
    icon.setAttribute("x",calcX(node));
    icon.setAttribute("y",calcY(node));
    icon.setAttribute("height","16");
    icon.setAttribute("width","16");
    icon.setAttribute("src","/badge.png");
    icon.addEventListener('click',clickHandler(node));
    node.appendChild(icon);
});

然而，ReactElements 在虚拟 DOM 中，因此它们不支持 querySelectorAll 等。我能找到的关于在 React 中操作 SVG 的所有示例都涉及在 React 中创建它，而这是在外部创建的我需要事后操纵它。

实现这一目标的最佳方法是什么？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascriptreactjsreactjsstate-machinesvg