标题 HTML 元素通过 JS 附加到 SVG 路径未显示
[英]Title HTML elements appended to an SVG path via JS not showing
问题描述
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
我正在尝试根据此处的文档 SVG 路径添加标题https://developer.mozilla.org/en-US/docs/Web/SVG/Element/title
If I add it normally, on hover it's showing as expected.如果我正常添加它，在 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>
However, if I append it via JS, even if I can see it's physically there, it's not not showing.但是，如果我通过 JS append 它，即使我可以看到它实际存在，它也不会不显示。
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>
Any suggestion?有什么建议吗？
2 个解决方案
解决方案1
0 已采纳 2022-12-07 10:50:09
SVG elements must be created in the SVG namespace with createElementNS, you've actually created a HTML title element.必须使用 createElementNS 在 SVG 命名空间中创建 SVG 元素，您实际上已经创建了一个 HTML title 元素。
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;" class="button"> Add Title </button> </body> </html>
解决方案2
-2 2022-12-07 09:42:15
The element provides an accessible, short-text description of any SVG container element or graphics element.该元素提供任何 SVG 容器元素或图形元素的可访问的简短文本描述。
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.如果元素可以用可见文本描述，建议使用 aria-labelledby 属性引用该文本，而不是使用该元素。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.