Styling text using SVG in HTML

I'm trying to underline a text element in SVG using the text-decoration attribute, but I'm running into an issue with the color of the line not changing. Here is the code snippet I am working with:

<svg id="svg" viewBox="0 0 300 154">
    <text x="150" y="79" style="font-size: 80px; font-family: Brush Script MT" id="10" fill="#e00000" text-decoration="underline solid #0fc224">text</text>
</svg>

Even though I have specified the desired color for the underline in the text-decoration attribute, it is still being inherited from the text (SVG) element. Any suggestions on how to fix this?

javascripthtmlcsssvgtext-decorations

Answer №1

It seems that the text-decoration-color property does not have an effect on SVG text elements...

However, you can work around this limitation by using a foreignObject as a container for a regular DOM element that fully supports CSS styling:

.text {
  color: red;
  fill: red;
  font-size: 80px; 
  font-family: Brush Script MT;
  text-decoration: underline;
  text-decoration-color: blue;
}
<svg id="svg" viewBox="0 0 300 154">

  <foreignObject width="150" height="150">
    <span class="text">
      Text
    </span>
  </foreignObject>

  <text x="150" y="79" id="10" class="text">
    Text
  </text>

</svg>

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

How to read a text file in JavaScript line by line

Coding Challenge: <script src="../scripts/jquery-3.1.0.min.js"></script> <script> $(document).ready(function(){ $('#test').click(function(){ var txtFile = '../data/mail.txt'; var file ...

javascripthtmlfiletextline

JavaScript failing to load following PHP header() redirect

I've set up a page that allows users to sign in by filling out a basic form, which then sends the data to a separate PHP script for validation. After the validation process is complete, the PHP script uses the header() function to redirect the user to ...

javascriptphpjqueryhtmlcss

Creating an Add-in using the Excel JavaScript API based on an already existing spreadsheet

Is there a way to create an Add-in using Excel JavaScript API from an existing spreadsheet? When running npm start, it generates a blank workbook. I believe changes need to be made in the Manifest.xml file, as npm start triggers office-addin-debugging star ...

javascriptexcelnpmoffice-addins

Use the lodash chunk method to split a mapped array into two separate arrays

Looking to organize some data into tables? I have a dataset from an API that you might find helpful. [ { date: "1/11", data: [ { camera: "camera 1", count: 10 }, { camera: "camera 2", count: 20 ...

javascriptreactjsecmascript-6lodash

Filter through the array using the cast method

Trying to implement this: let selections = list.filter(obj => obj.type === "myType"); An issue arises with the filter function displaying an error message which states 'filter' does not exist on type 'NodeType' I attempted to ...

javascripttypescript

Is it possible to adjust the range of a range slider based on the selection of a radio button or other input method?

I have a query and I’m hopeful you can assist: function UpdateTemperature() { var selectedGrade = $( "input[name='radios']:checked" ).val(); $( ".c_f" ).text(selectedGrade); var value1 = $("#tempMin").val(); var value2 = $("#tempM ...

javascriptjqueryhtmlcssmaterialize

Change the x and y positions of several div elements as the mouse moves in JavaScript

I am aiming to create a webpage where multiple divs with text and other content move along the x and y axes of the mouse. The desired effect is similar to parallax scrolling, but I have found that existing parallax plugins are image-based and do not work w ...

javascriptjquerycssmouseeventparallax

Avoid making the check mark disappear in an SVG animation

After perfecting my CSS animation, I have the circle looping around to complete its shape while a check mark fills in the middle with a slight delay. Once both shapes are completed simultaneously, the check mark disappears. The reason for the disappearing ...

csssvgcss-animations

What is the best way to generate a JSON output that contains the entire

The use of {foo|json} is effective for displaying only part of the $scope. Is there a way to pass the entire scope to the json filter? ...

javascriptangularjsdebugging

Utilizing jQuery UI datepicker as a fallback in absence of HTML5 native date input type

Although <input type="date"> is not commonly used for desktop, it is the preferred method for mobile devices. I am attempting to incorporate the fallback code located at the end of this section: <form> <input type="date"> </form&g ...

javascriptjqueryhtmljquery-uidatepicker

Using HTML5 date input on an android browser

As I develop a web page catering to Android users, I have incorporated a date form control for users to input dates. However, I have noticed that on most devices, the native date selector does not pop up. Interestingly, on certain Samsung devices like the ...

androidhtmldatebrowser

How can you ensure that links on Ajax-loaded pages direct users to their intended destinations?

The issue at hand: When clicking on links within dynamically loaded pages, the desired dynamic loading of other pages does not occur. Within my index page, I have links structured like this: <li><a class="page_one" title="page_one" href="page_on ...

javascriptjqueryajaxdynamic

Having trouble unselecting the previous item when selecting a new item in Reactjs

I have a list of items and I want to change the background color of the currently selected item only. The previously selected item should deselect. However, at the moment, all items are changing when I click on each one. Can anyone help me solve this issue ...

javascriptcssreactjs

Tips for creating a clickable A href link in the menu bar that triggers an accordion to open in the body when clicked - html

Is there a way to open the first accordion when clicking on the "open 1st accordion" link, and do the same for the second link? The accordions themselves work perfectly fine, I just need a way to trigger them from outside their scope by clicking on links i ...

javascripthtmljquerycssaccordion

Can I use a single component for all routes in NextJS?

Just starting out with NextJS and facing a simple problem: I'm wondering if it's possible to achieve the following setup using NextJS // with react-router-dom <Router> <> <Header /> <Switch> & ...

javascriptreactjsroutesreact-routernext.js

Tips for emphasizing active tabs in Angular 6

**I have everything displaying perfectly, but I am wondering how to highlight the active tab without using any third-party components. Any assistance would be greatly appreciated. Thank you.** <ul class="tabs"> <li [ngClass]=" {'active-tab ...

htmlangular

Angular 2 event emitter falling behind schedule

I am currently utilizing Angular 2 beta 6. The custom event I created is not being captured import {Component, OnInit, EventEmitter} from 'angular2/core'; import {NgForm} from 'angular2/common'; import {Output} from "angular2/core" ...

javascripttypescriptangular

What is the best way to integrate a Sequalize API into my React project?

I am looking for guidance on how to retrieve records from my MYSQL database and integrate it into my API. I am unsure about the routing process (do I need to create a component?) and struggling to find resources on using sequelize with React. Any assista ...

javascriptmysqlreactjsexpresssequelize.js

Make multiple images in one row resize proportionally instead of wrapping them to the next line

My phone's screen is small and I want the three images to remain in the same row. In case they don't fit, they should shrink proportionately to maintain alignment (refer to image at the bottom). Consider the code snippet below: <div id="exam ...

htmlcssimage-resizingautoresizeshrink

Is there a way to retrieve the request URL within the validate function of the http strategy?

Is it possible to access the context object present in guards within the validate method of my bearer strategy, by passing it as an argument along with the token? bearer-auth.guard.ts: @Injectable() export class BearerAuthGuard extends AuthGuard('be ...

javascriptnode.jstypescriptpassport.jsnestjs