html - 是否可以增强 svg 标题工具提示的默认外观

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);

但无论我插入什么作为标题的文本内容，它都只是呈现为一个字符串。

有什么方法可以设置默认工具提示的样式吗？也欢迎在不使用任何插件的情况下在 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 hover 让它出现和消失:

#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> 中阻止并在不同的对象中重用它。