Title HTML elements appended to an SVG path via JS not showing-CodePudding

I am trying to add a title to an SVG path as per documentation here https://developer.mozilla.org/en-US/docs/Web/SVG/Element/title

If I add it normally, on hover it's showing as expected.

<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>

path-title-2-ok

However, if I append it via JS, even if I can see it's physically there, it's not not showing.

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;" >
Add Title
</button>
</body>
</html>

Any suggestion?

CodePudding user response：

SVG elements must be created in the SVG namespace with createElementNS, you've actually created a HTML title element.

const button = document.querySelector("button");
button.addEventListener("click", () => {
  const title = document.createElementNS('http://www.w3.org/2000/svg', 'title');
  title.textContent = '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;" >
Add Title
</button>
</body>
</html>

CodePudding user response：

The element provides an accessible, short-text description of any SVG container element or graphics element.

Text in a element is not rendered as part of the graphic, but browsers usually display it as a tooltip. If an element can be described by visible text, it is recommended to reference that text with an aria-labelledby attribute rather than using the element.