Raphael JS: ¿cómo cambiar el color de ciertas letras dentro de un elemento de texto?

tengo el siguiente código:Raphael JS: ¿cómo cambiar el color de ciertas letras dentro de un elemento de texto?

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

¿Cómo se puede cambiar el color de la 'bla2' a verde ahora?

Ya he intentado dividir la cadena en dos elementos de texto y asignar las coordenadas de la 'bla1' + ancho de la 'bla1' a la segunda. No funcionó ya que no he descubierto el ancho de 'bla1'. El segundo problema con esta solución es que podría querer cambiar el tamaño de fuente de 'bla1 bla2', que cambiará automáticamente el ancho de 'bla1' y distorsionará la posición de 'bla2'.

¡Gracias de antemano!

Fuente

2011-10-29 user1006115

el único La forma en que puedo pensar es dividir la cadena. Para obtener el ancho, use element.getBBox() http://raphaeljs.com/reference.html#Element.getBBox –

también http://stackoverflow.com/questions/7881609/raphaeljs-substring-text-attributes –

Pruebe http: //stackoverflow.com/questions/8517191/raphael-changing-the-letter-color-of-text-string –

Usted puede intentar algo como esto:

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

Demostración: http://jsfiddle.net/aamir/zsS7L/

Fuente

2012-08-29 11:28:56

Raphael JS: ¿cómo cambiar el color de ciertas letras dentro de un elemento de texto?

Respuesta

Cuestiones relacionadas