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);
答
有各种问题:
- 的必须在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);