tspan（SVG）のハイパーリンクは表示されていません。

Question

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
例のウェブサイト内のハイパーリンクを示すに焦点を当てたこの段階で
は、唯一

が、これが動作しない理由を誰もが提案を与えることはでき<tspan>内部<a>はOK
であると思われることをhttps://www.w3.org/TR/SVG/text.html#TSpanElementを確認しましたか？

フルsourseコード：
https://www.sendspace.com/file/2xhpk8

---

感謝ロバート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); 

Answer 1

様々な問題があります。

• 要素がSVG名前空間
• のxlinkで作成する必要があります：href属性がなければなりませんxlink名前空間で作成された
• リンクのコンテンツはリンクのテキストコンテンツであり、属性ではありません。

最後に、次のようなものを入手してください：

 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.setAttributeNS("http://www.w3.org/1999/xlink", "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);