राफेल जेएस: टेक्स्ट-एलिमेंट के भीतर कुछ अक्षरों का रंग कैसे बदलें?

Question

मैं निम्नलिखित कोड है:

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

कैसे मैं अब हरे रंग के 'bla2' का रंग बदल सकते हैं?

मैंने स्ट्रिंग को दो टेक्स्ट-तत्वों में विभाजित करने की कोशिश की है और 'bla1' + 'bla1' की चौड़ाई को दूसरे को समन्वयित करने की कोशिश की है। यह काम नहीं करता क्योंकि मुझे 'bla1' की चौड़ाई नहीं मिली है। इस समाधान के साथ दूसरी समस्या यह है कि मैं 'bla1 bla2' का फ़ॉन्ट-आकार बदलना चाहता हूं जो स्वचालित रूप से 'bla1' की चौड़ाई बदल देगा और 'bla2' की स्थिति को विकृत करेगा।

अग्रिम धन्यवाद!

Answer 1

आप कुछ इस तरह की कोशिश कर सकते हैं:

HTML:

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

जे एस:

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; 
} 
​ 

डेमो: http://jsfiddle.net/aamir/zsS7L/