用raphael js字体很棒

Question

我想要的是创建一个简单的圆圈，其中raphaeljs内有facebook的'f'（这也将用于其他类似的情况）。 'f'符号将由font-awesome生成。

我所做的（并且没有用）是使用css和/或raphael属性设置字体系列。

代码如下：

HTML

<div id='share-facebook'></div>

CSS

#share-facebook {
  font-family: FontAwesome;
}

的Javascript

var canvas = Raphael('share-facebook', 100, 100);
var facebookWrapper = canvas.circle(50,50,50);
facebookWrapper.attr('fill', '#E3E3E3');
facebookWrapper.attr('stroke','none');
var facebookText = canvas.text(50,50,'&#xf09a');
facebookText.attr('font-size', 40);
facebookText.attr('fill', '#fff');
facebookText.attr('font-family','FontAwesome');

Here也是让你的生活更轻松的小提琴。从我所看到的问题是，raphaels将字符放在文本节点内的tspan中，并且无法解码。任何人都知道如何克服这个问题？

Answer 1

使用canvas.text(50,50,'\uf09a');代替canvas.text(50,50,'&#xf09a');，它可以正常使用

Answer 2

不是您期望的答案，但您可以使用Raphael免费图标（http://raphaeljs.com/icons/）而不是FontAwesome。每个图标都是拉斐尔路径，您可以这样做：

paper.path(<icon path here>).attr({fill: "#000", stroke: "none"});

然后我猜你可以像任何其他路径一样应用任何变换，缩放，定位。

我对你的小提琴进行了一些更新，以展示http://jsfiddle.net/K6rrf/1/。我没有删除你的代码只是添加了最后两行...

希望这有点帮助

干杯