使用svg.js从SVG中的字体文件指定字体

Question

对于一个Web项目，我将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.js库在SVG中执行此操作？我知道我可以设置当前字体，依此类推：

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

这适用于网络安全字体，例如“ Helvetica”或“ Courier”或“ Sans”。但是我想知道如何设置引用我特定字体文件的字体系列，就像在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')