React与SVG：优雅解决文本显隐与溢出省略难题

2025-05-06 19:04:41

妙用 SVG 与 React：优雅控制文本显隐与溢出省略

写 React 组件时，跟 SVG 打交道是常有的事。最近就碰上一个具体场景：在一个 SVG 的 <g> 元素里，我放了一个 <rect> 和一个 <text>。

<g>
  <rect x={x} y={y} width={width} height={height} />
  <text x={x + width / 2} y={y + height / 2 + 7} textAnchor="middle">
    {someText}
  </text>
</g>

需求是这样的：根据 <rect> 的 width 值，来决定那个 <text> 元素是显示还是隐藏。或者，如果文本内容比 width 给定的宽度还要宽，那就让文本表现得像 HTML 里的 overflow: ellipsis 那样，显示一部分，末尾加个省略号 "..."。

比方说，要是 width 是 100，但 <text> 渲染出来的实际宽度有 200，那我就希望只显示文本的前 50%，然后跟上 "..."。

翻了翻 MDN 文档和一些 SVG 的规范，好像没找到什么现成又直接的办法。那么，有没有什么既巧妙又高效的招数呢？

一、问题来了：SVG 文本框的“尺寸难题”

咱们平常在 HTML 里写 CSS，遇到文本溢出想显示省略号，一个 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 三件套基本就搞定了。简单直接，效果拔群。

但到了 SVG 这儿，事情就变得有点不一样。SVG 里的 <text> 元素，它可不像 HTML 元素那样有个方便的盒子模型和流式布局。它的特性更偏向于图形绘制。所以，上面提到的那些 CSS 属性，在 <text> 元素上很多时候并不生效，或者说，压根儿就没这些属性。

这就是问题的根源：SVG <text> 缺乏直接控制内容溢出的标准机制。

具体来说：

显隐控制： 根据宽度来控制显示或隐藏，这个相对还好办。只要能拿到文本实际渲染宽度和容器宽度，用 JavaScript 判断一下，再通过 React 的条件渲染或者改变样式就行。
溢出省略： 这个是老大难。SVG <text> 没有 text-overflow: ellipsis 这样的属性。textLength 和 lengthAdjust 属性可以缩放文本以适应给定长度，但那是缩放，不是截断加省略号。

所以，想实现这个效果，得自己动手，丰衣足食。

二、为啥 SVG 文本不像 HTML 那样听话？

简单来说，SVG (Scalable Vector Graphics) 设计初衷是用来矢量图形的，它跟像素无关，放大缩小不失真。文本在 SVG 里也被视为一种图形元素。它的定位、变形等操作都遵循图形变换的规则。

HTML (HyperText Markup Language) 则是为排版和展示文档内容而生。它的元素遵循一套“盒子模型”（Box Model），有内边距、外边距、边框这些概念，内容会在这个盒子里流动、换行、溢出。

几个关键点造成了这个差异：

布局机制不同： HTML 元素大多是流式布局，会自动撑开、换行。SVG 元素通常需要精确指定坐标 (x, y)。
CSS 属性支持度不同： 虽然 SVG 元素也能用一些 CSS，但它支持的 CSS 属性集和 HTML 元素不一样。特别是在文本布局这块，差异尤其明显。
文本测量： 在 HTML 中，浏览器渲染引擎会自动处理文本换行和溢出。在 SVG 里，如果你想知道一段文本到底占了多宽，你得主动去“问”它，通常用 JavaScript 的 getComputedTextLength() 或者 getBBox().width 方法。

理解了这个底层差异，咱们就能更好地针对性地想办法了。

三、见招拆招：三大方案帮你搞定

既然 SVG 本身不直接提供完美方案，咱们就得结合 JavaScript 和 React 的能力来曲线救国。这里提供几个思路，各有优劣。

方案一：简单粗暴——条件渲染 (纯显隐)

如果你的需求只是根据 <rect> 的 width 来决定 <text> 显示还是隐藏，并不要求省略号效果，那这个方案最简单。

原理和作用：

核心思路是：

在 React 组件中，获取到 <text> 元素实际渲染后的宽度。
将这个宽度与父级 <rect> 的 width 比较。
根据比较结果，决定是否渲染 <text> 元素。

代码示例 (React Hook)：

import React, { useRef, useState, useLayoutEffect } from 'react';

const SvgTextContainer = ({ x, y, width, height, someText }) => {
  const textRef = useRef(null);
  const [isTextVisible, setIsTextVisible] = useState(true); // 默认尝试显示

  useLayoutEffect(() => {
    if (textRef.current) {
      const textWidth = textRef.current.getComputedTextLength();
      if (textWidth > width) {
        setIsTextVisible(false);
      } else {
        setIsTextVisible(true);
      }
    }
  }, [width, someText]); // 当容器宽度或文本内容变化时，重新计算

  return (
    <g>
      <rect x={x} y={y} width={width} height={height} fill="lightblue" />
      {isTextVisible && (
        <text
          ref={textRef}
          x={x + width / 2}
          y={y + height / 2 + 7} // 简单垂直居中，+7 是个magic number，根据字体大小调整
          textAnchor="middle"
          dominantBaseline="middle" // 更好的垂直居中方式
          fill="black"
        >
          {someText}
        </text>
      )}
    </g>
  );
};

// 使用示例
// <SvgTextContainer x={10} y={10} width={100} height={30} someText="这是一个测试文本" />
// <SvgTextContainer x={10} y={50} width={50} height={30} someText="这是一个非常非常非常长的测试文本" />

操作步骤解释：

useRef : textRef 用来获取 <text> DOM 元素的引用。
useState : isTextVisible 状态用来控制 <text> 元素的渲染。
useLayoutEffect : 这个 Hook 在 DOM 更新之后，浏览器绘制之前同步执行。用它来做 DOM 测量可以避免页面闪烁。
- 它依赖 width (矩形宽度) 和 someText (文本内容)。当这两者变化时，回调函数会重新执行。
- textRef.current.getComputedTextLength(): 这是 SVG 元素的一个方法，能获取文本渲染后的实际宽度。
- 比较 textWidth 和 width，然后用 setIsTextVisible 更新状态。
条件渲染 : {isTextVisible && <text>...} 这行代码根据 isTextVisible 的值来决定 <text> 元素是否被渲染到 DOM 中。
dominantBaseline="middle" : 这个属性比简单的 y 坐标微调能更好地实现文本在垂直方向上的居中。

额外的安全建议：

如果 someText 的内容来自用户输入或者不受信任的外部源，务必进行清理，防止 XSS 攻击。虽然 SVG <text> 本身执行脚本的能力有限，但养成好习惯总没错。

进阶使用技巧：

防抖/节流 (Debounce/Throttle): 如果 width 或 someText 变化非常频繁 (比如拖拽调整大小)，频繁调用 getComputedTextLength 可能有性能开销。可以考虑对 useLayoutEffect 里的逻辑做防抖或节流处理。
初始渲染占位： 如果文本测量需要时间，或者你不想一开始就显示一个可能超长的文本，可以将 isTextVisible 初始值设为 false，等测量完毕再决定是否显示。但当前代码逻辑是先渲染再测量，若文本很长，会短暂显示完整文本再隐藏，体验上可能需要调整。一个改进方法是先用一个透明的或者位于屏幕外的文本元素去测量，得到宽度后再决定真实文本元素的显隐。

方案二：模拟省略——JS 动态截断大法

如果隐藏不满足需求，需要类似 text-overflow: ellipsis 的效果，那事情就复杂一些了。我们需要用 JavaScript 手动计算并截断文本。

原理和作用：

核心思路：

渲染完整的文本到一个不可见或临时 <text> 元素中（或者直接用目标元素，但后续要修改其内容）。
获取完整文本的宽度。
如果宽度超过了 <rect> 的 width：
- 逐步减少文本内容（比如一次减一个字符）。
- 在末尾加上省略号 "..."。
- 重新测量新文本（"部分字符..."）的宽度。
- 重复这个过程，直到带省略号的文本宽度小于或等于 <rect> 的 width。
将最终处理好的文本内容更新到可见的 <text> 元素中。

代码示例 (React Hook)：

import React, { useRef, useState, useLayoutEffect } from 'react';

const SvgTextWithEllipsis = ({ x, y, width, height, someText, ellipsis = "..." }) => {
  const textRef = useRef(null);
  const [displayText, setDisplayText] = useState(someText);

  useLayoutEffect(() => {
    if (textRef.current && someText) {
      // 先设置为完整文本，用于测量
      textRef.current.textContent = someText;
      let currentText = someText;
      let textWidth = textRef.current.getComputedTextLength();

      if (textWidth > width) {
        // 如果原始文本就超宽了，开始截断
        const avgCharWidth = textWidth / currentText.length; // 粗略估计单个字符宽度
        let estimatedChars = Math.floor(width / avgCharWidth); // 估计能放多少字符
        
        currentText = someText.substring(0, estimatedChars) + ellipsis;
        textRef.current.textContent = currentText;
        textWidth = textRef.current.getComputedTextLength();

        // 从估计值开始迭代，直到找到合适长度
        // 如果还是太宽，逐个减少字符 (从省略号前开始减)
        while (textWidth > width && currentText.length > ellipsis.length) {
          currentText = currentText.substring(0, currentText.length - ellipsis.length - 1) + ellipsis;
          if (currentText.length === ellipsis.length && someText.length > 0) { // 防止把省略号也截没了
             // 如果只剩下省略号还宽，那就只显示省略号或者啥都不显示
             // 这里为了简单，直接显示省略号，即使省略号也超宽
             // 你也可以选择显示一个空字符串 textRef.current.textContent = "";
             textRef.current.textContent = ellipsis; // 或为空字符串
             textWidth = textRef.current.getComputedTextLength();
             if(textWidth > width) { // 如果省略号本身都超宽，那显示空
                textRef.current.textContent = "";
             }
             break; 
          }
          textRef.current.textContent = currentText;
          textWidth = textRef.current.getComputedTextLength();
        }
        setDisplayText(textRef.current.textContent); // 更新最终的文本
      } else {
        setDisplayText(someText); // 没超宽，显示完整文本
      }
    } else if (!someText) {
        setDisplayText(""); // 如果someText为空，则显示空
    }
  }, [width, someText, ellipsis]);

  return (
    <g>
      <rect x={x} y={y} width={width} height={height} fill="lightcoral" />
      <text
        ref={textRef}
        x={x + width / 2}
        y={y + height / 2} // 改为 middle 基线，+7 可以去掉
        textAnchor="middle"
        dominantBaseline="middle"
        fill="black"
      >
        {displayText}
      </text>
    </g>
  );
};

// 使用示例
// <SvgTextWithEllipsis x={10} y={10} width={150} height={30} someText="这是一个测试文本，目的是测试溢出省略号的效果。" />
// <SvgTextWithEllipsis x={10} y={50} width={80} height={30} someText="短文本" />

操作步骤解释：

displayText state : 用于存储最终要在 <text> 元素中显示的文本（可能是完整文本，也可能是截断后带省略号的文本）。
useLayoutEffect :
- 首先，将 <text> 元素的内容设置为完整的 someText，以便准确测量其原始宽度。
- textRef.current.textContent = someText; 重要： 直接操作 DOM 节点的内容。因为 SVG <text> 的子节点就是它的文本内容，所以这样改是有效的。
- getComputedTextLength() 测量宽度。
- 截断逻辑：
  - 如果超宽，进入 while 循环。
  - 在循环里，从 currentText 尾部（省略号之前）去掉一个字符，再加上省略号。
  - 更新 textRef.current.textContent 并重新测量。
  - 直到文本宽度小于等于 width，或者文本被截得只剩下省略号了。
  - 为了提高效率，示例中加入了一个基于平均字符宽度的初步估计，这可以减少循环次数，特别是在文本很长时。
- 最后用 setDisplayText(finalText) 更新 React state，让 React 来渲染最终结果。不过由于我们已直接修改 textRef.current.textContent， setDisplayText 在这个实现中主要是为了遵循 React 模式，确保组件状态和DOM一致性。严格来说，如果性能要求极致，可以考虑绕过 React 的 state 更新，但通常不推荐。

额外的安全建议：

同方案一，注意对 someText 内容的清理。

进阶使用技巧：

二分查找截断点： while 循环中逐个字符减少，效率可能不高。对于很长的文本，可以考虑使用二分查找法来确定截断点，能大幅提高性能。
缓存测量结果： 如果同样的文本和宽度频繁出现，可以缓存截断结果，避免重复计算。
特殊字符处理： SVG 文本对某些特殊字符（如空格、制表符）的处理可能与 HTML 不同，尤其是在计算宽度时。white-space CSS 属性在 SVG text 中有一定作用 (如 pre)，可以留意。
letter-spacing, word-spacing： 如果你的 <text> 元素设置了这些 CSS 属性，getComputedTextLength() 会把它们计算在内，这点很方便。
性能优化： 在 useLayoutEffect 中直接操作 DOM 的 textContent 来进行测量和调整，是为了实时获取准确宽度。确认最终文本后，通过 setDisplayText 触发 React 的重渲染。这是效率和 React 范式之间的一个平衡。

方案三：曲线救国——`foreignObject` 拥抱 HTML

如果对 SVG 的原生实现不满意，或者需求特别复杂，还有一个“大招”：使用 <foreignObject>。

原理和作用：

<foreignObject> 元素允许你在 SVG 中嵌入一块“外来”的 XML 内容，最常见的就是嵌入 HTML。一旦嵌入了 HTML，你就可以在这块区域里使用标准的 HTML 标签和 CSS 属性了！

代码示例 (React)：

import React from 'react';

const SvgTextWithForeignObject = ({ x, y, width, height, someText }) => {
  // foreignObject 内的HTML样式
  const htmlDivStyle = {
    width: `${width}px`,
    height: `${height}px`, // 可以控制高度是否也应用溢出
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    whiteSpace: 'nowrap',
    textAlign: 'center', // 如果需要居中
    lineHeight: `${height}px`, // 简单垂直居中
    // 你可能需要更复杂的CSS来完美垂直居中，或使用flexbox
    // display: 'flex', alignItems: 'center', justifyContent: 'center',
    backgroundColor: 'lightgreen', // 仅为演示
    boxSizing: 'border-box', // 重要，确保padding和border不影响总宽度
    padding: '0 5px' // 给一点内边距，避免文字贴边
  };

  // foreignObject 的 x, y 通常是相对于它内部内容的左上角。
  // rect 的 x, y 是左上角。
  // 如果 rect 和 foreignObject 想对齐，要注意这一点。
  // 这里的 x, y 直接给 foreignObject，然后内部 HTML div 宽度设为 width。

  return (
    <g>
      <rect x={x} y={y} width={width} height={height} fill="rgba(0,0,0,0.1)" /> {/* 加个背景方便看范围 */}
      <foreignObject x={x} y={y} width={width} height={height}>
        {/* xmlns是必需的，用于指定嵌入内容的命名空间 */}
        <div xmlns="http://www.w3.org/1999/xhtml" style={htmlDivStyle}>
          {someText}
        </div>
      </foreignObject>
    </g>
  );
};

// 使用示例
// <SvgTextWithForeignObject x={10} y={10} width={150} height={30} someText="这是一个使用 foreignObject 来处理溢出省略的测试文本。" />
// <SvgTextWithForeignObject x={10} y={50} width={80} height={30} someText="短文本好" />

操作步骤解释：

<foreignObject> :
- x, y, width, height: 定义了 HTML 内容可以渲染的区域。
嵌入的 HTML (<div>) :
- xmlns="http://www.w3.org/1999/xhtml" : 这个属性非常重要！它告诉 SVG 解析器，<foreignObject> 里面的是 XHTML 内容。没有它，HTML 可能不会按预期渲染。
- style : 这里就可以用上我们熟悉的 CSS 属性了：
  - width: width + 'px', height: height + 'px': 把 <rect> 的尺寸赋给 <div>。
  - overflow: hidden;
  - textOverflow: ellipsis;
  - whiteSpace: nowrap;
  - textAlign: 'center', lineHeight: height + 'px' 用于简单的水平和垂直居中。更复杂的对齐可能需要 Flexbox 或 Grid。
  - boxSizing: 'border-box' 建议加上，这样 padding 和 border 就不会撑大元素的总尺寸。

额外的安全建议：

XSS 风险 : 因为你嵌入的是 HTML，如果 someText 包含恶意脚本并且你直接用 dangerouslySetInnerHTML (虽然本例中没有，是直接作为子节点传递)，或者用户能控制 someText 的内容，那么 XSS 风险会比纯 SVG <text> 高得多。务必确保内容安全，对用户输入进行严格的转义或清理。
浏览器兼容性 : foreignObject 得到了现代主流浏览器的良好支持，但非常老的浏览器（如 IE）可能会有问题。不过对于 React 开发来说，通常目标用户群体使用的浏览器都还比较新。

进阶使用技巧：

复杂布局和交互： <foreignObject> 的威力在于你可以嵌入任意复杂的 HTML 结构，包括表单、图片、iframe，甚至整个小型应用。这意味着你可以实现 SVG 原生难以做到的交互效果。
CSS 作用域： 嵌入的 HTML 中的 CSS 规则仍然受页面上其他 CSS 的影响（除非你使用了 Shadow DOM 或者 CSS Modules 等隔离技术）。
性能： 渲染 foreignObject 可能会比原生 SVG 元素有更高的开销，特别是在大量使用时。需权衡其便利性和可能的性能影响。
字体和样式继承： <foreignObject> 内部的 HTML 通常不会继承 SVG 上设置的 fill、font-family 等样式。你需要为内部的 HTML 单独设置这些样式。
可访问性 (A11y): 嵌入的 HTML 内容应该遵循正常的 Web 可访问性最佳实践。

四、选择困难？哪个方案适合你？

看完这三个方案，你可能有点犯愁，到底用哪个好呢？

只想简单显隐，不在乎省略号： 方案一（条件渲染）最直接，代码量最少，性能也相对较好。
必须要有省略号，且想尽量保持 SVG 原生性： 方案二（JS 动态截断）是纯 SVG 思路下的实现。代码相对复杂，性能是主要考虑点，尤其对于长文本和频繁更新的情况。但它不需要引入 HTML 命名空间。
追求完美的省略号效果，且不排斥引入 HTML，或者有更复杂的内部布局需求： 方案三（foreignObject）是最省事的“偷懒”办法，直接利用了浏览器成熟的 HTML/CSS 文本处理能力。代价是引入了 HTML 混合，以及要注意 xmlns 和可能的样式冲突、安全问题。

每种方法都有它的适用场景。结合你的具体需求、项目复杂度、性能预期以及团队对 SVG 和 HTML 混合编码的接受程度来做选择吧。解决 SVG 文本的显示问题，有时候确实需要一点点“黑科技”和耐心。