javascript - Raphaeljs Substring Text attributes - Stack Overflow

admin管理员组

文章数量:1419191

I was wondering if it's possible to change the attributes of a substring of the text object in Raphael. For example, I want to bold the word wizard in the following string "The magical wizard ruled the world!" in a raphael text object. I have looked at using the Raphael.print() method and I need some of the attributes from text for other portions of the code.

I was wondering if it's possible to change the attributes of a substring of the text object in Raphael. For example, I want to bold the word wizard in the following string "The magical wizard ruled the world!" in a raphael text object. I have looked at using the Raphael.print() method and I need some of the attributes from text for other portions of the code.

• javascript
• raphael

Share Improve this question Follow asked Oct 24, 2011 at 20:31 JoshJosh 3111 silver badge44 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

Fonts are set at the element level, much like in regular html. In order to apply a separate font or style to a specific word, you would need to break your text into separate elements.

var start = paper.text(20, 20, "The magical ");
start.attr({ "text-anchor": "start" });
var startBox = start.getBBox();
var bold = paper.text(startBox.width + startBox.x, 20, "wizard ");
bold.attr({ "text-anchor": "start", "font-weight": "bold" });
var boldBox = bold.getBBox();
var end = paper.text(boldBox.width + boldBox.x, 20, "ruled the world!");
end.attr({ "text-anchor": "start" });

A problem with the solution by gilly3 is that the x-coordinate of the elements is absolute. When changing the text, for example bold.attr({"text":"sorcerer"}), the elements will overlap.

An alternative solution is to pose a text element out of custom tspan elements with relative positioning. This is also a bit cleaner from an object model perspective. However, it does require some direct manipulation of the text element. Code:

var content = paper.text(20, 20, "The magical").attr({ "text-anchor": "start" });

var txt1=Raphael._g.doc.createTextNode(" wizard ");
var txt2=Raphael._g.doc.createTextNode("ruled the world!");

var svgNS = "http://www.w3/2000/svg";
var ts1 = Raphael._g.doc.createElementNS(svgNS, "tspan");
var ts2 = Raphael._g.doc.createElementNS(svgNS, "tspan");

ts1.setAttribute("font-weight","bold");
ts1.appendChild(txt1);
ts2.appendChild(txt2);

content.node.appendChild(ts1);
content.node.appendChild(ts2);

content.node.children[1].textContent=" sorcerer ";

Disclaimer: Raphael can change relative positioning of tspans when altering x,y,dx,dy of the parent element, even though svg itself can handle this. A transform string can be used instead. Example:

content.node.setAttribute("x",500); //works
content.attr({"x":500});  //undesired result
content.transform("t100");   //works

本文标签： javascriptRaphaeljs Substring Text attributesStack Overflow