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

对于Web项目，我使用SVG和svg.js库来使我的生活更轻松。 svg.js库完美工作并生成正确的SVG，因此我非常确定在这方面一切正常。使用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 });

这适用于像“黑体”或“快递”或“三世”网页安全字体。但我想知道如何设置引用我的特定字体文件的字体系列，就像我可以在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”节点？有没有从图书馆的支持来实现这一目标？

来源

2016-02-28 David van Driessche

在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')

来源

2016-02-28 11:15:39 Fuzzyma

似乎不是工作，虽然我没有找到的东西，通过检查做你的工作回答。我尝试了你的第一种方法，当我尝试使用它时，似乎会生成正确的CSS插入。虽然字体不正确。但是，如果我直接将“样式”元素应用于SVG文本元素并引用“font-family：xxmyfontxx;”在那里，它确实工作，我假设，因为浏览器然后通过我的常规CSS文件中的CSS规则选择这一点......我仍然希望沿着你所建议的方式工作 - 我现在做的事情就像一个黑客。 –

我不知道您是否必须在您的问题中包含CDATA内容。另外我不知道样式标签是否应该在defs标签中。但是：在svg中使用css规则很常见。也许你甚至可以把它写入你的css文件 – Fuzzyma

是的，我也尝试过CDATA部分，但这似乎没有任何区别。也许我应该只给我的课文上课，让CSS来照顾它;那应该也能工作得很好。感觉就像一个骗子没有在SVG中做所有事情，特别是知道它应该工作:)谢谢！ –

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

回答

相关问题