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>

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

1 个答案: