如何在Elm中获取SVG文本的长度？

当然有办法啦！在Elm里获取SVG文本的尺寸确实得绕个小弯——毕竟Elm的纯函数式特性没法直接访问DOM的测量API，但有两种实用方案能解决这个问题，我给你详细拆解下：

方案一：通过端口（Port）结合JavaScript动态测量 #

这是最通用的原生方案，核心思路是把文本和样式信息传给JS，让JS帮我们创建隐藏元素并测量尺寸，再把结果传回Elm。

步骤1：在Elm中定义端口 #

先定义两个端口，一个用来发送测量请求，另一个用来接收测量结果：

-- 发送测量请求的端口：传递文本内容、字体大小、字体族等信息
port requestTextMeasurement : { text : String, fontSize : String, fontFamily : String } -> Cmd msg

-- 接收测量结果的端口：获取返回的宽高数据
port receiveTextMeasurement : ( { width : Float, height : Float } -> msg ) -> Sub msg

步骤2：编写JavaScript测量逻辑 #

在你的HTML页面中添加对应的JS代码，处理端口传来的请求并返回结果：

// 假设你的Elm应用实例是app
app.ports.requestTextMeasurement.subscribe(data => {
  // 创建隐藏的SVG容器
  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  svg.style.position = "absolute";
  svg.style.visibility = "hidden";
  document.body.appendChild(svg);

  // 创建要测量的文本元素
  const textEl = document.createElementNS("http://www.w3.org/2000/svg", "text");
  textEl.textContent = data.text;
  textEl.setAttribute("font-size", data.fontSize);
  textEl.setAttribute("font-family", data.fontFamily);
  svg.appendChild(textEl);

  // 获取文本的 bounding box 尺寸
  const bbox = textEl.getBBox();
  app.ports.receiveTextMeasurement.send({ width: bbox.width, height: bbox.height });

  // 清理临时元素
  document.body.removeChild(svg);
});

步骤3：在Elm中处理测量流程 #

在你的Elm更新逻辑里，当需要测量文本时发送请求，收到结果后更新模型，再用这个尺寸来定位其他元素就行啦。

方案二：使用Elm第三方测量库 #

如果你不想自己写端口和JS代码，可以找成熟的Elm第三方包来用，这类包已经封装好了测量逻辑，直接调用函数就能获取文本的宽高，省去手动实现的麻烦。

小提示 #

如果你的文本内容和样式都是固定不变的，也可以提前在JS里测量好尺寸，把结果作为常量传入Elm，这样就不用动态测量了，实现起来更简单！

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