如何使用 svg.js 将 svg 插入到 HTML 中？答案

【问题标题】：How to insert svg into HTML using svg.js?如何使用 svg.js 将 svg 插入到 HTML 中？
【发布时间】：2022-11-17 21:15:41
【问题描述】：

我是前端新手，这可能是一个愚蠢的问题，但我无法弄清楚。我想根据从服务器收集的数据创建一个图形。服务器将发送一些坐标，reactjs 应该根据这些坐标制作图形。为了帮助我，我正在考虑使用 svg.js，但我无法弄清楚如何使基本示例工作。这是我在我的反应功能中所拥有的：

var draw = SVG().addTo('#test').size('100%', '100%')
var rect = draw.rect(100, 100).attr({ fill: '#f06' })

然后我尝试将它添加到 reactjs 的 HTML 部分/返回，如下所示：

<div id="test"></div>

但我收到一个错误：“未捕获的类型错误：makeInstance(...) 为空”。很抱歉问了这样一个新手问题，但我不确定它是如何工作的：/ 如何将“绘制”svg 添加到 HTML？

谢谢您的帮助！

【问题讨论】：

【解决方案1】：

请分享更多您的代码。

目前在我看来，您的代码不起作用，因为在您尝试将某些内容放入其中时，该 div 尚未呈现。

如果您使用的是功能组件，请尝试将您的代码放入 componentDidMount 或 useEffect 中，并带有空的依赖项数组

【讨论】：