如何重新计算（非缩放/变换）SVG Path以适配Vega-Lite边界框？

我刚好遇到过和你一样的问题——Vega-Lite对自定义路径的边界框要求确实有点严格，只加transform属性根本没用，必须修改路径本身的坐标值。下面给你几个靠谱的解决方法：

方法一：手动计算（适合简单路径） #

如果你的图标路径比较简单（比如像示例里的矩形），可以手动计算转换：

• 第一步：找出原路径的边界框，也就是所有坐标里的最小/最大X、Y值。比如你的示例路径M10 10 H 90 V 90 H 10 L 10 10，边界框是minX=10, minY=10, maxX=90, maxY=90。
• 第二步：计算缩放比例。我们要把路径缩放到[-1,1]的范围，这个范围的边长是2，所以缩放比例是2 / 最大边长。示例里最大边长是80（90-10），所以比例是2/80=0.025。
• 第三步：计算偏移量，让路径居中。先找原路径的中心：(minX+maxX)/2 = 50，(minY+maxY)/2=50。然后每个坐标需要减去中心值，再乘以缩放比例，这样就能把中心移到原点(0,0)，同时缩放到[-1,1]范围。
• 第四步：替换所有坐标。比如原路径里的10变成(10-50)*0.025 = -1，90变成(90-50)*0.025=1，替换后就得到了你想要的M-1 -1 H 1 V 1 H -1 L -1 -1。

方法二：用代码批量处理（适合复杂图标/多图标） #

如果是复杂的图标（比如带曲线、相对坐标的路径），手动计算容易出错，推荐用代码解析并转换路径：
你可以用JavaScript的svg-path-parser和svg-path-builder这两个库来处理，示例代码如下：

// 先安装依赖：npm install svg-path-parser svg-path-builder
const parsePath = require('svg-path-parser');
const buildPath = require('svg-path-builder').default;

// 你的原始路径
const originalPath = 'M10 10 H 90 V 90 H 10 L 10 10';
const pathCommands = parsePath(originalPath);

// 计算路径的边界框
let minX = Infinity, minY = Infinity;
let maxX = -Infinity, maxY = -Infinity;

pathCommands.forEach(cmd => {
  // 遍历所有可能的坐标属性（覆盖直线、曲线等命令）
  ['x', 'y', 'x1', 'y1', 'x2', 'y2'].forEach(prop => {
    if (cmd[prop] != null) {
      minX = Math.min(minX, cmd[prop]);
      maxX = Math.max(maxX, cmd[prop]);
      minY = Math.min(minY, cmd[prop]);
      maxY = Math.max(maxY, cmd[prop]);
    }
  });
});

// 计算缩放和偏移参数
const width = maxX - minX;
const height = maxY - minY;
const scale = 2 / Math.max(width, height); // 保持宽高比，适配最大边到2单位
const centerX = (minX + maxX) / 2;
const centerY = (minY + maxY) / 2;

// 转换每个路径命令的坐标
const transformedCommands = pathCommands.map(cmd => {
  const newCmd = {...cmd};
  ['x', 'y', 'x1', 'y1', 'x2', 'y2'].forEach(prop => {
    if (newCmd[prop] != null) {
      if (prop.startsWith('x')) {
        newCmd[prop] = (newCmd[prop] - centerX) * scale;
      } else {
        newCmd[prop] = (newCmd[prop] - centerY) * scale;
      }
    }
  });
  return newCmd;
});

// 生成转换后的路径字符串
const newPath = buildPath(transformedCommands);
console.log(newPath); // 输出：M-1,-1H1V1H-1L-1,-1

方法三：用Inkscape实际修改路径（可视化操作） #

你之前用Inkscape只得到了transform属性，其实是没用到「应用变换到路径」的功能：

• 打开你的SVG文件，选中要修改的路径。
• 先调整路径的大小和位置：可以先把路径缩放成2x2单位的大小（或者先缩放，再移动到以原点为中心的位置）。
• 然后点击顶部菜单的路径 > 应用变换（Path > Apply Transformations），在弹出的窗口里勾选所有变换选项（缩放、平移、旋转等），点击「应用」。
• 现在你再查看路径的代码，会发现坐标已经被实际修改了，不再是原来的数值加transform属性，直接复制这个路径就能在Vega-Lite里正常使用了。

小提示 #

转换完成后，可以先在Vega-Lite里快速测试：用mark: {type: 'path', path: '你的新路径'}，看看图标是否居中且大小合适，如果有偏移，检查一下边界框的计算是否正确。

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