tspan を使用してチャットルーム メッセージへの Javascript に取り組んでいます。
オリジナル: この関数は、svg の各アイテムの名前とコンテンツ テキストを tspan に追加します。
function showMessage(nameStr, contentStr, color){
var node = document.getElementById("chattext");
// Create the name text span
var nameNode = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
// Set the attributes and create the text
nameNode.setAttribute("x", 100);
nameNode.setAttribute("dy", 20);
nameNode.setAttribute("fill", color);
nameNode.appendChild(document.createTextNode(nameStr));
// Add the name to the text node
node.appendChild(nameNode);
// Create the score text span
var contentNode = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
// Set the attributes and create the text
contentNode.setAttribute("x", 200);
contentNode.setAttribute("fill", color);
contentNode.appendChild(document.createTextNode(contentStr));
// Add the name to the text node
node.appendChild(contentNode);
}
HTMLのようなハイパーリンクを表示したい(スタイルでクリック可能)
考え:
var contentNode = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
// Set the attributes and create the text
contentNode.setAttribute("x", 200);
contentNode.setAttribute("fill", color);
// set up anchor tag inside tspan
var a_tag = document.createElement("a");
a_tag.setAttribute("xlink:href", "http://google.com");
a_tag.setAttribute("text", "google");
contentNode.appendChild(a_tag);
node.appendChild(contentNode);
PS検索URLは後ほど実装予定です。
この段階では、
テスト用に tspan サンプル Web サイト 内にハイパーリンクを表示することに焦点を当てています。
https://www.w3.org/TR/SVG/text.html#TSpanElementをチェックしましたが、<a>
内部<tspan>
は問題ないと思われ
ます。これがうまくいかない理由を誰か提案できますか?
完全なソース コード:
https://www.sendspace.com/file/2xhpk8
Robert Longson の意見、新しいアイデアに感謝します。
var contentNode = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
// Set the attributes and create the text
contentNode.setAttribute("x", 200);
contentNode.setAttribute("fill", color);
// set up anchor tag inside tspan
var a_tag = document.createElementNS("http://www.w3.org/2000/svg", "a");
a_tag.setAttribute("xlink:href", "http://google.com");
a_tag.setAttribute("text", "google");
contentNode.appendChild(a_tag);
node.appendChild(contentNode);
しかし、機能していません
テキストを追加するには、テキストtext
を表示する方法を理解する必要がありますが、リンク効果はありません
var contentNode = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
// Set the attributes and create the text
contentNode.setAttribute("x", 200);
contentNode.setAttribute("fill", color);
var a_tag = document.createElementNS("http://www.w3.org/2000/svg", "a");
a_tag.setAttribute("xlink:href", "http://google.com");
a_tag.appendChild(document.createTextNode("google"));
contentNode.appendChild(a_tag);
// Add the name to the text node
node.appendChild(contentNode);