Question

我正在编写一些代码，只能在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>

虽然其他一切正常 - 并且测试正常 html标记中实际可用的toolbar字体系列成功 - 在SVG中显示的文本是文字字符串而不是我期望的Fontawesome cart-plus图标。我在这里做错了什么。

Answer 1

您必须将实际图标复制/粘贴到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标记或编码类型。

文字显示为文字文字而非图标

1 个答案: