通过JS添加到SVG路径的title元素无法显示问题求助

我按照MDN文档给SVG路径添加title元素：直接在HTML中嵌入时，hover能正常显示提示，代码示例如下：

<path id="europe-it"
                    d="M953.57,455.54c-1.05,1.94-5.63,3.56-.7,4.53-4.57,2.59,4.92,6.47,.7,7.76,.35-5.82-16.52,1.94-14.77,4.53,2.46,7.44-1.05,16.17,13.36,21.02,2.11,14.55,15.47,19.4,25.67,22.31-8.09,8.41,29.88,10.02,21.8,23.28-3.87-3.56-6.68-5.5-11.6-8.08-20.39,16.17,14.41,1.94-11.25,29.75-11.95,2.26,10.9-15.52-6.68-24.58-3.87-.65-4.22-2.91-4.92-5.82-.7-3.23-7.73,1.62-4.57-1.94-5.27-.97-4.92-6.47-10.9-6.47-9.49,.97-13.36-13.58-22.15-13.9-8.44-14.87-12.66-34.28-35.51-16.82,5.98-7.44-11.6-3.56-4.57-11.96-9.49-7.76,4.22-3.88,0-10.02-8.44-9.05,12.66-1.94,10.55-10.02,4.57-4.2,2.11-.32,5.27,1.94,2.46-.65,1.76,5.17,3.87,2.91-.7-2.26,2.11-7.76,3.87-8.08,.7,4.2,2.46,1.62,4.92,1.62,1.41,3.23,2.81,.65,1.05-.97,.7-4.2,4.57,.97,3.87-5.5,5.63,2.91,7.03-2.91,13.01-1.62,5.27-1.94,9.14,7.44,19.69,6.14h0Zm-11.95,33.62c1.41-2.91-2.46,0,0,0h0Zm-.35,24.58-20.04-11.64c.7,.65,0,1.29,.35,1.94-3.52-1.29-3.87-.65-.35-1.94Zm-7.73,23.93c2.11,5.5,1.05,15.2-1.41,20.7-4.92-3.88-6.33,8.08-10.55-.65,1.41-7.76-.35-12.29-1.76-20.05,5.98,3.23,11.25-10.35,13.71,0h0Zm-13.36-1.94c-1.05,1.62-.7-.65,.35-.97,.7,.32,0,.65-.35,.97Zm55.9,4.2c-.7,.32-1.05-.32-.7-.65,.35,0,1.41,0,.7,.65Zm-53.79,19.08l-.7,1.29c-.7-.97-.7-2.59,.7-1.29Zm69.97,10.02c-9.14,18.76,1.76,22.64-23.91,8.41-16.52-4.85-.7-9.7,7.73-6.14,4.92,.97,14.77-4.53,16.17-2.26h.01Zm-34.81,16.48c-2.11,.32-.35-2.26,0,0h0Z"
                    style="fill: #fff; stroke: #000; stroke-miterlimit: 10;">
                    <title>Click to reposition pin</title>
                </path>

这种方式下hover能正常显示提示。

但通过JavaScript动态追加title元素后，尽管DOM中能看到元素已存在，hover时却无法显示提示，JS代码示例如下：

const title = document.createElement('title');
title.innerHTML = 'Click to reposition pin';
evt.target.appendChild(title);

完整示例代码：

const button = document.querySelector("button");
button.addEventListener("click", () => {
  const title = document.createElement('title');
  title.innerHTML = 'Click to reposition pin';
  document.getElementById("circle").appendChild(title);
})

<!DOCTYPE html>
<html>
<head>
<title>Append title</title>
</head>
<body>
<svg id="circle" height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /> 
</svg>
<button style="position:absolute; left:25px; top: 125px;" class="button">
Add Title
</button>
</body>
</html>

请问有解决建议吗？

问题出在创建SVG元素的方式上：SVG的<title>属于SVG命名空间，不能用普通的document.createElement()创建，必须使用document.createElementNS()并指定SVG的命名空间http://www.w3.org/2000/svg。

修改后的JS代码如下：

const button = document.querySelector("button");
button.addEventListener("click", () => {
  // 使用SVG命名空间创建title元素
  const title = document.createElementNS('http://www.w3.org/2000/svg', 'title');
  title.textContent = 'Click to reposition pin';
  document.getElementById("circle").appendChild(title);
})

原因解释 #

HTML和SVG属于不同的XML命名空间，普通的createElement()会创建HTML命名空间下的<title>元素（和页面头部的<title>同属一类），而SVG需要的是SVG命名空间下的<title>，浏览器才会将其识别为SVG的提示文本。替换成createElementNS()后，创建的元素属于SVG命名空间，hover时就能正常显示提示了。

内容的提问来源于stack exchange，提问作者yano1978