如何为Inkscape制作的SVG添加悬停Tooltip交互？

方案1：纯SVG原生Tooltip（零代码，Inkscape内完成） #

这是最简单的实现方式，依赖浏览器原生支持：

• 打开SVG文件，选中需要添加Tooltip的分组元素（<g>）
• 按下Shift+Ctrl+O打开对象属性面板，在“描述”或“工具提示”输入框中填写要显示的内容
• 保存SVG后，该分组会自动包含<title>子元素，浏览器中悬停时会显示默认样式的Tooltip
• 局限：样式由浏览器决定，无法自定义

方案2：简单JS实现自定义样式Tooltip #

如果需要自定义Tooltip的外观和行为，用以下极简JS方案：

1. 添加Tooltip容器：在SVG代码的末尾（</svg>标签前）插入用于显示Tooltip的图形元素，默认隐藏：

<g id="custom-tooltip" style="display:none; pointer-events:none;">
  <!-- Tooltip背景框 -->
  <rect rx="4" ry="4" fill="#2d3748" opacity="0.9" />
  <!-- Tooltip文本 -->
  <text id="tooltip-text" fill="#ffffff" font-size="14px" font-family="sans-serif" dy="1.2em" x="8" />
</g>

2. 标记触发元素：给所有需要触发Tooltip的分组添加类名和自定义属性，存储Tooltip内容：

<g class="tooltip-group" data-tooltip="分组A：用户转化率 65% | 点击量 1234">
  <!-- 你的分组内容，比如柱状图、文本等 -->
</g>

3. 添加交互JS：同样在</svg>标签前插入这段JS代码：

<script type="text/javascript">
  const tooltip = document.getElementById('custom-tooltip');
  const tooltipText = document.getElementById('tooltip-text');
  const tooltipRect = tooltip.querySelector('rect');
  const triggerGroups = document.querySelectorAll('.tooltip-group');

  triggerGroups.forEach(group => {
    // 鼠标移入显示Tooltip
    group.addEventListener('mouseover', (e) => {
      const tipContent = group.getAttribute('data-tooltip');
      tooltipText.textContent = tipContent;
      
      // 根据文本长度调整背景框大小
      const textBBox = tooltipText.getBBox();
      tooltipRect.setAttribute('width', textBBox.width + 16); // 左右内边距
      tooltipRect.setAttribute('height', textBBox.height + 12); // 上下内边距
      
      // 定位到鼠标偏移位置
      tooltip.setAttribute('transform', `translate(${e.clientX + 15}, ${e.clientY + 15})`);
      tooltip.style.display = 'block';
    });

    // 鼠标移出隐藏Tooltip
    group.addEventListener('mouseout', () => {
      tooltip.style.display = 'none';
    });

    // 鼠标移动时Tooltip跟随（可选）
    group.addEventListener('mousemove', (e) => {
      tooltip.setAttribute('transform', `translate(${e.clientX + 15}, ${e.clientY + 15})`);
    });
  });
</script>

4. 嵌入网站注意：不能用<img>标签嵌入SVG（会屏蔽JS），需用<object data="your-chart.svg" type="image/svg+xml"></object>或直接把SVG代码写入HTML中。

方案3：Inkscape扩展插件辅助 #

如果你完全不想手动写代码，可以安装Inkscape的第三方扩展（比如SVG Tooltip Editor），这类插件提供可视化界面，只需选中分组、输入Tooltip内容，就能自动生成所需的SVG元素和交互代码，适合非开发人员。

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