JavaScript SVG Matrix scaleY ignored-CodePudding

I'm trying to scale a SVG element using scale() method from matrix, but scaleY parameter is ignored.

I expect the element to scale 4 times on Y axis, but second parameter to scale is ignored. Am I doing something wrong?

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>

CodePudding user response：

Per the SVG specification scale takes a single argument. You need 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>