您是否可以仅使用SVG
<title>元素及其传达的默认浏览器渲染?(注:这是不一样的
title,你可以上使用属性DIV / IMG /跨度在HTML,它需要一个子元素命名
title)
rect { width: 100%; height: 100%; fill: #69c; stroke: #069; stroke-width: 5px; opacity: 0.5}<p>Mouseover the rect to see the tooltip on supporting browsers.</p><svg xmlns="http://www.w3.org/2000/svg"> <rect> <title>Hello, World!</title> </rect></svg>
另外,如果您确实想在SVG中显示HTML,则可以直接嵌入HTML:
rect { width: 100%; height: 100%; fill: #69c; stroke: #069; stroke-width: 5px; opacity: 0.5}foreignObject { width: 100%;}svg div { text-align: center; line-height: 150px;}<svg xmlns="http://www.w3.org/2000/svg"> <rect/> <foreignObject> <body xmlns="http://www.w3.org/1999/xhtml"> <div> Hello, <b>World</b>! </div> </body> </foreignObject></svg>
…但是然后您需要JS来打开和关闭显示。如上所示,使标签出现在正确位置的一种方法是将rect和HTML包裹在相同的
要使用JS查找SVG元素在屏幕上的位置,可以使用getBoundingClientRect(),



