Come posso includere un’icona impressionante di carattere nel mio svg?

Ho un svg che include le immagini:

 

Come posso sostituire quella linea con un’icona impressionante di font:

  

non sembra funzionare come l’immagine non viene visualizzata.

non è valido SVG. È necessario includere il carattere reale che visualizza l’icona. Se dai un’occhiata al foglio di stile di font awesome vedrai …

 .icon-group:before { content: "\f0c0"; } .icon-link:before { content: "\f0c1"; } .icon-cloud:before { content: "\f0c2"; } .icon-beaker:before { content: "\f0c3"; } .icon-cut:before { content: "\f0c4"; } .icon-copy:before { content: "\f0c5"; } .icon-paper-clip:before { content: "\f0c6"; } .icon-save:before { content: "\f0c7"; } .icon-sign-blank:before { content: "\f0c8"; } .icon-reorder:before { content: "\f0c9"; } .icon-list-ul:before { content: "\f0ca"; } .icon-list-ol:before { content: "\f0cb"; } .icon-strikethrough:before { content: "\f0cc"; } .icon-underline:before { content: "\f0cd"; } .icon-table:before { content: "\f0ce"; } 

Ma quelli sono caratteri unicode codificati per CSS. In SVG è necessario modificare la syntax dell’esempio \f040 in:

  

E poi nel tuo foglio di stile aggiungi:

 svg text { font-family: FontAwesome; } 

la mia demo

       JS Bin   

Standard using:


SVG using:

JS

 var svg = d3.select("body") .append("svg") .attr("width", 250) .attr("height", 250); svg.append("text") .attr("x",0) .attr("y",70) .attr("font-family","FontAwesome") .attr('font-size', function(d) { return '70px';} ) .text(function(d) { return '\uf083'; });