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>

<强> 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/

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

1 个答案: