SVG 是可缩放矢量图形（Scalable Vector Graphics）的缩写。它是一种 XML 格式，用于描述二维图形和动画。在前端开发中，使用 SVG 可以使得页面元素更加灵活、可定制化。然而，在实际应用中，我们通常需要在 SVG 中展示文本。而且，有时候文本内容比较长，需要进行断行操作，以适应小尺寸屏幕或者限定宽度的容器。
本文将介绍如何在 JavaScript 中对 SVG 文本进行断行操作，并提供实例代码。
SVG 文本断行的基本思路
SVG 中的文本可以通过 <text> 元素来定义，例如：
<svg width="200" height="100"> <text x="10" y="50">Hello World!</text> </svg>
其中 x 和 y 属性表示文本的起始位置。如果需要进行换行，则需要在文本中插入 <tspan> 元素，例如：
<svg width="200" height="100">
<text x="10" y="50">
<tspan>Hello</tspan>
<tspan x="10" dy="1.2em">World!</tspan>
</text>
</svg>这里的 dy 表示相对于上一个 <tspan> 元素的垂直偏移量。
因此，我们可以采用以下的思路来实现 SVG 文本的断行：
- 根据容器宽度和字体大小，计算出每行最多可以显示的字符数；
- 将文本按照每行限制的字符数进行分割，并插入
<tspan>元素。
接下来，我们将详细介绍如何实现以上两个步骤。
计算每行最多可以显示的字符数
在 JavaScript 中，我们可以通过以下方式获取 SVG 文本对应的 DOM 元素：
const svgText = document.querySelector('svg text');然后，我们可以获取文本所在容器的宽度：
const containerWidth = svgText.parentNode.getBoundingClientRect().width;
接着，我们需要获取当前字体的大小。可以使用 getComputedStyle 方法来获取元素的计算样式：
const computedStyle = getComputedStyle(svgText); const fontSize = parseFloat(computedStyle.fontSize);
注意，这里需要将字体大小转换为浮点数。
最后，我们根据容器宽度和字体大小计算出每行最多可以显示的字符数：
const charsPerLine = Math.floor(containerWidth / fontSize);
这里使用了 Math.floor 方法向下取整，确保每行都不会超出容器宽度。
分割文本并插入 <tspan> 元素
接下来，我们需要对文本内容进行分割，并插入 <tspan> 元素。
首先，我们可以获取原始文本内容：
const originalText = svgText.textContent;
然后，我们需要将文本分割为多个段落。在本例中，我们将以换行符 \n 作为段落的分隔符：
const paragraphs = originalText.split('\n');接着，我们迭代每一个段落，对其进行分割，并将分割后的文本插入 <tspan> 元素。具体来说，我们可以使用以下代码：
-- -------------------- ---- -------
------------------------------ ------ -- -
----- ----- - ----------------- ---
--- ---- - ---
-------------------- -- -- -
----- ----------- - ---- - - - - -----
-- -- - ------------ - - -- ------------------ -- ------------- -
---- - ------------
- ---- -
----- ----- - ------------------------------------------------------ ---------
----------------------- -------
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------