文本顯示爲文字文本而不是圖標

我正在編寫一些代碼，以便在Chrome（Windows和Android）中專門用於動態生成SVG圖像的代碼進行查看。我的代碼是這樣的文本顯示爲文字文本而不是圖標

<head> 
<style> 
@font-face 
{ 
font-family:"toolbar"; 
src:url('https://cdn.jsdelivr.net/fontawesome/4.6.2/fonts/fontawesome- 
webfont.ttf') format('truetype'); 
} 
</style> 
//font to be packaged as a resource in the APK in due course. My current 
//tests are on Chrome in Windows 

<script> 
$(document).ready(function() 
{ 
var s = Snap('#world'); 
s.text(821,1385,'&#xf217;').attr({fill:'#FAD411', 
"font-size":"10vw","font-family":"toolbar"}); 
} 
</head> 
<body> 
<div id='svgbox'> 
<svg id='world' height="100%" width="100%" viewBox="0 0 2000 2547" 
preserveAspectRatio="xMidYMid meet"> 
//the SVG is created in here dynamically from code 
</svg> 
</div> 
</body> 
</html>

雖然一切工作 - 和測試的toolbar字體系列是正常的HTML標記實際可用的成功 - 在SVG中顯示的文本是文本字符串代替我期待的Fontawesome cart-plus圖標。我在這裏做錯了什麼。

來源

2016-05-09 DroidOS

嗯，我看不到如何在SnapSVG中使用字形標記，否則fontawesome和bootstrap符號被定義爲字形：http://stackoverflow.com/questions/18113478/extracting-svg-from-font-awesome –

您必須將實際圖標複製/粘貼到HTML中。一個例子見JSBin。在您的源代碼中，它將顯示爲一個空框，但是在呈現時它會正確顯示圖標。我複製了Font Awesome cheatsheet的圖標。

var s = Snap('#world'); 
var text = s.text(821, 1385, ''); 
text.attr({ 
    fill: '#FAD411', 
    fontSize: "15vw", 
    fontFamily: "toolbar" 
});

This answer is similar給你問的是什麼，除了適用於這個問題是「只要把你想成你的文檔的實際Unicode字符」的唯一部分。無需擔心meta標籤或編碼類型。

來源

2016-05-09 19:02:05 jamez14

文本顯示爲文字文本而不是圖標

回答

相關問題