是否可以增强svg title工具提示的默认外观

Question

我想通过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中创建工具提示的其他简单直接的替代方案也是受欢迎的......

Answer 1

你可以试试这个：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>块中，并在不同的对象中重复使用。