Изменение цвета отдельных символов в текстовом элементе SVG

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 свойство элемента текста.