Node.js中使用Sharp转换SVG为PNG出现文本损坏问题（Replit环境）

问题原因 #

你遇到的文本丢失问题和Replit运行环境直接相关，核心原因是Sharp依赖的libvips库渲染SVG文本时需要调用系统预装的字体：

• 你的本地系统（Windows/macOS）预装了常用的无衬线字体，所以文本可以正常渲染
• Replit的容器是精简Linux环境，默认没有安装你代码中使用的字体，导致文本渲染时找不到字体直接跳过，最终生成的PNG没有文本内容

解决方案 #

方案1：明确指定SVG字体+安装系统字体 #

1. 给所有SVG文本元素统一指定通用字体族，避免调用系统未知默认字体，示例：

// 所有text元素新增font-family属性
svg.append('text')
  .attr('font-family', 'Arial, Verdana, Liberation Sans, sans-serif')
  // 其余原有属性不变

2. 在Replit环境中安装通用字体包：
   打开项目根目录的replit.nix文件，在packages数组中添加pkgs.noto-fonts或pkgs.liberation_ttf，保存后重启项目生效。

方案2：嵌入自定义字体（兼容性最好） #

把你需要用到的字体文件（比如Arial.ttf）上传到项目目录，在SVG开头嵌入字体声明，完全不依赖系统字体：

// 创建SVG后先添加字体样式
svg.append('style')
  .text(`
    @font-face {
      font-family: 'CustomFont';
      src: url('./Arial.ttf') format('truetype');
    }
    text {
      font-family: 'CustomFont' !important;
    }
  `)

备选方案：更换渲染工具 #

如果上述方案无效，可以替换Sharp为Puppeteer做SVG转PNG，Puppeteer自带Chromium内核，字体渲染逻辑和普通浏览器完全一致，不需要依赖系统预装字体。

额外注意 #

你代码中背景矩形的fill属性多了一个多余的分号，建议修正：

// 原代码
.style('fill','rgb(28, 35, 51);');
// 修正后
.style('fill','rgb(28, 35, 51)');

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