中的超链接未显示

中的超链接未显示

关注
发信
关注(28)粉丝(399)

tspan（SVG）中的超链接未显示

本文介绍了tspan（SVG）中的超链接未显示的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

使用Javascript将聊天消息与tspan结合使用。

原文：此函数为svg中的每个项目添加名称和内容文本到$ tspan 

  function showMessage（nameStr，contentStr，color）{
 
 var node = document.getElementById（chattext）; 
 //创建名称文本
 var nameNode = document.createElementNS（http://www.w3.org/2000/svg，tspan）; 
 
 //设置属性并创建文本
 nameNode.setAttribute（x，100）; 
 nameNode.setAttribute（dy，20）; 
 nameNode.setAttribute（fill，color）; 
 nameNode.appendChild（document.createTextNode（nameStr））; 
 
 //将名称添加到文本节点
 node.appendChild（nameNode）; 
 
 //创建分数文本
 var contentNode = document.createElementNS（http://www.w3.org/2000/svg，tspan）; 
 
 //设置属性并创建文本
 contentNode.setAttribute（x，200）; 
 contentNode.setAttribute（fill，color）; 
 
 contentNode.appendChild（document.createTextNode（contentStr））; 
 
 //将名称添加到文本节点
 node.appendChild（contentNode）; 
}

现在想显示超链接，就像html一样。 / p>

idea： 

  var contentNode = document.createElementNS（http： //www.w3.org/2000/svg，tspan）; 
 
 //设置属性并创建文本
 contentNode.setAttribute（x，200）; 
 contentNode.setAttribute（fill，color）; 
 
 //在tspan中设置锚标签
 var a_tag = document.createElement（a）; 
_tag.setAttribute（xlink：href，http://google.com）; 
 a_tag.setAttribute（text，google）; 
 
 contentNode.appendChild（a_tag）; 
 node.appendChild（contentNode）;

P.s。搜索网址将在稍后执行。

在此阶段，重点展示tspan内的超链接

示例网站仅用于测试



已检查在< tspan> 内似乎< a> 是可以的


任何人都可以给出建议，为什么这不起作用？

完整的课程代码：





感谢Robert Longson的意见，新的idea： 

  var contentNode = document.createElementNS（http://www.w3.org/2000/svg， TSPAN）; 
 
 //设置属性并创建文本
 contentNode.setAttribute（x，200）; 
 contentNode.setAttribute（fill，color）; 
 
 //在tspan中设置锚标签
 var a_tag = document.createElementNS（http://www.w3.org/2000/svg，a）; 
_tag.setAttribute（xlink：href，http://google.com）; 
 a_tag.setAttribute（text，google）; 
 
 contentNode.appendChild（a_tag）; 
 node.appendChild（contentNode）;

但无效



添加文字不应该使用文字

找出如何显示文字但无连结效果

  var contentNode = document.createElementNS（http://www.w3.org/2000/svg，tspan）; 
 
 //设置属性并创建文本
 contentNode.setAttribute（x，200）; 
 contentNode.setAttribute（fill，color）; 
 
 var a_tag = document.createElementNS（http://www.w3.org/2000/svg，a）; 
_tag.setAttribute（xlink：href，http://google.com）; 
 a_tag.appendChild（document.createTextNode（google））; 
 
 contentNode.appendChild（a_tag）; 
 
 
 //将名称添加到文本节点
 node.appendChild（contentNode）;


解决方案

有各种问题：


  • a元素必须在SVG命名空间中创建

  • xlink：href属性必须在xlink命名空间中创建

  • 链接内容是链接的文本内容，而不是属性。



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

  var contentNode = document.createElementNS（http://www.w3.org/2000/svg ，tspan）; 
 
 //设置属性并创建文本
 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）; 
 
 
 //将名称添加到文本节点
 node.appendChild（contentNode）;


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);
解决方案

There are various issues:

  • the a element must be created in the SVG namespace
  • the xlink:href attribute must be created in the xlink namespace
  • the link content is the text content of the link and not an attribute

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

这篇关于tspan（SVG）中的超链接未显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

09-02 05:25
Powered by LMLPHP ©2024 中的超链接未显示 0.035288