如何将路径数据标准化为 0 x 0 坐标空间？

Question

我接收到的任意路径数据有时位于数千个位置。

我将如何对其进行规范化，以使顶部和左侧的位置为 0 x 0？

因此，在 1000x1000 创建的路径将是：

M 1000 1000 L 1000 1050 L 1050 1100 Z

标准化后是：

M 0 0 L 0 50 L 50 100 Z

示例代码：

path.pathData // M 1000x1000 L 1000x1050 L 1050x1100 Z
path.normalizeToPosition(0,0);
path.pathData // M 0x0 L 0x50 L 50x100 Z

我已经看到了这个answer，它看起来与我想要的很接近，但不同的是我希望顶部和左侧大多数位置为 0x0。

换句话说，我希望 viewBox 始终以“0 0”开头，并且无论当前路径数据是什么，矢量路径的顶部和左侧都完全位于 viewBox 区域内。

另一个例子。如果路径数据是：

M -1000 -1000 L -1000 -1050 L -1050 -1100 Z

函数会将其修改为

M 0 0 L 0 50 L 50 100 Z

Answer 1

您可以使用 SVG DOM 路径 API。不过，您需要polyfill on Chrome。

var path = document.getElementById("path");

var segments = path.pathSegList;
var len = segments.numberOfItems;

var newPath = ""

for (var i=0; i<len; ++i) {
  var pathSeg = segments[i];
  switch(pathSeg.pathSegTypeAsLetter){
  case 'M':
  case 'L':
    newPath += `${pathSeg.pathSegTypeAsLetter} ${pathSeg.x - segments[0].x} ${pathSeg.y - segments[0].y} `
    break;
  case 'Z':
    newPath += 'Z';
    break;
  }
}

console.log(newPath);
path.setAttribute("d", newPath);

<svg>
    <path id="path" d="M 1000 1000 L 1000 1050 L 1050 1100 Z"/>
</svg>