javascript - 使用 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')