Question

是否可以更改SVG <text>元素的单个字符的颜色？例如，在以下示例文本中，我希望字符5为绿色，而字符6为红色。

word = "{5,6}"
tspan.document.createElementNS(namespace,"tspan");
tspan.textContent = word;

//tspan.setAttributeNS(null,"fill","green");
textNode.appendChild(tspan);

Answer 1

您可以使用setAttribute代替setAttributeNS来设置颜色。

例如：

<script>
  var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  svg.setAttribute('style', 'border: 0px solid black');
  svg.setAttribute('width', '600');
  svg.setAttribute('height', '250');

  //Text
  var newText = document.createElementNS("http://www.w3.org/2000/svg","text");
  newText.setAttributeNS(null,"x",20);      
  newText.setAttributeNS(null,"y",100);   
  newText.setAttribute('style', 'font-size:24px');

  //Text span
  var txtSpan1 = document.createElementNS("http://www.w3.org/2000/svg","tspan");
  txtSpan1.textContent = "Eins";
  newText.appendChild(txtSpan1);

  //Text span with color
  var txtSpan2 = document.createElementNS("http://www.w3.org/2000/svg","tspan");
  txtSpan2.textContent = "t";
  txtSpan2.setAttribute('style', 'fill:green');
  newText.appendChild(txtSpan2);

  //Text span without color
  var txtSpan3 = document.createElementNS("http://www.w3.org/2000/svg","tspan");
  txtSpan3.textContent = "e";
  newText.appendChild(txtSpan3);
  var txtSpan4 = document.createElementNS("http://www.w3.org/2000/svg","tspan");

  svg.appendChild(newText);
  document.body.appendChild(svg);

</script>

jsFiddle以另一种方式使用文本元素的innerHTML属性进行文本着色。

更改SVG文本元素中单个字符的颜色

1 个答案: