[英]hyperlink in tspan (SVG) not shown
working on Javascript to chatroom message with tspan. 使用tspan与Java聊天室消息。
Original: this function add name and content text to tspan for each of the items in svg 原始:此功能为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);
}
Now would like to show hyperlink that is like html(clickable with style) 现在想显示类似于html(带有样式的clickable)的超链接
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);
Ps search URL will be implemented later. PS搜索URL将在以后实现。
at this stage, focusing on showing hyperlink inside tspan 在此阶段,重点是在tspan中显示超链接
example website for testing only 仅用于测试的示例网站
checked https://www.w3.org/TR/SVG/text.html#TSpanElement that it seems <a>
inside <tspan>
is ok 检查https://www.w3.org/TR/SVG/text.html#TSpanElement在
<tspan>
内的<a>
似乎可以
Can anyone give suggestion why this don't work? 任何人都可以提出建议,为什么这不起作用?
full sourse code: 完整的源代码:
https://www.sendspace.com/file/2xhpk8 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
添加文字不应该使用
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: 存在各种问题:
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);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.