未显示 tspan (SVG) 中的超链接答案

【问题标题】：hyperlink in tspan (SVG) not shown未显示 tspan (SVG) 中的超链接
【发布时间】：2016-11-19 09:43:09
【问题描述】：

使用 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);

附：搜索网址将在稍后实施。
现阶段，重点展示tspan里面的超链接
仅用于测试的示例网站

检查https://www.w3.org/TR/SVG/text.html#TSpanElement 似乎<a> 在<tspan> 内是好的
谁能给出建议为什么这不起作用？

完整源代码：
https://www.sendspace.com/file/2xhpk8

感谢罗伯特朗森的意见，新想法：

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

【问题讨论】：

标签： javascript html svg hyperlink tspan

【解决方案1】：

有各种各样的问题：

必须在 SVG 命名空间中创建 a 元素
必须在 xlink 命名空间中创建 xlink:href 属性
链接内容是链接的文本内容，不是属性

最后你应该得到这样的东西：

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

【讨论】：