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

var title = document.createElementNS('@R_772_10107@://www.w3.org/2000/svg','title');
title.textContent='<foreignObject width="100" height="50" requiredExtensions="@R_772_10107@://www.w3.org/1999/xhtml"><div style="BACkground:blue;">'+arr[j].ypos+'</div><foreignObject>';
rect.appendChild(titlE);

你可以尝试这个： How to change the style of Title attribute inside the anchor tag?.我没有测试它,所以我真的不知道它是否有效.

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

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

<svg xmlns="@R_772_10107@://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>中.阻止并在不同的对象中重用它.