使用svgpath操作SVG时，如何实现x与y坐标互换？是否存在对应transform matrix？

嘿，我刚好对SVG变换和svgpath工具的用法比较熟，来给你梳理可行的方案：

1. 直接用SVG变换矩阵实现坐标互换 #

要实现X和Y坐标直接互换，对应的SVG变换矩阵是 matrix(0 1 1 0 0 0)。这个矩阵的逻辑很简单：

• 新的X坐标 = 原Y坐标
• 新的Y坐标 = 原X坐标

你可以直接给目标SVG元素加上这个transform属性，比如：

<path d="M10,20 L30,40" transform="matrix(0 1 1 0 0 0)" />

如果互换后图形的位置不符合预期（比如跑到画布外面了），可以调整矩阵最后两个参数（平移量e和f）。比如原图形的Y范围是从y0到y1，X范围是x0到x1，你可以试试加个平移，把矩阵改成 matrix(0 1 1 0 -y0 -x0) 来对齐到原区域，具体数值根据你的图形实际情况调整。

2. 用svgpath工具批量处理Path数据 #

如果你是用svgpath工具来操作路径数据，不用绕矩阵，直接给transform方法传一个自定义的坐标互换函数就行：

首先确保你已经安装了svgpath：

npm install svgpath

然后写代码处理路径：

const svgpath = require('svgpath');

// 你的原始路径数据
const originalPath = 'M10 20 L30 40 C50 60 70 80 90 100';

// 定义交换x和y的变换函数
const swapCoordinates = (x, y) => [y, x];

// 应用变换并输出新路径
const newPath = svgpath(originalPath)
  .transform(swapCoordinates)
  .toString();

console.log(newPath);
// 输出结果会是交换坐标后的路径：M20 10 L40 30 C60 50 80 70 100 90

这个方法直接对路径里的每个坐标点做x和y的互换，非常直观，适合批量处理大量路径。

为啥你之前的旋转加平移没生效？ #

你尝试的围绕原点旋转90度，其实对应的变换是把(x,y)转成(-y, x)，和单纯的(x,y)→(y,x)不是一回事，所以结果肯定不对。如果非要用旋转来凑，得在旋转后再加一个沿X轴的翻转（scale(1, -1)），组合起来是 transform="rotate(90) scale(1, -1)"，但这显然不如直接用互换矩阵或者svgpath的自定义变换来得高效。

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