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 });

这适用于网络安全字体，例如＆＃34; Helvetica＆＃34;或＆＃34; Courier＆＃34;或＆＃34; Sans＆＃34;。但我想知道如何设置一个引用我的特定字体文件的字体系列，就像我在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中包含它的最佳方法是什么？我是否必须创建这些＆＃34; defs＆＃34;节点以某种方式手动？是否有来自图书馆的支持来实现这一目标？

Answer 1

在svg.js中没有特殊方法可以实现这一点。但是，您可以使用<uib-tabset> <uib-tab> ... </uib-tab> </uib-tabset>元素，它允许您包含不受支持的元素，如样式。

您可以通过以下方式使用它：

bare

我没有测试，但应该这样做。

第二种可能性是使用root.defs().element('style').words( '@font-face {' + 'font-family: Delicious;' + 'src: url(\'http://nimbupani.com/demo/svgfonts/delicious-roman.otf\');' + '}' )方法创建此样式元素，并将此功能包含在svg.js中。

它看起来像这样：

invent

这样可以这样使用：

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)
    }
  }

})

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

1 个答案: