javascript - Raphaeljs 子字符串文本属性

Question

我想知道是否可以更改 Raphael 中文本对象的子字符串的属性。例如，我想在下面的字符串“The magical wizard ruled the world!”中将单词 wizard 加粗。在拉斐尔文本对象中。我研究过使用 Raphael.print() 方法，我需要文本中的一些属性用于代码的其他部分。

Answer 1

字体在元素级别设置，很像在常规 html 中。为了将单独的字体或样式应用于特定单词，您需要将文本分成单独的元素。

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