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

Question

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

将它们集成到 React 应用程序中

我正在尝试对这些图像进行一些“post-处理”，以便添加一些额外的 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 中创建它，虽然这是在外部创建的，但我需要事后对其进行操作。

完成此任务的最佳方法是什么？

Answer 1

我最终用 html-react-parser 替换了 <div dangerouslySetInnerHTML={{__html: svg}} /> 行，然后使用 options.replace 回调在 DOM 下进行处理。它 相当快 并且让我可以做我需要做的事。

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

How to dynamically modify an existing SVG in react?

javascript

svg

state-machine

createelement

reactjs