Рафаэль JS: как изменить цвет определенных букв в текстовом элементе?

У меня есть следующий код:

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

Как я могу изменить цвет "bla2" на зеленый сейчас?

Я уже пытался разделить строку на два текстовых элемента и присвоить координаты 'bla1'+ width 'bla1' второму. Это не сработало, так как я не узнал ширину "bla1". Вторая проблема с этим решением заключается в том, что я могу захотеть изменить размер шрифта "bla1 bla2", который автоматически изменит ширину "bla1" и исказить положение "bla2".

спасибо заранее!

6
javascript raphael svg

1 ответов

Вы можете попробовать что-то вроде этого:

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

демо: http://jsfiddle.net/aamir/zsS7L/

6