在React中使用d3从静态资源渲染svg

Question

我想从我的资产中为平面图加载静态SVG，将其渲染到DOM，然后使用d3修改它以突出显示房间，创建工具提示等。我不知道如何做到这一点在React中。你可以从这里获取svg https://github.com/hamzanasir/RTCfacilities/blob/master/public/svg/SB-01.svg。

Answer 1

我认为您的SVG文件是从类似AutoCAD的应用程序* .dwg文件转换而来的。

如果你想突出显示一些元素（例如：path），你需要为它们提供一个独特的标记（比如 id 或 class 属性），以便 CSS 选择器或 d3 可以选择它们。不幸的是，转换器工具可能不知道。所以你需要手动给它们标记。