Как добавить гиперссылки в текст в SVG с помощью Javascript?

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>