Are `<text>` nodes unable to utilize ligature fonts in CSS/SVG?

Check out this JsFiddle demo:

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>

In the demonstration above, I utilized the 'Material Icons' font to create a unique character for the letter combination "add". This is achieved through ligatures.

To apply the 'Material Icons' font to text within a <div>, I used the class attribute class="material-icons". However, when attempting to do the same within a <text> node inside an <svg>, the characters are not displayed.

If the class="material-icons" attribute is removed from the <text> node, the text appears without the desired font styling:

Does anyone have any suggestions or solutions for this issue?

javascriptcsshtmlsvgfonts

Answer №1

It appears that SVG text rendering may not support ligatures in all browsers. To work around this, you'll have to use the specific character code for the glyph.

You can find a comprehensive list of these codes in the GitHub repository. For example, the code for "add" is e145 in hexadecimal format. Therefore, you can incorporate this character into your text using &#xe145;.

Check out a live demonstration on this fiddle link

Answer №2

Have you attempted to import the font through CSS after saving it?

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

Then make sure to update your text tag contents as follows:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The mysterious case of jQuery DOM alterations vanishing from sight in the view

I have a quick inquiry. I've been exploring jQuery lately and discovered the ability to dynamically add HTML elements to the DOM using code like $('').append('<p>Test</p>'); However, what surprised me is that these ap ...

javascriptjquerydomjquery-selectorsappend

Looking for a Plugin that Can Responsively Display Images in a Vertical Layout - Does One Exist using Jquery

Looking for a gallery slider plugin that is responsive both horizontally and vertically. Have tried Flexslider1/2, Galleria, and others but they do not adjust to vertical resizing. Changing the CSS did not help. If you resize the browser horizontally with ...

javascriptjquerycssslidergallery

Dynamic CSS Class Implementation with KnockoutJS

Greetings, I am seeking assistance as I am new to KnockoutJS. I am working with a class named green-bar that I need to activate when two particular states are true. Unfortunately, the solution I came up with below is not functioning correctly, and I'm ...

javascriptcsshtmlmvvmknockout.js

Inserting a pause between a trio of separate phrases

I am dealing with three string variables that are stacked on top of each other without any spacing. Is there a way to add something similar to a tag in the ts file instead of the template? Alternatively, can I input multiple values into my angular compo ...

htmlangulartypescript

Determine the data type of a string without needing to convert it

Can you determine if a value is numeric without casting it? For example, how can you differentiate between 'abc' and '123' without converting them to a specific data type? While visually apparent that 'abc' is not numeric, t ...

javascriptlodash

Establish a connection between two pre-existing tables by utilizing the Sequelize framework

I have two tables already set up (User and PaymentPlan), but they were not initially linked together. PaymentPlan.ts import { DataTypes, Model } from "sequelize"; import { sequelize } from "./DBConnections/SequelizeNewConnection"; exp ...

javascriptmysqlnode.jstypescriptsequelize.js

Finding the parent div in the handleChange function using React

I am facing a challenge with multiple dynamic divs, as their number depends on the filter selected by the visitor. This makes it impossible to use getElementById in this scenario. My goal is to modify the parent div's CSS when an input is checked. B ...

javascriptreactjstailwind-css

Design a table within an mdDialog that allows for editing of data presented in JSON format

I'm attempting to implement a dialog using JSON data. $scope.showAttributeData = function(data) { $scope.feature = data console.log($scope.feature) var that = this; var useFullScreen = ($mdMedia('sm') ...

javascriptangularjsangular-ngmodelangularjs-materialmddialog

JSON object name

Here are the specific file locations for loading each of the CSS and JS files. <link href="css/default.css" rel="stylesheet" /> <script src="js/main.js"></script> In XML, the filename is input as shown below ...

javascriptjsonxml

Is your jQuery search scope correctly restricted?

Upon coming across this code snippet, I can't help but wonder if it's merely limiting the scope or selecting both elements simultaneously. container = jQuery("#test", parent.document); jQuery("param[name=scale]", another.object) Would anyone b ...

javascriptjquery

Display the length of an array using AngularJS

Hey there, I'm currently having an issue with printing a list where each entry is supposed to follow the format "element X of TOTAL". However, instead of displaying the total value, it appears as blank text. It seems like a simple mistake, but for som ...

javascriptangularjs

Tips for choosing the right element in CSS

Can someone help me with this issue? https://i.stack.imgur.com/pBu1w.png I've tried setting a CSS selector, but it doesn't seem to be working as expected. What could be causing the selector to not work properly? Any suggestions on how I can f ...

css

Encountering a problem during the installation of the udev module in a Node.js

When I run the command below: npm install udev I encounter the following error message: npm WARN enoent ENOENT: no such file or directory, open '/home/mitesh/package.json' npm WARN mitesh No description npm WARN mitesh No repository field. ...

javascriptnode.jsnpmudevnode-serialport

Is feature recognition possible in a jQuery plugin?

Can I integrate a tool similar to Modernizr into my plugin? I want to be able to test for specific CSS3 properties without starting from scratch. ...

jquerycss

Despite being in perfect condition, my If-Else statement is refusing to function properly

I had previously posted a similar question, but it was removed. However, I am still very curious about why something seemingly trivial is not functioning properly. This is the entirety of my HTML and JavaScript code... <!doctype html> <html lang=& ...

javascripthtmljsonif-statementasynchronous

The Vue component functions properly after undergoing the Hot Reload process

Spent countless hours searching online for a solution, but to no avail (plus an explanation). I am encountering an issue with my Vue select component that is connected to a Datatable: <select @change="statusChanged()" v-model="active" name="Fi ...

javascriptvue.jsdrop-down-menudatatable

Create a bootstrap table with td elements that have no wrap for their content

I am currently developing an application using springboot, thymeleaf, and bootstrap. Here is the snippet of the html code I'm working with: <!doctype html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <h ...

htmlspring-bootmavenbootstrap-4thymeleaf

Tips for displaying buttons and images on the same line using CSS

Below is the JavaScript code I am using: $('#needdiv').append('<img src="/images/Connect.png" id="connectimage">' + '</img>' + '<input type="button" id="connect" value=connect >' + '&l ...

javascriptjqueryhtmlcss

Overlapping Bootstrap columns detected when viewing on smaller screens

In an attempt to create a user-friendly layout, I developed two columns: one for the title and another for projects, with the latter being scrollable. The design functions as intended on desktop view but encounters an issue when the viewport is reduced to ...

htmlcssreactjsbootstrap-5

The page switch with a jittery effect

Could really use some assistance with this code that has been giving me trouble for quite a while now. It's a simple HTML, CSS, and JS code involving two pages. [The second page overlaps the first by default, but adjusting the z-index of the first p ...

javascripthtmlcss