Javascript D3-将svg图标附加到图形

我正在从事一个D3和Svelte项目，其中我有一个图表，其中附加了一些可拖动的元素，这些元素是根据我从外部API获得的响应创建的。目前，这些元素只是

元素，但我想使用从flaticon.com下载的svg图标，并将其保存在本地文件夹中作为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)

svg如下所示：

    <?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>

---

有人有什么建议吗？提前感谢

如果您在consoleHi@ShrijiKondan上获得

404

，而不使用插件检查，如果我删除插件，我会得到一个“``”错误：意外标记（请注意，您需要导入非Javascript的文件）```指向.svg文件的第一行。您也不应该这样做。

'import icon from./assets/icon.svg'

您可以使用

append（'img'）。attr（'src'，“/assets/icon.svg”）

可能会有帮助：

group
.append(icon)

.....

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