0

I am working on a D3 and Svelte project whereby I have a chart with some draggable elements appended to it which are created based on the response I get from an external API. At the moment these elements are just <circle /> elements but I would like to use a svg icon downloaded from flaticon.com and which I saved in my local folder as icon.svg.

const group = d3.select(el)
  .selectAll(.group)
  .data(data)
  .enter()
  .attr('class', 'group')
  .call(dragHandler)

group
  .append('circle')
  .attr('fill', d => d.color)
  .attr('r', 8)
  .attr('cx', 0)
  .attr('cy', 0)

The svg looks something like this:

    <?xml version="1.0" encoding="iso-8859-1"?>
    <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
    <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         viewBox="0 0 512.001 512.001" style="enable-background:new 0 0 512.001 512.001;" xml:space="preserve">
    <path style="fill:#0387D8;" d="M480.04,503.64c-84.8,28.521-252.301-20.174-433.372-81.833c-16.402-5.6-19.965-27.205-6.206-37.746z"/>
    <path style="fill:#0077B2;" d="M285.492,375.693l-27.518,17.844l-62.286,4.785l-37.767-4.785c0,0-20.539-49.238-58.964-89.721"/>
    <path style="fill:#F9DCA2;" d="M465.376,161.755c-1.598,7.532-6.143,13.644-12.181,17.426c-5.892,3.677-13.195,5.119-20.508,3.437"/>
    <g>
    <path style="fill:#0077B2;" d="..."/>
    <path style="fill:#F9DCA2;" d="...."/>
    </g>
    .... and so on ...
    </svg>

For every draggable icon created, I would also like to be able to pass down a different color prop/modify the fill attribute of one of the paths so to have a slightly different svg before appending it to the chart. Does anyone know if this is possible to do with D3?

So far I have tried 'import icon from './assets/icon.svg' in my App component using '@rollup/plugin-image', but then in D3 if i append the icon i get a DOMExeption error:

group
.append(icon)

.....

DOMException: Failed to execute 'createElementNS' on 'Document': The qualified name provided (svg contents are printed as string) containes the invalid character '/'.

Does anyone have any suggestions? thanks in advance

fs314
  • 99
  • 1
  • 7
  • without using the plugin check if you are getting `404` on the console – Shriji Kondan Elangovan May 13 '21 at 09:45
  • Hi @ShrijiKondan if I remove the plugin I get an ``` 'Error: Unexpected token (Note that you need to import files that are not Javascript)``` pointing to whatever is the first line of the .svg file. – fs314 May 13 '21 at 10:54
  • 2
    you are not supposed to be doing this either `'import icon from './assets/icon.svg'` you can use `append('img').attr('src',"/assets/icon.svg")` – Shriji Kondan Elangovan May 13 '21 at 14:10
  • might help: https://stackoverflow.com/questions/66069647/best-way-to-import-svg-icons-into-a-svelte-app/66117525?noredirect=1#comment116911172_66117525 – nologin May 18 '21 at 19:04

0 Answers0