将复杂SVG图形导入D3图表的最佳方法

Question

假设我有一些相对复杂的SVG图形作为一组文件，例如，看起来像这些图标：

我想在我的D3驱动的图表中使用它们。因此，我可以使用<defs>和<use>标记并将其作为符号注入。但是我想让它们不那么坚固的整体资产，但更像是完全活跃和可编辑的图形元素。我知道我可以手动导入图标SVG代码中的所有路径，如下所示：

svg.append('path').attr('d', 'M7.5,5.809c-0.869,0-1.576-0.742-1.576-1.654c0-0.912,0.707-1.653,1.576-1.653 c0.87,0,1.577,0.742,1.577,1.653C9.077,5.067,8.369,5.809,7.5,5.809z')

但这似乎不是一个快速运行的场景，因为我需要构建一些脚本来将图标转换为像这样的代码或手动执行，但我希望有一些简单的工作流程类似于只编辑一个图标Illustrator ，保存，导入。

因此，我想完全控制每个图标内的所有形状和路径。 你怎么认为它可以用最直接的D3方式完成？

Answer 1

您可以使用d3.xml导入SVG，然后将xml直接插入到文档中。在下面的示例代码中，我在svg元素中创建了一个g，然后在其中插入一个图像：

<script>
  var height = 500;
  var width = 700;

  var vis = d3.select("#vis").append("svg")
    .attr("width", width).attr("height", height)
  var g = vis.append("g").attr("id", "image");

  d3.xml("drawing.svg", "image/svg+xml", function(xml) {
    g.each(function() {
      this.appendChild(xml.documentElement);
    });
  });
</script>

我猜你也可以从一个包含多个图标的SVG文档中选择单独的图标，然后分别插入。当SVG文档将样式存储在样式表中而不是直接存储在元素中时，我希望样式会丢失。