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

Question

使用tspan與Java聊天室消息。
原始：此功能為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（帶有樣式的clickable）的超鏈接

理念：

        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中顯示超鏈接
僅用於測試的示例網站

檢查https://www.w3.org/TR/SVG/text.html#TSpanElement在<tspan>內的<a>似乎可以
任何人都可以提出建議，為什么這不起作用？

完整的源代碼：
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);

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