我想通过js或css等任何方式更改svg元素(标题)中工具提示的默认外观.
我甚至试过这样的东西：
var title = document.createElementNS('http://www.w3.org/2000/svg','title');
title.textContent='<foreignObject width="100" height="50" requiredExtensions="http://www.w3.org/1999/xhtml"><div style="background:blue;">'+arr[j].ypos+'</div><foreignObject>';
rect.appendChild(title);
但无论我插入什么作为标题的textContent,它只是呈现为一个字符串.
有没有办法设置默认工具提示的样式？在不使用任何插件的情况下,在svg中创建工具提示的其他简单直接的替代方案也是受欢迎的……
解决方法
你可以尝试这个：
How to change the style of Title attribute inside the anchor tag?.我没有测试它,所以我真的不知道它是否有效.
但是由于你使用SVG,你可以做得更好,因为你可以绘制任何颜色和形状的工具提示,甚至是动画.由于您使用脚本动态生成它,因此可以根据内容计算大小并相应地更改高度和宽度.
以下是在SVG中使用圆角矩形的工具提示示例：
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
<g id="component">
<rect id="content" width="50" height="50">
</rect>
<g class="tooltip" transform="translate(20,20)" opacity="0.9">
<rect rx="5" width="100" height="25"></rect>
<text x="15" y="16">Hello</text>
</g>
</g>
</svg>
我使用CSS悬停使其显示和消失：
#component .tooltip {visibility: hidden}
#component:hover .tooltip {
visibility: visible;
}
.tooltip text {
fill: black;
font-size: 12px;
font-family: sans-serif;
}
.tooltip rect {
fill: yellow;
stroke: blue;
}
你可以在JSFiddle中试验它.
您还可以将工具提示存储在< defs>中.阻止并在不同的对象中重用它.
