Raphael JS: Bir metin öğesi içindeki belirli harflerin rengini nasıl değiştirebilirim?

Question

Aşağıdaki kod var:

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

Nasıl şimdi yeşile 'bla2' rengini değiştirebilir?

Dizeyi iki metin öğesine bölmeyi denedim ve 'bla1' + 'nın bla1' + genişliğinin koordinatlarını ikincisine atadım. 'Bla1' genişliğini bulamadığım için işe yaramadı. Bu çözümle ilgili ikinci problem, 'bla1' genişliğini otomatik olarak değiştirecek ve 'bla2' konumunu bozacak olan 'bla1 bla2' yazı tipi boyutunu değiştirmek isteyebileceğim.

Şimdiden teşekkürler!

Answer 1

Böyle bir şey deneyebilirsiniz:

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/