Javascript Raphael JS：如何更改文本元素中某些字母的颜色？

我有以下代码：

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

现在如何将“bla2”的颜色更改为绿色

我已经尝试将字符串拆分为两个文本元素，并将“bla1”的坐标+宽度分配给第二个元素。因为我找不到“bla1”的宽度，所以它不起作用。此解决方案的第二个问题是，我可能希望更改“bla1 bla2”的字体大小，这将自动更改“bla1”的宽度并扭曲“bla2”的位置

---

提前谢谢

您可以尝试以下方法：

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

​

JS:

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

var text=“这是一些彩色文本”；
var paper=Raphael（'canvas'，'100%”，document.documentElement.clientHeight/2）；
变量颜色=[“ffc000”、“1D”、“e81c6e”、“7c7c7c”、“00aff2”]；
var-letterSpace=5；
var-xPos=10；
var-yPos=10；
textNodes=text.split（“”）；
对于（var i=0；i

演示：

---

我能想到的唯一方法就是拆分字符串。要获取宽度，请使用元素.getBBox（）并尝试