是否可以增强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

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

但是，由于您使用的是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悬停使它出现和消失：

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

您可以在此JSFiddle中进行试验。

您还可以将工具提示存储在一个<defs>块中，并在不同的对象中重复使用。