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を使用することができます。例えば

：テキスト要素のinnerHTMLプロパティを使用して、テキストの色付けを行うための別の方法について

<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。