Использование Font Awesome с jQuery SVG

С небольшой помощью этот вопрос, я смог отобразить классные значки шрифта в статическом SVG. Но наше приложение использует jQuery SVG и, похоже, не допускает escape-символов SVG. Вот демонстрация, показывающая, как оба работают бок о бок:

http://jsfiddle.net/scruffles/m6Z7Y/4/

<text x="30" y="30">&#xf040</text>

Отрисовывается как карандаш, но

svg.text(g, 30, 30, '&#xf040');

отображается как 


svg jquery jquery-svg
person Bryan Young    schedule 29.08.2013    source источник
comment
возможный дубликат текстового элемента SVG с символами Unicode   -  person Blazemonger    schedule 29.08.2013
comment
Совет: не используйте jQuery SVG с jQuery версии 1.8 или выше. Он имеет некоторые конфликты с этими версиями. Например, .width() и .height() возвращают строки (30 пикселей) вместо чисел. В итоге я использовал простой jQuery и для динамического создания элементов использовал: $(document.createElementNS('w3.org /2000/svg', прямоугольник)); вместо $(‹rect /›)   -  person Hoffmann    schedule 29.08.2013

Ответы (3)


arrow_upward
4
arrow_downward

В соответствии с этим ответом вместо этого следует использовать svg.text(g, 30, 30, '\uf040');.

http://jsfiddle.net/mblase75/m6Z7Y/6/

person Blazemonger    schedule 29.08.2013
comment
как вы нашли это \uf040' ? - person Tushar Gupta - curioustushar; 29.08.2013
comment
@TusharGupta Это почти идентично оригинальному &#xf040. - person Blazemonger; 29.08.2013

arrow_upward
0
arrow_downward

В JavaScript, вместо использования объекта, вы можете использовать необработанный Unicode в исходном коде JavaScript (скопируйте/вставьте символ) или используйте Эскап-последовательность Unicode в простом коде JavaScript ASCII:

svg.text(g, 30, 60, '');       // A unicode f040 character
svg.text(g, 30, 30, '\uf040');

Демонстрация: http://jsfiddle.net/m6Z7Y/7/

Кроме того, обратите внимание, что объекты XML начинаются с амперсанда и заканчиваются точкой с запятой — &…; — поэтому точка с запятой в конце необходима для корректной XML-разметки:

<text x="30" y="30">&#xf040;</text>
person Phrogz    schedule 29.08.2013

arrow_upward
0
arrow_downward

Я создал объект с именами и псевдонимами Font Awesome в качестве ключей и символов Юникода в качестве значений. Таким образом, вы можете сделать вещи более читабельными, например:

svg.text(g, 30, 60, FONT_AWESOME.pencil);

Вот полный список: https://github.com/the-grid/the-graph/blob/master/the-graph/font-awesome-unicode-map.js

person forresto    schedule 04.06.2014