如何在Batik生成的SVG中实现类工具提示的悬停功能？

完全可行，针对你的需求，有两种实用方案，分别适配不同场景：

方案1：使用SVG原生<title>元素（最简单） #

SVG原生支持通过<title>元素实现基础悬停提示，无需额外CSS或JS，浏览器会默认渲染样式，后端生成成本极低。

Java代码示例（基于Batik API） #

import org.w3c.dom.Document;
import org.w3c.dom.Element;
import org.apache.batik.dom.svg.SVGDOMImplementation;

public class SvgBasicTooltip {
    private static final String SVG_NAMESPACE_URI = SVGDOMImplementation.SVG_NAMESPACE_URI;

    public static void main(String[] args) {
        // 初始化SVG文档
        SVGDOMImplementation impl = (SVGDOMImplementation) SVGDOMImplementation.getDOMImplementation();
        Document doc = impl.createDocument(SVG_NAMESPACE_URI, "svg", null);
        Element svgRoot = doc.getDocumentElement();
        svgRoot.setAttribute("width", "200");
        svgRoot.setAttribute("height", "100");

        // 创建矩形元素
        Element rect = doc.createElementNS(SVG_NAMESPACE_URI, "rect");
        rect.setAttribute("x", "10");
        rect.setAttribute("y", "10");
        rect.setAttribute("width", "100");
        rect.setAttribute("height", "50");
        rect.setAttribute("fill", "#4285F4");

        // 添加原生提示title元素
        Element title = doc.createElementNS(SVG_NAMESPACE_URI, "title");
        title.setTextContent("服务器节点\nCPU使用率: 75%\n内存使用率: 62%");
        rect.appendChild(title);

        svgRoot.appendChild(rect);
    }
}

优势：零额外依赖，兼容性拉满，后端实现简单，适合快速添加基础提示信息。

方案2：CSS+自定义元素实现样式可控的提示 #

如果需要自定义提示的外观（比如背景色、字体、布局），可以通过在SVG中嵌入CSS和关联元素实现，后端生成时直接把样式和元素写入SVG即可。

Java代码示例（自定义样式提示） #

import org.w3c.dom.Document;
import org.w3c.dom.Element;
import org.apache.batik.dom.svg.SVGDOMImplementation;

public class CustomSvgTooltip {
    private static final String SVG_NAMESPACE_URI = SVGDOMImplementation.SVG_NAMESPACE_URI;
    private static final String XHTML_NAMESPACE_URI = "http://www.w3.org/1999/xhtml";

    public static void main(String[] args) {
        SVGDOMImplementation impl = (SVGDOMImplementation) SVGDOMImplementation.getDOMImplementation();
        Document doc = impl.createDocument(SVG_NAMESPACE_URI, "svg", null);
        Element svgRoot = doc.getDocumentElement();
        svgRoot.setAttribute("width", "300");
        svgRoot.setAttribute("height", "150");
        svgRoot.setAttribute("style", "position: relative;");

        // 嵌入CSS样式
        Element style = doc.createElementNS(SVG_NAMESPACE_URI, "style");
        style.setTextContent("""
            .tooltip-trigger {
                cursor: pointer;
                transition: fill 0.2s;
            }
            .tooltip-trigger:hover {
                fill: #3367D6;
            }
            .tooltip-box {
                visibility: hidden;
                position: absolute;
                background: #2D2D2D;
                color: #FFFFFF;
                padding: 10px;
                border-radius: 6px;
                font-size: 13px;
                font-family: sans-serif;
                pointer-events: none;
                white-space: pre-line;
            }
            .tooltip-trigger:hover + .tooltip-box {
                visibility: visible;
            }
        """);
        svgRoot.appendChild(style);

        // 创建包含矩形和提示的组元素
        Element group = doc.createElementNS(SVG_NAMESPACE_URI, "g");

        // 矩形触发元素
        Element rect = doc.createElementNS(SVG_NAMESPACE_URI, "rect");
        rect.setAttribute("x", "10");
        rect.setAttribute("y", "10");
        rect.setAttribute("width", "120");
        rect.setAttribute("height", "60");
        rect.setAttribute("fill", "#4285F4");
        rect.setAttribute("class", "tooltip-trigger");
        group.appendChild(rect);

        // 自定义提示框（用foreignObject嵌入HTML支持更丰富样式）
        Element foreignObj = doc.createElementNS(SVG_NAMESPACE_URI, "foreignObject");
        foreignObj.setAttribute("class", "tooltip-box");
        foreignObj.setAttribute("x", "140");
        foreignObj.setAttribute("y", "10");
        foreignObj.setAttribute("width", "150");
        foreignObj.setAttribute("height", "80");

        Element htmlDiv = doc.createElementNS(XHTML_NAMESPACE_URI, "div");
        htmlDiv.setTextContent("服务器节点详情\nCPU: 75%\n内存: 62%\n磁盘: 48%");
        foreignObj.appendChild(htmlDiv);

        group.appendChild(foreignObj);
        svgRoot.appendChild(group);
    }
}

注意事项：

• 若使用Batik自带的SVGViewer查看生成的SVG，需确保启用脚本支持（默认可能禁用，可通过配置调整）；如果是在浏览器中打开，无需额外配置。
• 自定义提示的位置可以通过调整元素的x/y属性或CSS的position属性优化。

内容的提问来源于stack exchange，提问作者Sjaak