Can't set color of SVG text through JavaScript

Question

I create svg text using javascript and then set the attributes, but some of them didn't work properly :

      let svgns = "http://www.w3.org/2000/svg";
      let container = document.getElementById("mySVG");
      var text = document.createElementNS(svgns, "text");
      text.setAttributeNS(null, "x", 30);
      text.setAttributeNS(null, "y", 20);
      text.textContent = "Hello!";
      text.style.fontSize = "50"; 
      text.style.fontFamily = "Arial";
      text.style.color = "red"; // does'nt display
      text.style.textIdent = "500px"; // does'nt store in the attributes
      text.style.textShadow = "5px 5px 10px pink";
      text.style.textOrientation = "upright";
      text.style.textOverflow = "ellipsis";
      text.style.textRendering = "auto";
      text.style.writingMode = "vertical-rl";
      container.appendChild(text);

Then I checked the attributes with

      for (let prop in text.style) {
        let val = text.style[prop];
        console.log(`${prop} = ${val}`);
      }

The console result is :

So at the end 'red' is stored in the color attribute, but it is not displayed (text is still black in the browser - Chrome, Version 90.0.4430.93 (Build officiel) (x86_64)), and also text-indent has no values (the other attributes are well behaving).

Any clues ?

I have the same issue with text.style.border = "solid";it is in the attributes but not displayed — Netchaiev
– Netchaiev, Commented May 13, 2021 at 13:15

Michael Mullany · Accepted Answer · 2021-05-13 13:30:37Z

2

SVG Text is not HTML text. It has a different set of CSS properties - some of which overlap with HTML text, but not all - e.g. there is no border attribute for SVG text. And there is no "color" attribute (you want "fill")

Please read the documentation on the text element:

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text

answered May 13, 2021 at 13:30

Michael Mullany

32.1k6 gold badges84 silver badges107 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Netchaiev Over a year ago

What I don't totally get it is that if I do console.log(text) I guet "<text x="35" y="25" style="font-size: 50px; font-family: Arial; color: red; text-shadow: pink 5px 5px 10px; text-orientation: upright; text-overflow: ellipsis; text-rendering: auto; writing-mode: vertical-rl; border-radius: 10px; border: 3px solid black; box-shadow: red 10px 5px 5px;">Hello!</text>" and if I copy/paste this in the HTML it shows the border and the right color ...

Michael Mullany Over a year ago

If you copy and paste this into HTML, the text element is treated as an unknown HTML element: stackoverflow.com/questions/10830682/…

Collectives™ on Stack Overflow

Can't set color of SVG text through JavaScript

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related