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）中的超链接未显示

回答

相关问题