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

回答

相關問題