如何使用 D3.JS 附加本地 SVG 图像答案

【问题标题】：How to append a local SVG image with D3.JS如何使用 D3.JS 附加本地 SVG 图像
【发布时间】：2021-06-27 16:41:28
【问题描述】：

我正在使用 d3.js，我正在尝试在我的 SVG 上附加图像（svg 或 png），但问题是，我使用 xlink:href 并且无法使用本地文件。我需要使用本地文件，因为我的应用程序只是本地的。

代码如下：

groupRectParent
        .append('svg:image')
            .attr('class', 'iconUserTotal')
            .attr('width', 10)
            .attr('height', 10)
            .attr('x', 5)
            .attr('y', -15)
            .attr('xlink:href', '/src/img/user.png')

有没有办法解决这个问题？

这就是我的代码发生的事情

感谢您的帮助。

【问题讨论】：

运行本地网络服务器并通过它提供页面。
我实际上正在运行一个本地网络服务器，但我不明白“通过它提供页面”是什么意思。我的应用程序是一个 React JS 服务器。
他是说，您可以使用普通 url 通过服务器提供静态文件，在这种情况下是图像。您可以做的另一件事是，将 svg 作为 base64 编码字符串打包到您的代码中，然后从该字符串中提供 svg。

标签： javascript svg d3.js append href

【解决方案1】：

感谢 wasserholz 的回答，对 SVG 进行编码并使用字符串效果很好。我刚刚将 xlink:href 更改为 href 并编码了我的 SVG。

groupRectParent
        .append('svg:image')
            .attr('class', 'iconUserTotal')
            .attr('width', 10)
            .attr('height', 10)
            .attr('x', 5)
            .attr('y', -15)
            .attr('href', 'data:image/svg+xml;base64,' + encodedSVGString)

【讨论】：