Raphael JS: come cambiare il colore di alcune lettere all'interno di un elemento di testo?

Question

Ho il seguente codice:

 var set = paper.set(); 
     var text = paper.text(0, 0, 'bla1 bla2').attr({ fill: 'blue'}); 
     set.push(text); 

Come posso cambiare il colore del 'bla2' al verde ora?

Ho già provato a suddividere la stringa in due elementi di testo e assegnare le coordinate della larghezza "bla1" + di "bla1" alla seconda. Non ha funzionato poiché non ho trovato la larghezza di "bla1". Il secondo problema con questa soluzione è che potrei voler cambiare la dimensione del font di 'bla1 bla2' che cambierà automaticamente la larghezza di 'bla1' e distorce la posizione di 'bla2'.

Grazie in anticipo!

Answer 1

Si può provare qualcosa di simile:

HTML:

<div id="canvas"></div>​ 

JS:

var text = "this is some colored text"; 
var paper = Raphael('canvas', '100%', document.documentElement.clientHeight/2); 
var colors = ["#ffc000", "#1d1d1d", "#e81c6e", "#7c7c7c", "#00aff2"]; 
var letterSpace = 5; 
var xPos = 10; 
var yPos = 10; 

textNodes = text.split(' '); 

for(var i=0; i < textNodes.length; ++i) {  
    var textColor = colors[i]; 
    var textNode = paper.text(xPos , yPos , textNodes[i]); 
     textNode.attr({ 
      'text-anchor': 'start', 
      'font-size' : 12, 
      'fill' : textColor 
     }); 
    xPos = xPos + textNode.getBBox().width + letterSpace; 
} 
​ 

Demo: http://jsfiddle.net/aamir/zsS7L/