我有包括圖像的SVG：如何在我的svg中包含字體棒圖標？

<g><image id="myImage" class="myClass" x="12" y="15" width="10" height="10" xlink:href="/images/pic.png"/></g>

如何更換線W /字體真棒圖標：

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

似乎並沒有工作，因爲圖像不顯示向上。

來源

2013-02-20 Marissa Levy

你需要獲得glyp hs元素來自svg。 – David 2013-02-20 15:47:43

i是無效的SVG。您需要包含顯示圖標的實際字符。如果您在font awesome's stylesheet看看你會看到...

.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，你將需要例如\f040的語法更改爲：

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

然後在你的樣式表添加：

svg text { 
    font-family: FontAwesome; 
}

來源

2013-02-20 17:41:43 Duopixel

作品完美。謝謝！ – 2013-02-20 17:59:06

@Duopixel如果svg是網站的一部分，FontAwesome（css）被加載，這個解決方案纔有效，對吧？有沒有辦法將單個字體包含到「獨立」svg文件中？這個文件應該是可讀的「離線」，而不需要從web服務器加載css文件。像一個包：svg和FontAwesome定義到一個svg文件中。 – 2013-08-13 12:38:24

要使用嵌入字體的獨立SVG，您需要將字體作爲數據嵌入，如果需要詳細信息，請打開一個新問題。 – Duopixel 2013-08-13 15:39:00

my Demo

<!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>

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

來源

2015-01-23 04:54:32 WebBrother

感謝函數（d）{return'\ uf083'; }，花了我一段時間來找到這個解決方案。 – NPC 2016-05-03 21:19:01

當我嘗試使用window.btoa保存此svg時出現錯誤**未捕獲DOMException：未能在'Window'上執行'btoa'：要編碼的字符串包含Latin1範圍之外的字符。（...）* * – Jerry 2016-12-07 11:00:53

謝謝，但我想知道使用HTML實體和D3js'text'函數將字符串添加到HTML元素的區別？像'\ uf083'和＆＃xf083 – Allen 2017-05-20 03:48:06

如何在我的svg中包含字體棒圖標？

回答

my Demo

相關問題