Question

当我将svg.js lib与javascript一起使用时，可以通过SVG.Matrix转换给定元素，如下所示：

import * as SVG from 'svg.js';

let draw = SVG('drawing').size(200, 200);
let rect = draw.rect(100, 100).attr({ fill: '#f06' });
rect.translate(100,100);
let matrix = new SVG.Matrix(rect);
let rect2 = draw.rect(100, 100).attr({ fill: '#f60' });
rect2.transform(matrix);

在该示例中，第二个rect像第一个rect一样通过SVG.Matrix进行了转换：

<svg id="SvgjsSvg1001" width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs"><defs id="SvgjsDefs1002"></defs><rect id="SvgjsRect1008" width="100" height="100" fill="#ff0066" transform="matrix(1,0,0,1,100,100)"></rect><rect id="SvgjsRect1009" width="100" height="100" fill="#ff6600" transform="matrix(1,0,0,1,100,100)"></rect></svg>

但是打字稿中声明的代码相同：

[ts]
Argument of type 'Matrix' is not assignable to parameter of type 'Transform'.
  Types of property 'skewX' are incompatible.
    Type '(x: number, cx?: number, cy?: number) => Matrix' is not assignable to type 'number'.

如何通过打字稿中的SVG.Matrix转换元素？为什么svgjs.Element.transform与ts一起使用时会表现出不同？

Answer 1

svg.js.d.ts告诉Element.transform拥有这个signature：

interface Element {
    transform(t: Transform, relative?: boolean): Element;
    transform(): Transform;
    ...
}

所以，这应该起作用：

const transform = rect.transform();
let rect2 = draw.rect(100, 100).attr({ fill: '#f60' });
rect2.transform(transform);

本质上，Transform和Matrix对象都具有a / b / c / d / e / f属性，因此在Javascript中，一个可以代替另一个，但是在Typescript中，它们可以使用没有原型关系，编译器抱怨。

实际上是打字错误。查看源代码，该转换是由calling new Matrix(t)实现的，因此对.transform()的签名应为：

transform(t: MatrixAlias, relative?: boolean): Element;

如何在打字稿中使用带有矩阵参数的svg.js转换？

1 个答案: