使用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中的字體文件中指定字體

回答

相關問題