Search code examples
javascriptsvgd3.jsappendhref

How to append a local SVG image with D3.JS

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 This is what is happening with my code

Thanks for your help.

Solution

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