使用Office.js开发PowerPoint Web加载项，无法修改SVG图标颜色求助

当你通过Office.js操作PowerPoint中的SVG时，如果SVG被识别为Picture类型（而非可编辑的形状组），直接调用shape.fill.setSolidColor()只会修改图片容器的填充色，无法改变SVG内部图标的颜色——这是因为默认插入的SVG会被PowerPoint解析为位图或不可编辑的图片对象。

以下分两种场景给出可行解决方案：

场景1：通过加载项插入SVG并修改颜色 #

如果是通过你的加载项插入SVG，直接使用Shapes.addSvg()方法，该方法会将SVG转换为可编辑的ShapeGroup，之后可以遍历组内的子形状修改填充色：

async function insertAndModifySvg(svgString, targetSlide, color) {
  await PowerPoint.run(async (context) => {
    // 将SVG插入为可编辑的形状组
    const svgGroup = targetSlide.shapes.addSvg(svgString, 100, 100, 200, 200);
    svgGroup.load("items");
    await context.sync();

    // 遍历所有子形状，设置填充色
    svgGroup.items.forEach(subShape => {
      if (color) {
        subShape.fill.setSolidColor(color);
      } else {
        subShape.fill.clear();
      }
    });
    await context.sync();
  });
}

场景2：修改已存在的SVG图片颜色 #

如果是幻灯片中已有的SVG图片，需要先提取其SVG原始内容，修改颜色后重新插入：

async function modifyExistingSvgColor(color) {
  await PowerPoint.run(async (context) => {
    const selectedShapes = context.presentation.getSelectedShapes();
    selectedShapes.load("items");
    await context.sync();

    for (const shape of selectedShapes.items) {
      // 判断是否为图片类型
      if (shape.type === PowerPoint.ShapeType.picture) {
        shape.pictureFormat.load("svgData");
        await context.sync();

        // 仅当图片保留了SVG原始数据时可操作
        if (shape.pictureFormat.svgData) {
          let svgContent = shape.pictureFormat.svgData;
          
          // 根据SVG结构修改颜色，示例替换所有fill属性
          svgContent = svgContent.replace(/fill="[^"]*"/g, `fill="${color}"`);
          // 若需要修改描边色，可替换stroke属性
          // svgContent = svgContent.replace(/stroke="[^"]*"/g, `stroke="${color}"`);

          // 记录原位置和尺寸，删除原图片后插入修改后的SVG
          const { left, top, width, height } = shape;
          shape.delete();
          shape.parent.shapes.addSvg(svgContent, left, top, width, height);
        }
      } else if (shape.type === PowerPoint.ShapeType.group) {
        // 若已是形状组，直接遍历子形状修改
        shape.load("items");
        await context.sync();
        shape.items.forEach(subShape => {
          color ? subShape.fill.setSolidColor(color) : subShape.fill.clear();
        });
      }
    }
    await context.sync();
  });
}

注意事项 #

• 不是所有SVG图片都能提取到svgData：复杂SVG可能被PowerPoint转换为位图，此时无法获取原始SVG内容。
• 正则表达式需适配你的SVG结构：如果图标使用CSS类、内联样式或其他方式定义颜色，需要调整替换逻辑。
• 形状组遍历可能需要过滤：如果SVG转换为形状组后包含不需要修改的元素（如透明背景），可通过subShape.name或其他属性过滤。

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