使用moJS在SVG中添加<text>元素时文本被截断的解决求助

看来你遇到的核心问题是：moJS的CustomShape组件默认会给生成的SVG容器设置固定尺寸，且默认开启了裁剪逻辑——只给<tspan>加overflow: visible根本没用，因为这个样式得作用在SVG容器层面，同时还要确保容器尺寸能装下你的文本内容。

下面给你几个针对性的解决方案：

1. 给CustomShape设置足够的宽高 #

moJS的CustomShape默认尺寸偏小，你可以直接在getShape()里给文本元素设置宽高，或者在创建Shape实例时指定size参数：

class TaskText extends mojs.CustomShape {
  getShape() {
    // 给text元素设置足够容纳文本的宽度，避免被容器裁剪
    return '<text x="0" y="35" font-size="10" width="220" style="overflow: visible;">' +
           '<tspan style="font-weight: bold;">Commit changes to GitHub </tspan>' +
           '</text>';
  }
}

mojs.addShape('tasktext', TaskText);

// 创建Shape时明确指定足够大的容器尺寸
const text = new mojs.Shape({
  shape: 'tasktext',
  size: [220, 40], // 调整为能完全装下文本的宽高
  // 其他动画配置...
});

2. 确保SVG容器的overflow属性生效 #

moJS生成的SVG元素默认可能是overflow: hidden，你可以直接在CustomShape的片段里给外层容器加样式，或者手动修改生成的元素：

class TaskText extends mojs.CustomShape {
  getShape() {
    // 给外层g元素设置overflow，确保文本超出部分不被裁剪
    return '<g style="overflow: visible;">' +
           '<text x="0" y="35" font-size="10">' +
           '<tspan style="font-weight: bold;">Commit changes to GitHub </tspan>' +
           '</text>' +
           '</g>';
  }
}

或者在Shape初始化后，直接修改DOM元素的样式：

// 初始化后手动开启overflow
text.el.style.overflow = 'visible';

3. 动态计算文本长度（适配可变文本） #

如果你的文本内容不固定，可以用SVG的getBBox()方法计算实际文本宽度，再动态调整容器尺寸：

class TaskText extends mojs.CustomShape {
  getShape() {
    return '<text x="0" y="35" font-size="10" id="dynamic-task-text">' +
           '<tspan style="font-weight: bold;">Commit changes to GitHub </tspan>' +
           '</text>';
  }
  
  // 组件初始化后自动调整尺寸
  onInit() {
    const textEl = this.el.querySelector('#dynamic-task-text');
    const textBBox = textEl.getBBox();
    // 给文本留一点额外边距，避免紧贴容器边缘
    this.setSize([textBBox.width + 15, textBBox.height + 10]);
    textEl.style.overflow = 'visible';
  }
}

核心思路就是：让moJS生成的SVG容器尺寸足够容纳文本，同时确保容器的overflow属性设置为visible，这样文本超出部分就不会被截断了。

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