如何使用 D3.JS 对本地 SVG 映像进行 append

Question

I'm working with d3.js and I'm trying to append an image (svg or png) on my SVG, but the problem is, that I use xlink:href and I can't use local files. I need to use local files because my application will be only local.

Here's the code:

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

Is there a way to solve this problem?

This is what is happening with my code

Thanks for your help.

Answer 1

Thanks to wasserholz for the answer, encode the SVG and use the string worked well. I just changed xlink:href to href and encoded my 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)