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 规范，scale 采用单个参数。你需要 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>

JavaScript 忽略 SVG 矩阵 scaleY

JavaScript SVG Matrix scaleY ignored

svg

matrix

scale