无法通过 JavaScript 设置 SVG 文本的颜色

Question

我使用 javascript 创建 svg 文本，然后设置属性，但其中一些无法正常工作：

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

然后我检查了属性

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

控制台结果是：

所以最后'红色'存储在颜色属性中，但不显示（浏览器中的文本仍然是黑色 - Chrome，版本 90.0.4430.93（官方构建）（x86_64 )), 并且 text-indent 也没有值（其他属性表现良好）。

有什么线索吗？

Answer 1

SVG 文本不是 HTML 文本。它有一组不同的 CSS 属性——其中一些与 HTML 文本重叠，但不是全部——例如SVG 文本没有边框属性。而且没有“颜色”属性（你想要“填充”）

请阅读有关文本元素的文档：

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