已忽略JavaScript SVG矩阵scaleY

Question

我试图使用矩阵中的scale((方法缩放SVG元素，但scaleY参数被忽略了。

我希望元素在Y轴上缩放4次，但要缩放的第二个参数被忽略了。我做错什么了吗？

var elem = document.querySelector('#test');
var transformList = elem.transform.baseVal,
transform = transformList.getItem(0),
matrix = transform.matrix;
transform.setMatrix(matrix.scale(1.1, 4));
transformList.replaceItem(transform, 0);

<svg>
<rect width="100" height="100" id="test" transform="matrix(1, 0, 0, 1, 0, 0)"></rect>
</svg>

Answer 1

根据SVG规范，缩放需要一个参数。你需要scaleNonUniform。。。

var elem = document.querySelector('#test');
var transformList = elem.transform.baseVal,
transform = transformList.getItem(0),
matrix = transform.matrix;
transform.setMatrix(matrix.scaleNonUniform(1.1, 4));
transformList.replaceItem(transform, 0);

html, body {
width: 100%;
height: 100%;
}

<svg width="100%" height="100%">
<rect width="100" height="100" id="test" transform="matrix(1, 0, 0, 1, 0, 0)"></rect>
</svg>