DOMMatrix scaleSelf方法异常？Canvas中缩放SVG路径矩阵值变NaN

我之前在Firefox里也碰到过类似的DOMMatrix兼容性坑，你的情况大概率是Firefox对scaleSelf()方法的参数处理逻辑和其他浏览器不一致导致的。

问题根源 #

按照规范，DOMMatrix.scaleSelf(sx[, sy[, originX[, originY]]])里的第二个参数sy是可选的，默认会和sx保持一致，但Firefox Dev版本的实现这里存在兼容性bug——当只传入一个缩放参数时，它无法正确处理默认值，导致矩阵计算出错，所有属性直接变成NaN。

两种可行的修复方案 #

1. 显式传入Y轴缩放参数
   把scaleSelf(5)改成scaleSelf(5, 5)，明确指定X和Y轴的缩放比例，Firefox就能正确解析并计算矩阵了：

   var matrix = new DOMMatrix();
   matrix.translateSelf(50,50);
   matrix.scaleSelf(5, 5); // 显式传递两个缩放参数
   console.log("After scale: ", matrix);
   

2. 改用scale()方法生成新矩阵
   如果你不想修改原矩阵，也可以用返回新矩阵的scale()方法替代修改原矩阵的scaleSelf()，链式调用更简洁也能避开这个bug：

   var matrix = new DOMMatrix();
   matrix = matrix.translateSelf(50,50).scale(5); // 链式调用生成新矩阵
   console.log("After scale: ", matrix);
   

修复后的完整绘图代码 #

替换掉有问题的缩放调用后，你的Canvas绘图代码就能正常工作了：

var path = new Path2D("M0.55,0.55 C0.55,0.55,0.45,0.55,0.45,0.55 C0.45,0.55,0.45,0.45,0.45,0.45 C0.45,0.45,0.55,0.45,0.55,0.45 C0.55,0.45,0.55,0.55,0.55,0.55");
var matrix = new DOMMatrix();
matrix.translateSelf(50,50);
matrix.scaleSelf(5, 5); // 修复后的缩放逻辑
var draw = new Path2D();
draw.addPath(path, matrix);
ctx.strokeStyle = "lime";
ctx.stroke(draw);

这样矩阵就不会再出现NaN的情况，缩放后的SVG路径也能正常渲染在Canvas上了。

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