Raphaeljsサブストリングのテキスト属性

Question

Raphaelでテキストオブジェクトの部分文字列の属性を変更できるかどうかは疑問でした。例えば、私は次の文字列の中に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" }); 

Answer 2

gilly3の解決策の問題は、要素のx座標が絶対的であることです。テキストを変更するときは、例えばbold.attr({"text":"sorcerer"})のように要素が重なります。

代替解決策は、相対的な位置付けを伴うカスタムtspan要素からテキスト要素を構成することです。これは、オブジェクトモデルの観点からも少し洗練されています。ただし、テキスト要素を直接操作する必要があります。コード：

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.org/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 "; 

免責事項：親要素のx,y,dx,dyを変更する際にラファエルがSVG自体がこれを扱うことができるにもかかわらず、tspansの相対位置を変更することができます。代わりに変換文字列を使用できます。例：

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