在CSS/SVG中，連字字體在`<text>`節點中不起作用？

這裏是在的jsfiddle一個演示：在CSS/SVG中，連字字體在`<text>`節點中不起作用？

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
 
<div class="material-icons">add add add add</div> 
 
<svg width="100%" height="100%" viewBox="0 0 1000 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
    <defs> 
 
     <path id="MyPath" d="M 100 200 
 
      C 200 100 300 0 400 100 
 
      C 500 200 600 300 700 200 
 
      C 800 100 900 100 900 100" /> 
 
    </defs> 
 
    <use xlink:href="#MyPath" fill="none" stroke="red" /> 
 
    <text class="material-icons"> 
 
     <textPath xlink:href="#MyPath">add add add add</textPath> 
 
    </text> 
 
    <!-- Show outline of the viewport using 'rect' element --> 
 
    <rect x="1" y="1" width="998" height="298" fill="none" stroke="black" stroke-width="2" /> 
 
</svg>

在這裏，我使用的'Material Icons'字體，它可以轉換字母組合「添加」到一個字符（連字，解釋here ），它看起來像如下：

enter image description here

我以前class="material-icons"設置font-family。這對於<div>節點非常適用，如上面的Demo所示。

但它並不適用於內<svg>的<text>節點工作，文本/字符不會出現在所有..

如果我從<text>節點刪除class="material-icons"屬性，顯示的文字：

enter image description here

，但它是不是「‘材料圖標’」字體...

這個沒有人有想法？

來源

2015-06-27 Hanfei Sun

IIRC SVG的文本渲染不支持連筆字 - 在某些瀏覽器至少。您需要使用字形的實際字符代碼。 –

@PaulLeBeau謝謝！但是，我怎樣才能得到實際的字符代碼？例如，對於'add'結紮實際的字符代碼.. –

看起來他們都在GIT回購這裏列出：https://github.com/google/material-design-icons/blob/master/iconfont/codepoints –

IIRC SVG的文本渲染不支持連筆字 - 在某些至少瀏覽器。您需要使用字形的實際字符代碼。

看起來他們都在GIT repo這裏列出。「添加」的代碼是（十六進制）e145。因此，您可以使用將該字符包含在文本中。

Demo fiddle here

來源

2015-06-27 15:17:41

你能嘗試導入使用CSS字體下載

@font-face { 
font-family: material icons; 
src: url(material-icons.ttf); 
}

後，然後改變你的文字標籤內容

<text font-family="material-icons" font-size="20"> 
<textPath xlink:href="#MyPath"> 
add add add add 
</textPath> 
</text>

來源

2015-06-27 15:13:29

在CSS/SVG中，連字字體在`<text>`節點中不起作用？

回答

相關問題