如何在我的svg中包含字体棒图标?

我有一个包含图像的svg:

<g><image id="myImage" class="myClass" x="12" y="15" width="10" height="10" xlink:href="http://img.dovov.compic.png"/></g> 

我该如何replace那个带有字体的真棒图标:

 <g><i class="icon icon-cloud-download" x="12" y="15" width="10" height="10"></i></g> 

似乎不工作,因为图像不显示。

i是无效的SVG。 您需要包含显示图标的实际字符。 如果你看看字体真棒的样式表,你会看到…

 .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"; } 

但是那些是为CSS编码的unicode字符。 在SVG中,您需要将example \f040的语法更改为:

 <g><text x="0" y="0">&#xf040;</text></g> 

然后在你的样式表中添加:

 svg text { font-family: FontAwesome; } 

我的演示

 <!DOCTYPE html> <html> <head> <script src="http://d3js.org/d3.v3.min.js"></script> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <meta charset="utf-8"> <title>JS Bin</title> </head> <body> <div title="Code: 0xe800" class="the-icons span3"> <H3>Standard using:</H3> <i class="fa fa-camera-retro fa-4x"></i> <br> <H3>SVG using:</H3> </body> </html> 

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'; });