将工具提示添加到< rect>？的最佳解决方案是什么？
我创建了几个< rect>的SVG地图标签,我想在鼠标悬停时显示工具提示.使用title属性很好但有没有选项如何使用CSS / Javascript / jQuery重新设置它还是有更好的选项来添加工具提示？
<svg version="1.1" baseProfile="basic" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 50 50" xml:space="preserve"> <g> <rect id="1" title="There's some text" x="0" y="0" fill="#666666" width="20" height="20"/> <rect id="2" title="There's another text" x="30" y="0" fill="#666666" width="20" height="20"/> </g> </svg>
解决方法
SVG使用标题元素,而不是属性,但你不能设置它们的样式.如果您需要样式化,则需要动态创建标题作为< text>元素并使用javascript将其放置在正确的位置.
这是默认工具提示的样子……
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 50 50" xml:space="preserve"> <g> <rect id="1" fill="#666666" width="20" height="20"> <title>There's some text</title> </rect> <rect id="2" x="30" fill="#666666" width="20" height="20"> <title>There's another text</title> </rect> </g> </svg>
