D3.js - 将LinearIcons附加到SVG

我很努力地使用d3.js将图标从本网站添加到svg。D3.js - 将LinearIcons附加到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等，这并不适用于我...动态：

D3 - Add a raw symbol

任何帮助非常赞赏。

来源

2017-02-04 Bmil

字体版本

我不会用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="[email protected]" 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="[email protected]" 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>

来源

2017-02-04 17:10:57 Mark

非常感谢您的意见马克。我制定了笨重的方法 - 见下文 - 但将转移到您的文字方法。正如你所说它更优雅！ – Bmil

我已经破解了：

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>

来源

2017-02-04 18:29:10 Bmil

D3.js - 将LinearIcons附加到SVG

回答

相关问题