如何在我的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"></text></g>
然后在你的样式表中添加：
svg text { font-family: FontAwesome; }
我的演示
<!DOCTYPE html> <html> <head> <script src="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'; });
