如何用SVG.js正确绘制文本？文本被裁剪问题求助

问题根源 #

• 未挂载DOM时无法渲染文本：SVG对象在添加到DOM前，浏览器没有上下文来渲染字体和计算文本布局，导致bbox()返回错误尺寸，文本显示异常。
• 字体未预加载：Roboto字体如果没提前加载，浏览器会用默认字体替代，进一步导致尺寸偏差和显示问题。

符合需求的修正代码 #

要实现「在添加到目标DOM前创建SVG并测量文本」，可以用临时隐藏容器来提供渲染上下文，完成测量后再迁移到目标元素：

1. 先预加载Roboto字体 #

在HTML头部添加字体加载代码：

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

2. 修正后的JavaScript代码 #

// 创建临时隐藏容器，用于离线渲染测量
const tempContainer = document.createElement('div');
tempContainer.style.cssText = 'position:absolute; visibility:hidden;';
document.body.appendChild(tempContainer);

// 创建SVG并临时挂载到隐藏容器
const draw = SVG().size(300, 300).addTo(tempContainer);

// 添加文本并设置样式
const text = draw.text("000000000").attr({
  fill: "red",
  stroke: "green",
  "font-family": "Roboto",
  "font-size": 10
});

// 此时可获取准确的边界框
const textBbox = text.bbox();
const svgBbox = draw.bbox();
console.log('文本边界:', textBbox);
console.log('SVG边界:', svgBbox);

// 将SVG迁移到目标容器
draw.remove();
draw.addTo("#rectID");

// 清理临时容器
document.body.removeChild(tempContainer);

简化版本（若允许先挂载到目标容器） #

如果业务流程允许先把SVG加到目标DOM再测量，代码可以更简单：

const draw = SVG().size(300, 300).addTo("#rectID");

const text = draw.text("000000000").attr({
  fill: "red",
  stroke: "green",
  "font-family": "Roboto",
  "font-size": 10
});

// 挂载后获取准确的bbox
const bbox = draw.bbox();
console.log(bbox);

关键说明 #

• 临时隐藏容器给SVG提供了必要的DOM渲染上下文，浏览器能正确渲染字体并计算文本尺寸。
• 预加载字体确保文本使用指定的Roboto字体，避免尺寸计算偏差。

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