Укажите шрифт из файла шрифта в SVG, используя svg.js

Question

Для веб-проекта я использую SVG с библиотекой svg.js, чтобы облегчить мою жизнь. Библиотека svg.js отлично работает и генерирует правильный SVG, поэтому я уверен, что все работает на этом фронте.

Для этого проекта, я могу сослаться на шрифт, как это в моем файле CSS:

@font-face { 
    font-family: 'FreeUniversal'; 
    src: url('../fonts/freeuniversal-regular.ttf'); 
    font-weight: normal; 
    font-style: normal; 
} 

Этот шрифт затем взял правильно и отображается для различных элементов в моем HTML-коде.

Мой вопрос в том, как я могу это сделать в SVG, используя библиотеку svg.js? Я понимаю, что я могу установить текущий шрифт и так далее, как это:

sCurrentSvgShape.attr({ 
    'font-family': inFontName, 
    'font-size': inFontSize }); 

И это работает для веб-безопасных шрифтов, как «Helvetica» или «Курьере» или «Санс». Но я хочу знать, как я могу установить семейство шрифтов, которое ссылается на мой конкретный файл шрифта, как я могу в CSS.

Я понимаю CSV имеет синтаксис, чтобы сделать это, например:

<defs> 
    <style type="text/css"> 
    <![CDATA[ 
    @font-face { 
     font-family: Delicious; 
     src: url('http://nimbupani.com/demo/svgfonts/delicious-roman.otf'); 
    } 
    ]]> 
</style> 
</defs> 

Итак, что это лучший способ, чтобы включить это в svg.js? Нужно ли вручную создавать эти узлы «defs» вручную? Есть ли поддержка в библиотеке для этого?

Answer 1

Специального метода для этого не существует в svg.js. Однако вы можете использовать элемент bare, который позволяет включать не поддерживаемые элементы, такие как стиль.

Вы могли бы использовать это следующим образом:

root.defs().element('style').words(
    '@font-face {' + 
     'font-family: Delicious;' + 
     'src: url(\'http://nimbupani.com/demo/svgfonts/delicious-roman.otf\');' + 
    '}' 
) 

Я не проверял, но это должно сделать это.

Вторая возможность заключается в том, чтобы изобрести этот элемент стиля с помощью метода invent и включить эту функцию в svg.js самостоятельно.

Это будет выглядеть примерно так:

SVG.Style = SVG.invent({ 
    // Initialize node 
    create: 'style' 

    // Inherit from 
, inherit: SVG.Element 

    // Add class methods 
, extend: { 

    font: function(){ 

     // code to add a font to the style tag 

    } 

    , rule: function(){ 

     // code to add a style rule... whatsoever 

    } 

    } 

, construct: { 
    // Create a style element 
    style: function() { 
     return this.put(new SVG.Style) 
    } 
    } 

}) 

Это будет использоваться как так:

root.defs().style().font('your font method to add a font').rule('add another css rule')