javascripthtmlsvghyperlinktspan

hyperlink in tspan (SVG) not shown


working on Javascript to chatroom message with tspan.
Original: this function add name and content text to tspan for each of the items in 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);
    }

Now would like to show hyperlink that is like html(clickable with style)

idea:

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

P.s. search URL will be implemented later.
at this stage, focusing on showing hyperlink inside tspan
example website for testing only

checked https://www.w3.org/TR/SVG/text.html#TSpanElement that it seems <a> inside <tspan> is ok
Can anyone give suggestion why this don't work?

full sourse code:
https://www.sendspace.com/file/2xhpk8


thanks Robert Longson's input, new idea:

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

But is not working


adding text should not using text
figure out how to show text but no link effect

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

Solution

  • There are various issues:

    Finally you should get something like this:

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