是否可以增强svg title工具提示的默认外观 [英] Is it possible to enhance the default appearance of svg title tooltip

问题描述

我想通过js或css等任何方式更改svg元素（标题）中工具提示的默认外观。

I would like to change the default appearance of tooltip in svg elements (title) by any means such as js or css.

我甚至试过这样的东西：

I even tried stuff like this:

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，它都只是呈现为字符串。

but regardless of whatever i insert as the textContent of title, its simply rendered as a string.

有没有办法设置默认工具提示的样式？在不使用任何插件的情况下在svg中创建工具提示的其他简单直接的替代方案也是受欢迎的...

Is there any way to style the default tooltip? Other simple and straightforward alternatives for creating tooltips in svg without using any plugins are also welcome...

推荐答案

您可以尝试这样做： 如何更改标题属性的样式在锚标记内？。我没有测试它，所以我真的不知道它是否有效。

You could try this: How to change the style of Title attribute inside the anchor tag?. I didn't test it, so I don't really know if it works.

但是既然你使用SVG，你可以做得更好，因为你可以画画任何颜色和形状的工具提示，甚至是动画。由于您使用脚本动态生成它，因此您可以根据内容计算大小并相应地更改高度和宽度。

But since you are using SVG, you can do better than that since you can draw tooltips with any color and shape, even animated. Since you are generating it dynamically with a script, you can calculate the size based on the content and alter the height and width accordingly.

以下是使用工具提示的示例SVG中的圆角矩形：

Here is an example of a tooltip using a rounded rectangle in 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悬停使其显示和消失：

I used CSS hover to make it appear and disappear:

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

You can also store your tooltips in a <defs> block and reuse it in different objects.

这篇关于是否可以增强svg title工具提示的默认外观的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！