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元素内工作，除了<svg width="500" height="500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">的默认名称空间外，还应设置XLink命名空间：

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>

npm run start

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

1 个答案: