如何在使用Javascript的SVG文本中添加超鏈接？

Question

我認爲，當一個用戶發送一條消息，包括一個http://這裏我的代碼會工作，但不會：

function showMessage(nameStr, contentStr, textColor) { 

    var node = document.getElementById("chatbox"); 
    var nameNode = document.createElementNS("http://www.w3.org/2000/svg", "tspan", textColor); 

    nameNode.setAttribute("x", 100); 
    nameNode.setAttribute("dy", 20); 
    nameNode.setAttribute("fill", textColor); 
    nameNode.appendChild(document.createTextNode(nameStr)); 

    node.appendChild(nameNode); 

    var contentNode = document.createElementNS("http://www.w3.org/2000/svg", "tspan"); 

    contentStr = contentStr.replace(/((http|https|ftp|ftps)\:\/\/[a-zA-Z0-9\-\.]+\.[a-zA-Z]{2,3}(\/\S*)?)/g, 
     '<a target="blank" href="$1">$1</a>'); 

    contentNode.setAttribute("x", 200); 
    contentNode.setAttribute("fill", textColor); 
    contentNode.innerHTML = contentStr; 

    // Add the name to the text node 
    node.appendChild(contentNode); 
} 

任何人都可以找到這段代碼中的錯誤？

• nameStr是發送消息的人的姓名，
• contentStr是用戶輸入，並且該程序會自動改變，因此任何鏈接變成可點擊的鏈接，並
• textColor只是顏色的消息。

Answer 1

爲了使超鏈接的svg元素在裏面工作，你應該建立XLink命名空間，除了默認的一個svg：

<svg width="500" height="500" 
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"> 

然後你可以使用xlink:href屬性：

<a xlink:href="http://www.example.com">click here</a> 

綜合以下片段：

function showMessage(nameStr, contentStr, textColor) { 
 

 
    var node = document.getElementById("chatbox"); 
 
    var nameNode = document.createElementNS("http://www.w3.org/2000/svg", "tspan", textColor); 
 

 
    nameNode.setAttribute("x", 100); 
 
    nameNode.setAttribute("dy", 20); 
 
    nameNode.setAttribute("fill", textColor); 
 
    nameNode.appendChild(document.createTextNode(nameStr)); 
 

 
    node.appendChild(nameNode); 
 

 
    var contentNode = document.createElementNS("http://www.w3.org/2000/svg", "tspan"); 
 

 
    contentStr = contentStr.replace(/((http|https|ftp|ftps)\:\/\/[a-zA-Z0-9\-\.]+\.[a-zA-Z]{2,3}(\/\S*)?)/g, 
 
     '<a fill="purple" target="blank" xlink:href="$1">$1</a>'); // "xlink:" added! 
 

 
    contentNode.setAttribute("x", 200); 
 
    contentNode.setAttribute("fill", textColor); 
 
    contentNode.innerHTML = contentStr; 
 

 
    // Add the name to the text node 
 
    node.appendChild(contentNode); 
 
} 
 
// Sample call: 
 
showMessage('John Doe', 'click this http://www.example.com', 'blue');

a { 
 
    text-decoration: underline; 
 
}

<svg width="500" height="500" 
 
    xmlns="http://www.w3.org/2000/svg" 
 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
 
    version="1.1"> 
 

 
<text id="chatbox"></text> 
 

 
</svg>