如何用JavaScript/JQuery实现SVG文本溢出时显示省略号与Tooltip

我来帮你搞定这个需求！要实现SVG里<text>标签文本超出宽度时自动截断加省略号，同时hover显示完整文本的tooltip，用纯JavaScript或者jQuery都能做到，核心思路是计算文本实际宽度，判断是否超出后截断，再利用原生title属性实现tooltip。下面是具体的实现方案：

核心逻辑说明 #

1. 获取SVG和目标<text>元素，以及SVG的宽度（从你的viewbox来看是36）。
2. 用SVG原生的getBBox()方法获取文本的实际渲染宽度，这个方法比HTML的宽度计算更适配SVG坐标系统。
3. 如果文本宽度超出SVG限制，逐步截断文本直到符合宽度要求，末尾加上省略号。
4. 给<text>元素添加title属性，值为原始完整文本，这样hover时浏览器会自动显示原生tooltip。

纯JavaScript实现代码 #

// 获取目标SVG和text元素
const targetSvg = document.querySelector('.circular-chart.green');
const textElement = targetSvg.querySelector('text');
const maxAllowedWidth = 36; // 对应SVG viewbox的宽度
const originalFullText = textElement.textContent.trim();

// 工具函数：获取文本的实际渲染宽度
function getTextRenderWidth(textEl) {
  return textEl.getBBox().width;
}

// 核心函数：截断文本并设置tooltip
function truncateAndSetTooltip(textEl, maxWidth, originalText) {
  let truncatedText = originalText;
  // 先还原文本，确保计算的是原始内容的宽度
  textEl.textContent = truncatedText;

  // 如果文本宽度没超出，直接移除tooltip（如果之前存在的话）
  if (getTextRenderWidth(textEl) <= maxWidth) {
    textEl.removeAttribute('title');
    return;
  }

  // 逐步截断文本，直到宽度符合要求
  while (getTextRenderWidth(textEl) > maxWidth && truncatedText.length > 0) {
    truncatedText = truncatedText.slice(0, -1);
    textEl.textContent = truncatedText + '...';
  }

  // 添加原生tooltip
  textElement.setAttribute('title', originalFullText);
}

// 执行逻辑
truncateAndSetTooltip(textElement, maxAllowedWidth, originalFullText);

jQuery实现代码 #

如果你习惯用jQuery，下面是等价的实现：

$(function() {
  const $targetSvg = $('.circular-chart.green');
  const $textElement = $targetSvg.find('text');
  const maxAllowedWidth = 36;
  const originalFullText = $textElement.text().trim();

  function getTextRenderWidth($textEl) {
    return $textEl[0].getBBox().width;
  }

  function truncateAndSetTooltip($textEl, maxWidth, originalText) {
    let truncatedText = originalText;
    $textEl.text(truncatedText);

    if (getTextRenderWidth($textEl) <= maxWidth) {
      $textEl.removeAttr('title');
      return;
    }

    while (getTextRenderWidth($textEl) > maxWidth && truncatedText.length > 0) {
      truncatedText = truncatedText.slice(0, -1);
      $textEl.text(truncatedText + '...');
    }

    $textEl.attr('title', originalFullText);
  }

  truncateAndSetTooltip($textElement, maxAllowedWidth, originalFullText);
});

注意事项 #

• getBBox()的可靠性：这个方法是SVG元素的原生API，能准确获取文本的边界框，不会受CSS样式的干扰，是计算SVG文本宽度的最佳选择。
• 文本对齐的影响：如果你的<text>设置了text-anchor: middle（比如你的示例里x="18"，大概率是居中对齐），文本的总宽度不能超过SVG的36宽度，否则左右都会超出边界，我们的代码已经考虑了这种情况。
• 动态文本处理：如果文本内容会动态更新，记得在内容变化后重新调用truncateAndSetTooltip函数。
• 自定义Tooltip：如果你觉得原生tooltip样式不够美观，可以把title属性换成在<text>内部嵌套<title>元素（<text><title>完整文本</title>截断文本...</text>），效果是一样的；或者用HTML元素实现自定义样式的tooltip，但需要额外处理定位逻辑。

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