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

Question

我正在使用 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')

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

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

感谢您的帮助。

Answer 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)

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

How to append a local SVG image with D3.JS

javascript

svg

d3.js

append

href