CODEWITHSUNDEEP
javascriptcsshtmlsvgfonts
Hanfei Sun
Hanfei Sun

Reputation: 47071

In CSS/SVG, ligature font doesn't work in `<text>` nodes?

Here is a Demo at JsFiddle:

http://jsfiddle.net/d0t3yggb/

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

Here I used the 'Material Icons' font, which can convert letter combinations "add" into one character (ligature, explained here), which looks like below:

enter image description here

I used class="material-icons" to set the font-family. This works well for the <div> node, as can be seen in the Demo above.

But it doesn't work for the <text> node within <svg>, the text/characters don't appear at all..

If I remove the class="material-icons" attribute from <text> node, the text appears:

enter image description here

but it is not the "'Material Icons'" font...

Does anyone have ideas about this?

Upvotes: 1

Views: 1291

Answers (2)

Paul LeBeau
Paul LeBeau

Reputation: 101898

IIRC SVG text rendering doesn't support ligatures - at least in some browsers. You will need to use the actual character code for the glyph.

It looks like they are all listed here in the GIT repo. The code for "add" is (hex) e145. So you can include that character in your text using &#xe145;.

Demo fiddle here

Upvotes: 1

Minhaj Ahammed
Minhaj Ahammed

Reputation: 66

Could you try importing the font using css after downloading

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

and then changing your text tag contents to

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

Upvotes: 0

Related Questions