tspan（SVG）中的超鏈接未顯示

在Javascript上使用tspan聊天消息。
原文：此功能添加名稱和內容的文字在SVG到TSPAN每個項目的tspan（SVG）中的超鏈接未顯示

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搜索網址將在稍後實施。
在這個階段，重點展示超級鏈接TSPAN
例如網站內僅

測試檢查https://www.w3.org/TR/SVG/text.html#TSpanElement，它似乎<a>內<tspan>是確定
誰能給建議，爲什麼這不工作？

全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);

來源

2016-07-16 john

有各種問題：

的必須在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);

來源

2016-07-16 09:51:26

tspan（SVG）中的超鏈接未顯示

回答

相關問題