Question

我正在努力解决如何使用d3.js将此网站上的图标https://pypi.python.org/pypi/mock-server/0.3.7附加到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等...动态：

https://linearicons.com/

任何帮助都非常感激。

Answer 1

字体版

我不会使用字体的svg版本，而是使用font itself。然后，关键是查看CSS文件并获取所需图标的Unicode字符，例如home：

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

是Unicode字符：

\ue800

然后，您可以使用标准text元素。在d3语法中：

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

运行代码：

<!DOCTYPE html>
<html>

<head>
  <script data-require="d3@4.0.0" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script>
  <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.css" />
</head>

<body>
  <script>
    var svg = d3.select("body")
      .append("svg")
      .attr("width", 500)
      .attr("height", 500);
      
    svg.selectAll('text')
      .data(["\ue810", "\ue80e", "\ue854", "\ue884"])
      .enter()
      .append('text')
      .attr('font-family', 'Linearicons-Free')
      .attr('font-size', '2em' )
      .text(function(d) { return d })
      .attr('transform', function(d,i){ return 'translate(' + [(i * 50) + 50, (i * 50) +  50] + ')'; });
  </script>
</body>

</html>

SVG版本

如果你已经开始使用svg版本了，我可以让它发挥作用，但它有点笨拙。首先，您需要在<use>页面上有一个现有的svgembedder，然后才能添加use个元素：

<!DOCTYPE html>
<html>

<head>
  <script data-require="d3@4.0.0" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://cdn.linearicons.com/free/1.0.0/svgembedder.js"></script>
</head>

<body>
  <!-- this needs to be here for svgemedder to work -->
  <svg width="0" height="0"><use xlink:href="#dummy"></use></svg>
  <script>
    var svg = d3.select("body")
      .append("svg")
      .attr("width", 500)
      .attr("height", 500);
      
    svg.selectAll('.icon')
      .data(["user", "home", "thumbs-up", "cross"])
      .enter()
      .append('use')
      .attr('width',50)
      .attr('height',50)
      .attr('transform', function(d,i){ return 'translate(' + [(i * 50) + 50, (i * 50) +  50] + ')'; })
      .attr('xlink:href', function(d) { return '#lnr-' + d });
  </script>
</body>

</html>

Answer 2

我已经破解了它：

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>

D3.js - 将LinearIcons附加到SVG

2 个答案: