Javascript D3.js-向SVG添加线性符号

我正在努力研究如何使用d3.js将这个网站的图标添加到svg中

目前，我最大的努力是下载svg本身，尽管我还没有弄清楚如何指定大小和颜色-CSS

my_svg.append("image")
      .attr("class",'apart')
      .attr("x", 10)
      .attr("y", 10)
      .attr("xlink:href","apartment.svg");

这些行没有效果：

     .attr("fill","red")
     .attr("width", 40)
     .attr("height", 40)

理想情况下，我希望复制内嵌SVG，但无法实现：

<svg class="lnr lnr-user"><use xlink:href="#lnr-user"></use></svg>

我也可以嵌入符号标签，但我仍然无法正确地引用它。这里有一个工作示例不适用于我，因为我需要创建svg等。。。动态地：

---

非常感谢您的帮助。

字体版本

我不会使用

svg

版本的字体，而是使用。然后，关键是查看

CSS

文件并获得所需图标的Unicode字符，例如

home

：

.lnr-home:before {
    content: "\e800";
}

是Unicode字符：

\ue800

然后可以使用标准的

文本
元素。在
d3
语法中：

.append('text')
.attr('font-family', 'Linearicons-Free')
.attr('font-size', '2em' )
.text('\ue800')


运行代码：



var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，500）
.attr（“高度”，500）；
svg.selectAll（'text'）
.数据（[“\ue810”、“\ue80e”、“\ue854”、“\ue884”]）
.输入（）
.append（'文本'）
.attr（'font-family'，'Linearicons-Free'）
.attr（'font-size'，'2em'）
.text（函数（d）{return d}）
.attr（'transform'，函数（d，i）{return'translate（'+[（i*50）+50，（i*50）+50]+'）；}）；
我破解了它：

my_svg.append('use')
    .attr("xlink:href","#lnr-user")
    .attr("x", width-icon_pos)
    .attr("y", 10)
    .attr("width", 20)
    .attr("height", 20)
    .attr("fill","red”);

只要索引文件具有以下脚本引用，它就会起作用：

<script src="https://cdn.linearicons.com/free/1.0.0/svgembedder.min.js"></script>

非常感谢您的评论。我制定了笨拙的方法-见下文-但将转移到您的文本方法。正如你所说，它更优雅！