几何接口模块第1级

1. 简介

本节为非规范性内容。

本规范描述了多个几何接口，用于表示点、矩形、四边形，以及3x2和4x4尺寸的变换矩阵。

SVG 接口 SVGPoint、SVGRect 和 SVGMatrix 是这里定义的接口的别名，以便于 SVG、Canvas 2D 上下文以及 CSS 变换通用接口的统一使用。[SVG11] [HTML] [CSS3-TRANSFORMS]

测试

2. DOMPoint 接口

二维或三维点可以通过以下 WebIDL 接口表示：

[Exposed=(Window,Worker),
 Serializable]
interface DOMPointReadOnly {
    constructor(optional unrestricted double x = 0, optional unrestricted double y = 0,
            optional unrestricted double z = 0, optional unrestricted double w = 1);

    [NewObject] static DOMPointReadOnly fromPoint(optional DOMPointInit other = {});

    readonly attribute unrestricted double x;
    readonly attribute unrestricted double y;
    readonly attribute unrestricted double z;
    readonly attribute unrestricted double w;

    [NewObject] DOMPoint matrixTransform(optional DOMMatrixInit matrix = {});

    [Default] object toJSON();
};

[Exposed=(Window,Worker),
 Serializable,
 LegacyWindowAlias=SVGPoint]
interface DOMPoint : DOMPointReadOnly {
    constructor(optional unrestricted double x = 0, optional unrestricted double y = 0,
            optional unrestricted double z = 0, optional unrestricted double w = 1);

    [NewObject] static DOMPoint fromPoint(optional DOMPointInit other = {});

    inherit attribute unrestricted double x;
    inherit attribute unrestricted double y;
    inherit attribute unrestricted double z;
    inherit attribute unrestricted double w;
};

dictionary DOMPointInit {
    unrestricted double x = 0;
    unrestricted double y = 0;
    unrestricted double z = 0;
    unrestricted double w = 1;
};

以下算法假定 DOMPointReadOnly 对象具有内部成员变量 x 坐标、y 坐标、z 坐标和 w 透视值。DOMPointReadOnly 以及继承接口 DOMPoint 必须能访问和设置这些变量的值。

通过属性或函数返回 DOMPointReadOnly 对象的接口，可以修改内部成员变量值。此类接口必须以描述方式明确指定该能力。

内部成员变量不得以任何方式暴露。

DOMPointReadOnly(x, y, z, w) 和 DOMPoint(x, y, z, w) 构造函数被调用时，需执行以下步骤：

令 point 为一个新的 DOMPointReadOnly 或 DOMPoint 对象，视情况而定。
将 point 的变量 x 坐标设为 x，y 坐标设为 y，z 坐标设为 z，w 透视值设为 w。
返回 point。

测试

DOMPoint-001.html （在线测试）（源码）

fromPoint(other) 静态方法在 DOMPointReadOnly 上，必须根据字典创建 DOMPointReadOnly，参数为 other。

fromPoint(other) 静态方法在 DOMPoint 上，必须根据字典创建 DOMPoint，参数为 other。

要根据字典创建 DOMPointReadOnly other，或根据字典创建 DOMPoint other，按照如下步骤：

令 point 为一个新的 DOMPointReadOnly 或 DOMPoint 对象，视情况而定。
将 point 的变量 x 坐标设为 other 的 x 字典成员，y 坐标设为 other 的 y 字典成员，z 坐标设为 other 的 z 字典成员，w 透视值设为 other 的 w 字典成员。
返回 point。

x 属性，在获取时，必须返回 x 坐标的值。对于 DOMPoint 接口，设置 x 属性时，必须将 x 坐标设为新值。

y 属性，在获取时，必须返回 y 坐标的值。对于 DOMPoint 接口，设置 y 属性时，必须将 y 坐标设为新值。

z 属性，在获取时，必须返回 z 坐标的值。对于 DOMPoint 接口，设置 z 属性时，必须将 z 坐标设为新值。

w 属性，在获取时，必须返回 w 透视值的值。对于 DOMPoint 接口，设置 w 属性时，必须将 w 透视值设为新值。

matrixTransform(matrix) 方法调用时，需执行以下步骤：

令 matrixObject 为调用根据字典创建 DOMMatrix，参数为 matrix 的结果。
返回调用用矩阵变换点的结果，参数为当前点和 matrixObject。当前点不会被修改。

在此示例中，matrixTransform() 方法被用于一个 DOMPoint 实例，并传入一个 DOMMatrix 实例作为参数。

var point = new DOMPoint(5, 4);
var matrix = new DOMMatrix([2, 0, 0, 2, 10, 10]);
var transformedPoint = point.matrixTransform(matrix);

point 变量被赋值为一个新的 DOMPoint 对象，其 x 坐标初始化为 5，y 坐标初始化为 4。这个新的 DOMPoint 随后会被 matrix 缩放和位移。结果 transformedPoint 的 x 坐标为 20，y 坐标为 18。

测试

DOMPoint-002.html （在线测试）（源码）

2.1. 用矩阵变换点

要用点和矩阵做变换，参数为 point 和 matrix：

令 x 为 point 的 x 坐标。
令 y 为 point 的 y 坐标。
令 z 为 point 的 z 坐标。
令 w 为 point 的 w 透视值。
令 pointVector 为一个新列向量，其元素依次为 x、y、z、w。
$[\begin{matrix} x \\ y \\ z \\ w \end{matrix}]$
将 pointVector 设为 matrix 对 pointVector 的左乘。
令 transformedPoint 为一个新的 DOMPoint 对象。
将 transformedPoint 的 x 坐标设为 pointVector 的第一个元素。
将 transformedPoint 的 y 坐标设为 pointVector 的第二个元素。
将 transformedPoint 的 z 坐标设为 pointVector 的第三个元素。
将 transformedPoint 的 w 透视值设为 pointVector 的第四个元素。
返回 transformedPoint。

注意：如果 matrix 的 is 2D 为真，point 的 z 坐标为 0 或 -0，且 point 的 w 透视值为 1，则为二维变换。否则为三维变换。

3. DOMRect 接口

实现 DOMRectReadOnly 接口的对象表示一个矩形。

矩形具有如下属性：

原点: 当矩形具有非负宽度时，矩形的水平原点在左边缘；否则在右边缘。同样，当矩形具有非负高度时，矩形的垂直原点在上边缘；否则在下边缘。
x 坐标: 视口左边缘到矩形原点的水平距离。
y 坐标: 视口上边缘到矩形原点的垂直距离。
宽度: 矩形的宽度。可以为负。
高度: 矩形的高度。可以为负。

[Exposed=(Window,Worker),
 Serializable]
interface DOMRectReadOnly {
    constructor(optional unrestricted double x = 0, optional unrestricted double y = 0,
            optional unrestricted double width = 0, optional unrestricted double height = 0);

    [NewObject] static DOMRectReadOnly fromRect(optional DOMRectInit other = {});

    readonly attribute unrestricted double x;
    readonly attribute unrestricted double y;
    readonly attribute unrestricted double width;
    readonly attribute unrestricted double height;
    readonly attribute unrestricted double top;
    readonly attribute unrestricted double right;
    readonly attribute unrestricted double bottom;
    readonly attribute unrestricted double left;

    [Default] object toJSON();
};

[Exposed=(Window,Worker),
 Serializable,
 LegacyWindowAlias=SVGRect]
interface DOMRect : DOMRectReadOnly {
    constructor(optional unrestricted double x = 0, optional unrestricted double y = 0,
            optional unrestricted double width = 0, optional unrestricted double height = 0);

    [NewObject] static DOMRect fromRect(optional DOMRectInit other = {});

    inherit attribute unrestricted double x;
    inherit attribute unrestricted double y;
    inherit attribute unrestricted double width;
    inherit attribute unrestricted double height;
};

dictionary DOMRectInit {
    unrestricted double x = 0;
    unrestricted double y = 0;
    unrestricted double width = 0;
    unrestricted double height = 0;
};

以下算法假定 DOMRectReadOnly 对象具有如下内部成员变量：x 坐标、y 坐标、宽度和高度。DOMRectReadOnly 以及继承接口 DOMRect 必须能够访问和设置这些变量的值。

通过属性或函数返回 DOMRectReadOnly 对象的接口可能能修改内部成员变量的值。此类接口必须在描述中明确说明这种能力。

内部成员变量不得以任何方式暴露。

DOMRectReadOnly(x, y, width, height) 和 DOMRect(x, y, width, height) 构造函数调用时，必须执行以下步骤：

令 rect 为一个新的 DOMRectReadOnly 或 DOMRect 对象，视情况而定。
将 rect 的变量 x 坐标设为 x，y 坐标设为 y，宽度设为 width，高度设为 height。
返回 rect。

DOMRectReadOnly 静态方法 fromRect(other) 必须根据字典创建 DOMRectReadOnly，参数为 other。

DOMRect 静态方法fromRect(other) 必须根据字典创建 DOMRect，参数为other。

要根据字典创建 DOMRectReadOnly other，或根据字典创建 DOMRect other，遵循如下步骤：

令 rect 为一个新的 DOMRectReadOnly 或 DOMRect，视情况而定。
将 rect 的变量 x 坐标设为 other 的 x 字典成员，y 坐标设为 other 的 y 字典成员，宽度设为 other 的 width 字典成员，高度设为 other 的 height 字典成员。
返回 rect。

x 属性，获取时必须返回 x 坐标的值。对于 DOMRect 接口，设置 x 属性时必须将 x 坐标设为新值。

y 属性，获取时必须返回 y 坐标的值。对于 DOMRect 接口，设置 y 属性时必须将 y 坐标设为新值。

width 属性，获取时必须返回宽度的值。对于 DOMRect 接口，设置 width 属性时必须将宽度设为新值。

height 属性，获取时必须返回高度的值。对于 DOMRect 接口，设置 height 属性时必须将高度设为新值。

top 属性，获取时必须返回 NaN-安全最小值，取 y 坐标和 y 坐标加高度的和。

right 属性，获取时必须返回 NaN-安全最大值，取 x 坐标和 x 坐标加宽度的和。

bottom 属性，获取时必须返回 NaN-安全最大值，取 y 坐标和 y 坐标加高度的和。

left 属性，获取时必须返回 NaN-安全最小值，取 x 坐标和 x 坐标加宽度的和。

测试

4. DOMRectList 接口

[Exposed=Window]
interface DOMRectList {
    readonly attribute unsigned long length;
    getter DOMRect? item(unsigned long index);
};

length 属性必须返回与该对象关联的 DOMRect 对象的总数。

item(index) 方法被调用时，如果 index 大于等于与 DOMRect 对象数量，则返回 null。否则，返回 index 处的 DOMRect 对象。索引从零开始。

DOMRectList 仅用于兼容旧 Web 内容。当制定新的 API 时，不得使用 DOMRectList。请使用 sequence<DOMRect> 替代。[WEBIDL]

测试

DOMRectList.html （在线测试）（源码）

5. DOMQuad 接口

实现 DOMQuad 接口的对象表示一个四边形。

[Exposed=(Window,Worker),
 Serializable]
interface DOMQuad {
    constructor(optional DOMPointInit p1 = {}, optional DOMPointInit p2 = {},
            optional DOMPointInit p3 = {}, optional DOMPointInit p4 = {});

    [NewObject] static DOMQuad fromRect(optional DOMRectInit other = {});
    [NewObject] static DOMQuad fromQuad(optional DOMQuadInit other = {});

    [SameObject] readonly attribute DOMPoint p1;
    [SameObject] readonly attribute DOMPoint p2;
    [SameObject] readonly attribute DOMPoint p3;
    [SameObject] readonly attribute DOMPoint p4;
    [NewObject] DOMRect getBounds();

    [Default] object toJSON();
};

dictionary DOMQuadInit {
  DOMPointInit p1;
  DOMPointInit p2;
  DOMPointInit p3;
  DOMPointInit p4;
};

以下算法假定 DOMQuad 对象具有内部成员变量：点 1、点 2、点 3、点 4，这些都是 DOMPoint 对象。DOMQuad 必须能够访问和设置这些变量的值。开发者可修改这些 DOMPoint 对象，会直接影响四边形。

通过属性或函数返回 DOMQuad 对象的接口可能能够修改内部成员变量值。此类接口必须在文中明确说明该能力。

内部成员变量不得以任何方式暴露。

DOMQuad(p1, p2, p3, p4) 构造函数调用时，需执行如下步骤：

令 point1 为新的 DOMPoint 对象，其属性值设为 p1 字典成员的同名属性值。
令 point2 为新的 DOMPoint 对象，其属性值设为 p2 字典成员的同名属性值。
令 point3 为新的 DOMPoint 对象，其属性值设为 p3 字典成员的同名属性值。
令 point4 为新的 DOMPoint 对象，其属性值设为 p4 字典成员的同名属性值。
返回新的 DOMQuad，其点 1 设为 point1，点 2 设为 point2，点 3 设为 point3，点 4 设为 point4。

注意：也可以传入 DOMPoint 或 DOMPointReadOnly 类型参数。传入参数会按照 WebIDL 规则在内部转换为正确的对象类型。[WEBIDL]

静态方法 fromRect(other) 在 DOMQuad 上必须根据 DOMRectInit 字典创建 DOMQuad，参数为 other。

要根据 DOMRectInit 字典创建 DOMQuad other，按照如下步骤：

令 x、y、width 和 height 依次为 other 的 x、 y、 width 和 height 字典成员的值。
令 point1 为新的 DOMPoint 对象，x 坐标设为 x，y 坐标设为 y，z 坐标设为 0，w 透视值设为 1。
令 point2 为新的 DOMPoint 对象，x 坐标设为 x + width，y 坐标设为 y，z 坐标设为 0，w 透视值设为 1。
令 point3 为新的 DOMPoint 对象，x 坐标设为 x + width，y 坐标设为 y + height，z 坐标设为 0，w 透视值设为 1。
令 point4 为新的 DOMPoint 对象，x 坐标设为 x，y 坐标设为 y + height，z 坐标设为 0，w 透视值设为 1。
返回新的 DOMQuad，其点 1 设为 point1，点 2 设为 point2，点 3 设为 point3，点 4 设为 point4。

静态方法 fromQuad(other) 在 DOMQuad 上必须根据 DOMQuadInit 字典创建 DOMQuad，参数为 other。

要根据 DOMQuadInit 字典创建 DOMQuad other，遵循如下步骤：

令 point1 为调用根据字典创建 DOMPoint，参数为 other 的 p1 字典成员（如存在）的结果。
令 point2 为调用根据字典创建 DOMPoint，参数为 other 的 p2 字典成员（如存在）的结果。
令 point3 为调用根据字典创建 DOMPoint，参数为 other 的 p3 字典成员（如存在）的结果。
令 point4 为调用根据字典创建 DOMPoint，参数为 other 的 p4 字典成员（如存在）的结果。
返回新的 DOMQuad，其点 1 设为 point1，点 2 设为 point2，点 3 设为 point3，点 4 设为 point4。

p1 属性必须返回点 1。

p2 属性必须返回点 2。

p3 属性必须返回点 3。

p4 属性必须返回点 4。

getBounds() 方法被调用时，应执行以下算法：

令 bounds 为一个 DOMRect 对象。
令 left 为 NaN-安全最小值，比较点 1 的 x 坐标、点 2的 x 坐标、点 3的 x 坐标和点 4的 x 坐标。
令 top 为 NaN-安全最小值，比较点 1的 y 坐标、点 2的 y 坐标、点 3的 y 坐标和点 4的 y 坐标。
令 right 为 NaN-安全最大值，比较点 1的 x 坐标、点 2的 x 坐标、点 3的 x 坐标和点 4的 x 坐标。
令 bottom 为 NaN-安全最大值，比较点 1的 y 坐标、点 2的 y 坐标、点 3的 y 坐标和点 4的 y 坐标。
将 bounds 的 x 坐标设为 left，y 坐标设为 top，宽度设为 right - left，高度设为 bottom - top。
返回 bounds。

测试

本示例中，DOMQuad 构造函数以 DOMPoint 和 DOMPointInit 类型参数调用，两种参数类型均可接受并使用。

var point = new DOMPoint(2, 0);
var quad1 = new DOMQuad(point, {x: 12, y: 0}, {x: 12, y: 10}, {x: 2, y: 10});

上述 DOMQuad quad1 的属性值也等价于下方 DOMQuad quad2 的属性值：

var rect = new DOMRect(2, 0, 10, 10);
var quad2 = DOMQuad.fromRect(rect);

下方是不规则四边形的示例：

new DOMQuad({x: 40, y: 25}, {x: 180, y: 8}, {x: 210, y: 150}, {x: 10, y: 180});

由 DOMQuad 表示的不规则四边形。四个红色圆点表示 DOMPoint 属性 p1 到 p4。虚线矩形表示由 getBounds() 方法返回的外接矩形，该方法属于 DOMQuad。

6. DOMMatrix 接口

DOMMatrix 和 DOMMatrixReadOnly 接口分别表示在图形环境中用于描述变换的数学矩阵。以下各节详细说明了该接口的内容。

[\begin{matrix} m_{11} & m_{21} & m_{31} & m_{41} \\ m_{12} & m_{22} & m_{32} & m_{42} \\ m_{13} & m_{23} & m_{33} & m_{43} \\ m_{14} & m_{24} & m_{34} & m_{44} \end{matrix}]

一个4x4 抽象矩阵，包含 m₁₁ 到 m₄₄ 的各项。

在以下章节，相关术语有如下含义：

后乘: 术语 A 被 B 后乘，等价于 A · B。
前乘: 术语 A 被 B 前乘，等价于 B · A。
相乘: 术语 A 与 B 相乘，等价于 A · B。

[Exposed=(Window,Worker),
 Serializable]
interface DOMMatrixReadOnly {
    constructor(optional (DOMString or sequence<unrestricted double>) init);

    [NewObject] static DOMMatrixReadOnly fromMatrix(optional DOMMatrixInit other = {});
    [NewObject] static DOMMatrixReadOnly fromFloat32Array(Float32Array array32);
    [NewObject] static DOMMatrixReadOnly fromFloat64Array(Float64Array array64);

    // These attributes are simple aliases for certain elements of the 4x4 matrix
    readonly attribute unrestricted double a;
    readonly attribute unrestricted double b;
    readonly attribute unrestricted double c;
    readonly attribute unrestricted double d;
    readonly attribute unrestricted double e;
    readonly attribute unrestricted double f;

    readonly attribute unrestricted double m11;
    readonly attribute unrestricted double m12;
    readonly attribute unrestricted double m13;
    readonly attribute unrestricted double m14;
    readonly attribute unrestricted double m21;
    readonly attribute unrestricted double m22;
    readonly attribute unrestricted double m23;
    readonly attribute unrestricted double m24;
    readonly attribute unrestricted double m31;
    readonly attribute unrestricted double m32;
    readonly attribute unrestricted double m33;
    readonly attribute unrestricted double m34;
    readonly attribute unrestricted double m41;
    readonly attribute unrestricted double m42;
    readonly attribute unrestricted double m43;
    readonly attribute unrestricted double m44;

    readonly attribute boolean is2D;
    readonly attribute boolean isIdentity;

    // Immutable transform methods
    [NewObject] DOMMatrix translate(optional unrestricted double tx = 0,
                                    optional unrestricted double ty = 0,
                                    optional unrestricted double tz = 0);
    [NewObject] DOMMatrix scale(optional unrestricted double scaleX = 1,
                                optional unrestricted double scaleY,
                                optional unrestricted double scaleZ = 1,
                                optional unrestricted double originX = 0,
                                optional unrestricted double originY = 0,
                                optional unrestricted double originZ = 0);
    [NewObject] DOMMatrix scaleNonUniform(optional unrestricted double scaleX = 1,
                                          optional unrestricted double scaleY = 1);
    [NewObject] DOMMatrix scale3d(optional unrestricted double scale = 1,
                                  optional unrestricted double originX = 0,
                                  optional unrestricted double originY = 0,
                                  optional unrestricted double originZ = 0);
    [NewObject] DOMMatrix rotate(optional unrestricted double rotX = 0,
                                 optional unrestricted double rotY,
                                 optional unrestricted double rotZ);
    [NewObject] DOMMatrix rotateFromVector(optional unrestricted double x = 0,
                                           optional unrestricted double y = 0);
    [NewObject] DOMMatrix rotateAxisAngle(optional unrestricted double x = 0,
                                          optional unrestricted double y = 0,
                                          optional unrestricted double z = 0,
                                          optional unrestricted double angle = 0);
    [NewObject] DOMMatrix skewX(optional unrestricted double sx = 0);
    [NewObject] DOMMatrix skewY(optional unrestricted double sy = 0);
    [NewObject] DOMMatrix multiply(optional DOMMatrixInit other = {});
    [NewObject] DOMMatrix flipX();
    [NewObject] DOMMatrix flipY();
    [NewObject] DOMMatrix inverse();

    [NewObject] DOMPoint transformPoint(optional DOMPointInit point = {});
    [NewObject] Float32Array toFloat32Array();
    [NewObject] Float64Array toFloat64Array();

    [Exposed=Window] stringifier;
    [Default] object toJSON();
};

[Exposed=(Window,Worker),
 Serializable,
 LegacyWindowAlias=(SVGMatrix,WebKitCSSMatrix)]
interface DOMMatrix : DOMMatrixReadOnly {
    constructor(optional (DOMString or sequence<unrestricted double>) init);

    [NewObject] static DOMMatrix fromMatrix(optional DOMMatrixInit other = {});
    [NewObject] static DOMMatrix fromFloat32Array(Float32Array array32);
    [NewObject] static DOMMatrix fromFloat64Array(Float64Array array64);

    // These attributes are simple aliases for certain elements of the 4x4 matrix
    inherit attribute unrestricted double a;
    inherit attribute unrestricted double b;
    inherit attribute unrestricted double c;
    inherit attribute unrestricted double d;
    inherit attribute unrestricted double e;
    inherit attribute unrestricted double f;

    inherit attribute unrestricted double m11;
    inherit attribute unrestricted double m12;
    inherit attribute unrestricted double m13;
    inherit attribute unrestricted double m14;
    inherit attribute unrestricted double m21;
    inherit attribute unrestricted double m22;
    inherit attribute unrestricted double m23;
    inherit attribute unrestricted double m24;
    inherit attribute unrestricted double m31;
    inherit attribute unrestricted double m32;
    inherit attribute unrestricted double m33;
    inherit attribute unrestricted double m34;
    inherit attribute unrestricted double m41;
    inherit attribute unrestricted double m42;
    inherit attribute unrestricted double m43;
    inherit attribute unrestricted double m44;

    // Mutable transform methods
    DOMMatrix multiplySelf(optional DOMMatrixInit other = {});
    DOMMatrix preMultiplySelf(optional DOMMatrixInit other = {});
    DOMMatrix translateSelf(optional unrestricted double tx = 0,
                            optional unrestricted double ty = 0,
                            optional unrestricted double tz = 0);
    DOMMatrix scaleSelf(optional unrestricted double scaleX = 1,
                        optional unrestricted double scaleY,
                        optional unrestricted double scaleZ = 1,
                        optional unrestricted double originX = 0,
                        optional unrestricted double originY = 0,
                        optional unrestricted double originZ = 0);
    DOMMatrix scale3dSelf(optional unrestricted double scale = 1,
                          optional unrestricted double originX = 0,
                          optional unrestricted double originY = 0,
                          optional unrestricted double originZ = 0);
    DOMMatrix rotateSelf(optional unrestricted double rotX = 0,
                         optional unrestricted double rotY,
                         optional unrestricted double rotZ);
    DOMMatrix rotateFromVectorSelf(optional unrestricted double x = 0,
                                   optional unrestricted double y = 0);
    DOMMatrix rotateAxisAngleSelf(optional unrestricted double x = 0,
                                  optional unrestricted double y = 0,
                                  optional unrestricted double z = 0,
                                  optional unrestricted double angle = 0);
    DOMMatrix skewXSelf(optional unrestricted double sx = 0);
    DOMMatrix skewYSelf(optional unrestricted double sy = 0);
    DOMMatrix invertSelf();

    [Exposed=Window] DOMMatrix setMatrixValue(DOMString transformList);
};

dictionary DOMMatrix2DInit {
    unrestricted double a;
    unrestricted double b;
    unrestricted double c;
    unrestricted double d;
    unrestricted double e;
    unrestricted double f;
    unrestricted double m11;
    unrestricted double m12;
    unrestricted double m21;
    unrestricted double m22;
    unrestricted double m41;
    unrestricted double m42;
};

dictionary DOMMatrixInit : DOMMatrix2DInit {
    unrestricted double m13 = 0;
    unrestricted double m14 = 0;
    unrestricted double m23 = 0;
    unrestricted double m24 = 0;
    unrestricted double m31 = 0;
    unrestricted double m32 = 0;
    unrestricted double m33 = 1;
    unrestricted double m34 = 0;
    unrestricted double m43 = 0;
    unrestricted double m44 = 1;
    boolean is2D;
};

以下算法假定 DOMMatrixReadOnly 对象具有如下内部成员变量：m11 元素、m12 元素、m13 元素、m14 元素、m21 元素、m22 元素、m23 元素、m24 元素、m31 元素、m32 元素、m33 元素、m34 元素、m41 元素、m42 元素、m43 元素、m44 元素以及 is 2D。DOMMatrixReadOnly 与其继承接口 DOMMatrix 必须能访问和设置这些变量的值。

通过属性或函数返回 DOMMatrixReadOnly 对象的接口可能能修改内部成员变量值。此类接口必须在说明中明确指定这种能力。

内部成员变量不得以任何方式暴露。

DOMMatrix 和 DOMMatrixReadOnly 替代了 SVG 的 SVGMatrix 接口。[SVG11]

测试

6.1. DOMMatrix2DInit 和 DOMMatrixInit 字典

要验证与修正（2D）一个 DOMMatrix2DInit 或 DOMMatrixInit 字典 dict，执行下列步骤：

如果 dict 满足下列任意条件，则抛出 TypeError 异常并终止这些步骤。
- a 和 m11 同时存在且 SameValueZero(a, m11) 为 false。
- b 和 m12 同时存在且 SameValueZero(b, m12) 为 false。
- c 和 m21 同时存在且 SameValueZero(c, m21) 为 false。
- d 和 m22 同时存在且 SameValueZero(d, m22) 为 false。
- e 和 m41 同时存在且 SameValueZero(e, m41) 为 false。
- f 和 m42 同时存在且 SameValueZero(f, m42) 为 false。
如果 m11 未指定，则设为成员 a 的值，如果 a 也未指定，则设为 1。
如果 m12 未指定，则设为成员 b 的值，如果 b 也未指定，则设为 0。
如果 m21 未指定，则设为成员 c 的值，如果 c 也未指定，则设为 0。
如果 m22 未指定，则设为成员 d 的值，如果 d 也未指定，则设为 1。
如果 m41 未指定，则设为成员 e 的值，如果 e 也未指定，则设为 0。
如果 m42 未指定，则设为成员 f 的值，如果 f 也未指定，则设为 0。

注意：SameValueZero 比较算法对于两个 NaN 值以及 0 与 -0 也返回 true。[ECMA-262]

要验证与修正一个 DOMMatrixInit 字典 dict，执行如下步骤：

验证与修正（2D） dict。
如果 is2D 为 true 且以下情况之一为真：m13、 m14、 m23、 m24、 m31、 m32、 m34、 m43 其中至少一个的值不是 0 或 -0，或者 m33、 m44 其中至少一个的值不是 1，则抛出 TypeError 异常并终止这些步骤。
如果 is2D 未指定，且任一 m13、 m14、 m23、 m24、 m31、 m32、 m34、 m43 其中至少一个的值不是 0 或 -0，或者 m33、 m44 其中至少一个的值不是 1，则将 is2D 设为 false。
如果 is2D 仍未指定，则设为 true。

测试

6.2. 将字符串解析为抽象矩阵

要将字符串解析为抽象矩阵，给定字符串 transformList，应运行下列步骤。该操作要么返回一个4x4 抽象矩阵及布尔值 2dTransform，要么返回失败。

如果 transformList 是空字符串，则将其设为字符串 "matrix(1, 0, 0, 1, 0, 0)"。
解析 transformList 得到 parsedValue，解析语法为 CSS transform 属性。结果是 <transform-list>、关键字 none 或失败。如果 parsedValue 为失败，或任一 <transform-function> 包含没有绝对长度单位的 <length> 值，或使用了 none 之外的关键字，则返回失败。[CSS3-SYNTAX] [CSS3-TRANSFORMS]
如果 parsedValue 为 none，则将 parsedValue 设为一个只包含单一单位矩阵的 <transform-list>。
2dTransform 用于追踪 parsedValue 的 2D/3D 维度状态。

如果 parsedValue 包含任意三维变换函数

将 2dTransform 设为 false。

否则

将 2dTransform 设为 true。
将所有 <transform-function> 转换为4x4 抽象矩阵，方法参照“变换函数的数学描述”。[CSS3-TRANSFORMS]
令 matrix 为 4x4 抽象矩阵（如本节开头图示）。后乘所有矩阵，从左到右，将 matrix 设为所得乘积。
返回 matrix 与 2dTransform。

6.3. 创建 DOMMatrixReadOnly 和 DOMMatrix 对象

要创建二维矩阵，类型 type 可为 DOMMatrixReadOnly 或 DOMMatrix，使用长度为6的序列 init，需按以下步骤执行：

令 matrix 为 type 的新实例。
依次将 m11 元素、m12 元素、m21 元素、m22 元素、m41 元素和 m42 元素设置为 init 中对应的值。
将 m13 元素、m14 元素、m23 元素、m24 元素、m31 元素、m32 元素、m34 元素和 m43 元素都设置为 0。
将 m33 元素和 m44 元素设置为 1。
将 is 2D 设为 true。
返回 matrix

要创建三维矩阵，type 可为 DOMMatrixReadOnly 或 DOMMatrix，使用长度为16的序列 init，按以下步骤：

令 matrix 为 type 的新实例。
将 m11 元素到 m44 元素按列主序赋值为 init 中的值。
将 is 2D 设为 false。
返回 matrix

DOMMatrixReadOnly(init) 和 DOMMatrix(init) 构造函数必须遵循下列步骤：

如果 init 未指定

返回调用创建二维矩阵的结果，类型为 DOMMatrixReadOnly 或 DOMMatrix，并以序列 [1, 0, 0, 1, 0, 0] 初始化。

如果 init 是 DOMString

如果当前全局对象不是 Window 对象，则抛出 TypeError 异常。
解析 init 为抽象矩阵，令 matrix 和 2dTransform 为结果。如果结果为失败，则抛出 "SyntaxError" DOMException。
如果 2dTransform 为 true

返回调用创建二维矩阵的结果，类型为 DOMMatrixReadOnly 或 DOMMatrix，以编号序列 matrix 的 m11、m12、m21、m22、m41、m42 元素。

否则

返回调用创建三维矩阵的结果，类型为 DOMMatrixReadOnly 或 DOMMatrix，按 matrix 的 16 元素编号序列。

如果 init 是具有 6 个元素的序列

返回调用创建二维矩阵的结果，类型为 DOMMatrixReadOnly 或 DOMMatrix，按 init 输入序列。

如果 init 是具有 16 个元素的序列

返回调用创建三维矩阵的结果，类型为 DOMMatrixReadOnly 或 DOMMatrix，按 init 输入序列。

否则

抛出 TypeError 异常。

测试

DOMMatrix-001.html （在线测试）（源码）

fromMatrix(other) 静态方法在 DOMMatrixReadOnly 上必须根据字典创建 DOMMatrixReadOnly，参数为 other。

fromMatrix(other) 静态方法在 DOMMatrix 上必须根据字典创建 DOMMatrix，参数为 other。

要根据二维字典创建 DOMMatrixReadOnly other 或根据二维字典创建 DOMMatrix other，按以下步骤：

验证与修正（2D） other。
返回调用创建二维矩阵的结果，类型为 DOMMatrixReadOnly 或 DOMMatrix，以 other 的 m11、 m12、 m21、 m22、 m41 和 m42 按给定顺序序列。

要根据字典创建 DOMMatrixReadOnly other 或根据字典创建 DOMMatrix other，按以下步骤：

验证与修正 other。
如果 other 的 is2D 字典成员为 true

返回调用创建二维矩阵的结果，类型为 DOMMatrixReadOnly 或 DOMMatrix，以 other 的 m11、 m12、 m21、 m22、 m41、 m42 六个元素作为序列。

否则

返回调用创建三维矩阵的结果，类型为 DOMMatrixReadOnly 或 DOMMatrix，按 other 的 m11、 m12、 m13、 ...、 m44 共16个元素按顺序序列。

fromFloat32Array(array32) 静态方法在 DOMMatrixReadOnly 上，与 fromFloat32Array(array32) 静态方法在 DOMMatrix 上必须遵循以下步骤：

如果 array32 有 6 个元素: 返回调用创建二维矩阵的结果，类型为 DOMMatrixReadOnly 或 DOMMatrix，按照 array32 里的值顺序。
如果 array32 有 16 个元素: 返回调用创建三维矩阵的结果，类型为 DOMMatrixReadOnly 或 DOMMatrix，按照 array32 里的值顺序。
否则: 抛出 TypeError 异常。

fromFloat64Array(array64) 静态方法在 DOMMatrixReadOnly 上，与 fromFloat64Array(array64) 静态方法在 DOMMatrix 上必须遵循以下步骤：

如果 array64 有 6 个元素: 返回调用创建二维矩阵的结果，类型为 DOMMatrixReadOnly 或 DOMMatrix，按照 array64 的值顺序。
如果 array64 有 16 个元素: 返回调用创建三维矩阵的结果，类型为 DOMMatrixReadOnly 或 DOMMatrix，按照 array64 的值顺序。
否则: 抛出 TypeError 异常。

6.4. DOMMatrix 属性

下列属性 m11 到 m44 对应于矩阵接口的16个项。

m11 和 a 属性，在获取时必须返回 m11 元素的值。对于 DOMMatrix 接口，设置 m11 或 a 属性时，必须将 m11 元素设为新值。

m12 和 b 属性，在获取时必须返回 m12 元素的值。对于 DOMMatrix 接口，设置 m12 或 b 属性时，必须将 m12 元素设为新值。

m13 属性，获取时返回 m13 元素的值。对于 DOMMatrix 接口，设置 m13 属性时，需设置 m13 元素为新值，且如果新值不是 0 或 -0，将 is 2D 设为 false。

m14 属性，获取时返回 m14 元素的值。对于 DOMMatrix 接口，设置 m14 属性时，需设置 m14 元素为新值，且如果新值不是 0 或 -0，将 is 2D 设为 false。

m21 和 c 属性，在获取时必须返回 m21 元素的值。对于 DOMMatrix 接口，设置 m21 或 c 属性时，必须将 m21 元素设为新值。

m22 和 d 属性，在获取时必须返回 m22 元素的值。对于 DOMMatrix 接口，设置 m22 或 d 属性时，必须将 m22 元素设为新值。

m23 属性，获取时返回 m23 元素的值。对于 DOMMatrix 接口，设置 m23 属性时，需设置 m23 元素为新值，且如果新值不是 0 或 -0，将 is 2D 设为 false。

m24 属性，获取时返回 m24 元素的值。对于 DOMMatrix 接口，设置 m24 属性时，需设置 m24 元素为新值，且如果新值不是 0 或 -0，将 is 2D 设为 false。

m31 属性，获取时返回 m31 元素的值。对于 DOMMatrix 接口，设置 m31 属性时，需设置 m31 元素为新值，且如果新值不是 0 或 -0，将 is 2D 设为 false。

m32 属性，获取时返回 m32 元素的值。对于 DOMMatrix 接口，设置 m32 属性时，需设置 m32 元素为新值，且如果新值不是 0 或 -0，将 is 2D 设为 false。

m33 属性，获取时返回 m33 元素的值。对于 DOMMatrix 接口，设置 m33 属性时，需设置 m33 元素为新值，且如果新值不是 1，将 is 2D 设为 false。

m34 属性，获取时返回 m34 元素的值。对于 DOMMatrix 接口，设置 m34 属性时，需设置 m34 元素为新值，且如果新值不是 0 或 -0，将 is 2D 设为 false。

m41 和 e 属性，在获取时必须返回 m41 元素的值。对于 DOMMatrix 接口，设置 m41 或 e 属性时，必须将 m41 元素设为新值。

m42 和 f 属性，在获取时必须返回 m42 元素的值。对于 DOMMatrix 接口，设置 m42 或 f 属性时，必须将 m42 元素设为新值。

m43 属性，获取时返回 m43 元素的值。对于 DOMMatrix 接口，设置 m43 属性时，需设置 m43 元素为新值，且如果新值不是 0 或 -0，将 is 2D 设为 false。

m44 属性，获取时返回 m44 元素的值。对于 DOMMatrix 接口，设置 m44 属性时，需设置 m44 元素为新值，且如果新值不是 1，将 is 2D 设为 false。

下列属性 a 到 f 对应于矩阵接口的二维分量。

a 属性是 m11 属性的别名。

b 属性是 m12 属性的别名。

c 属性是 m21 属性的别名。

d 属性是 m22 属性的别名。

e 属性是 m41 属性的别名。

f 属性是 m42 属性的别名。

测试

下列属性提供 DOMMatrixReadOnly 状态信息。

is2D 属性必须返回 is 2D 的值。

isIdentity 属性，当 m12 元素、m13 元素、m14 元素、m21 元素、m23 元素、m24 元素、m31 元素、m32 元素、m34 元素、m41 元素、m42 元素、m43 元素均为 0 或 -0，且 m11 元素、m22 元素、m33 元素、m44 元素均为 1 时，返回 true。否则返回 false。

每个 DOMMatrixReadOnly 对象必须用布尔值进行标记 is 2D。该标记表示：

当前矩阵被初始化为二维矩阵。详见各创建方法的具体说明。
仅应用了二维变换操作。每个可变或不可变变换方法会定义 is 2D 是否要被设为 false。

注意：is 2D 一旦之前被设为 false，在 DOMMatrix 对象上就不能再被设回 true（除了调用 setMatrixValue() 方法的例外情况）。

6.5. 不可变变换方法

以下方法不会修改当前矩阵，而是返回一个新的 DOMMatrix 对象。

translate(tx, ty, tz)

令 result 为以当前矩阵数值初始化的结果矩阵。
在 result 上执行 translateSelf() 变换，参数为 tx, ty, tz。
返回 result。

不会修改当前矩阵。

scale(scaleX, scaleY, scaleZ, originX, originY, originZ)

如果 scaleY 未指定，则设为 scaleX。
令 result 为以当前矩阵数值初始化的结果矩阵。
在 result 上执行 scaleSelf() 变换，参数为 scaleX, scaleY, scaleZ, originX, originY, originZ。
返回 result。

不会修改当前矩阵。

scaleNonUniform(scaleX, scaleY)

注意：为了兼容 SVG 1.1 SVGMatrix，而保留此方法。建议作者使用 scale()。

令 result 为以当前矩阵数值初始化的结果矩阵。
在 result 上执行 scaleSelf() 变换，参数为 scaleX, scaleY, 1, 0, 0, 0。
返回 result。

不会修改当前矩阵。

scale3d(scale, originX, originY, originZ)

令 result 为以当前矩阵数值初始化的结果矩阵。
在 result 上执行 scale3dSelf() 变换，参数为 scale, originX, originY, originZ。
返回 result。

不会修改当前矩阵。

rotate(rotX, rotY, rotZ)

令 result 为以当前矩阵数值初始化的结果矩阵。
在 result 上执行 rotateSelf() 变换，参数为 rotX, rotY, rotZ。
返回 result。

不会修改当前矩阵。

rotateFromVector(x, y)

令 result 为以当前矩阵数值初始化的结果矩阵。
在 result 上执行 rotateFromVectorSelf() 变换，参数为 x, y。
返回 result。

不会修改当前矩阵。

rotateAxisAngle(x, y, z, angle)

令 result 为以当前矩阵数值初始化的结果矩阵。
在 result 上执行 rotateAxisAngleSelf() 变换，参数为 x, y, z, angle。
返回 result。

不会修改当前矩阵。

skewX(sx)

令 result 为以当前矩阵数值初始化的结果矩阵。
在 result 上执行 skewXSelf() 变换，参数为 sx。
返回 result。

不会修改当前矩阵。

skewY(sy)

令 result 为以当前矩阵数值初始化的结果矩阵。
在 result 上执行 skewYSelf() 变换，参数为 sy。
返回 result。

不会修改当前矩阵。

multiply(other)

令 result 为以当前矩阵数值初始化的结果矩阵。
在 result 上执行 multiplySelf() 变换，参数为 other。
返回 result。

不会修改当前矩阵。

flipX()

令 result 为以当前矩阵数值初始化的结果矩阵。
后乘 result 和 new DOMMatrix([-1, 0, 0, 1, 0, 0])。
返回 result。

不会修改当前矩阵。

flipY()

令 result 为以当前矩阵数值初始化的结果矩阵。
后乘 result 和 new DOMMatrix([1, 0, 0, -1, 0, 0])。
返回 result。

不会修改当前矩阵。

inverse()

令 result 为以当前矩阵数值初始化的结果矩阵。
在 result 上执行 invertSelf() 变换。
返回 result。

不会修改当前矩阵。

测试

以下方法不会修改当前矩阵。

transformPoint(point)

令 pointObject 为调用根据字典创建 DOMPoint point 的结果。返回调用用矩阵变换点，参数为 pointObject 和当前矩阵。传入参数不会被修改。

toFloat32Array()

返回当前矩阵的16个元素 m11 到 m44 的序列（列主序存放），类型为 Float32Array。

toFloat64Array()

返回当前矩阵的16个元素 m11 到 m44 的序列（列主序存放），类型为 Float64Array。

字符串化行为

如果 m11 元素到 m44 元素中至少有一个值为非有限值，则抛出 "InvalidStateError" DOMException。

注意：CSS 语法无法表示 NaN 或 Infinity。
令 string 为空字符串。
如果 is 2D 为 true，则：
1. 追加 "matrix(" 到 string。
2. 追加 ! ToString(m11 元素) 到 string。
3. 追加 ", " 到 string。
4. 追加 ! ToString(m12 元素) 到 string。
5. 追加 ", " 到 string。
6. 追加 ! ToString(m21 元素) 到 string。
7. 追加 ", " 到 string。
8. 追加 ! ToString(m22 元素) 到 string。
9. 追加 ", " 到 string。
10. 追加 ! ToString(m41 元素) 到 string。
11. 追加 ", " 到 string。
12. 追加 ! ToString(m42 元素) 到 string。
13. 追加 ")" 到 string。
注意：该字符串形式为 CSS Transforms 的 <matrix()> 函数。[CSS3-TRANSFORMS]
否则：
1. 追加 "matrix3d(" 到 string。
2. 追加 ! ToString(m11 元素) 到 string。
3. 追加 ", " 到 string。
4. 追加 ! ToString(m12 元素) 到 string。
5. 追加 ", " 到 string。
6. 追加 ! ToString(m13 元素) 到 string。
7. 追加 ", " 到 string。
8. 追加 ! ToString(m14 元素) 到 string。
9. 追加 ", " 到 string。
10. 追加 ! ToString(m21 元素) 到 string。
11. 追加 ", " 到 string。
12. 追加 ! ToString(m22 元素) 到 string。
13. 追加 ", " 到 string。
14. 追加 ! ToString(m23 元素) 到 string。
15. 追加 ", " 到 string。
16. 追加 ! ToString(m24 元素) 到 string。
17. 追加 ", " 到 string。
18. 追加 ! ToString(m41 元素) 到 string。
19. 追加 ", " 到 string。
20. 追加 ! ToString(m42 元素) 到 string。
21. 追加 ", " 到 string。
22. 追加 ! ToString(m43 元素) 到 string。
23. 追加 ", " 到 string。
24. 追加 ! ToString(m44 元素) 到 string。
25. 追加 ")" 到 string。
注意：该字符串形式为 CSS Transforms 的 <matrix3d()> 函数。[CSS3-TRANSFORMS]
返回 string。

测试

DOMMatrix-stringifier.html （在线测试）（源码）

测试

DOMMatrix-003.html （在线测试）（源码）

在此示例中，创建了一个矩阵并调用了多个二维变换方法：

var matrix = new DOMMatrix();
matrix.scaleSelf(2);
matrix.translateSelf(20,20);
console.assert(matrix.toString() ===
                "matrix(2, 0, 0, 2, 40, 40)");

下方示例创建了一个矩阵，然后调用多个三维变换方法：

var matrix = new DOMMatrix();
matrix.scale3dSelf(2);
console.assert(matrix.toString() ===
                "matrix3d(2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1)");

对于三维运算，字符串化方法会返回一个代表三维矩阵的字符串。

此示例会抛出异常，因为矩阵中存在非有限值。

var matrix = new DOMMatrix([NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN]);
var string = matrix + " Batman!";

6.6. 可变变换方法

以下方法会修改当前矩阵，因此每个方法返回被调用的矩阵对象。这样做的主要好处是允许内容创作者链式调用方法。

以下代码示例：

var matrix = new DOMMatrix();
matrix.translateSelf(20, 20);
matrix.scaleSelf(2);
matrix.translateSelf(-20, -20);

等价于：

var matrix = new DOMMatrix();
matrix.translateSelf(20, 20).scaleSelf(2).translateSelf(-20, -20);

注意：建议需要链式调用方法的开发者使用可变变换方法，以避免在用户代理中因创建中间DOMMatrix 对象而发生不必要的内存分配。

multiplySelf(other)

令 otherObject 为调用根据字典创建 DOMMatrix，参数为 other 的结果。
将 otherObject 矩阵后乘到当前矩阵。
如果 is 2D 为 false，则当前矩阵的 is 2D 设为 false。
返回当前矩阵。

preMultiplySelf(other)

令 otherObject 为调用根据字典创建 DOMMatrix，参数为 other 的结果。
将 otherObject 矩阵前乘到当前矩阵。
如果 is 2D 为 false，则当前矩阵的 is 2D 设为 false。
返回当前矩阵。

translateSelf(tx, ty, tz)

后乘一个平移变换到当前矩阵。三维平移矩阵在 CSS Transforms 里有详细描述。[CSS3-TRANSFORMS]
如果 tz 已指定且不为 0 或 -0，将当前矩阵的 is 2D 设为 false。
返回当前矩阵。

scaleSelf(scaleX, scaleY, scaleZ, originX, originY, originZ)

对当前矩阵应用 translateSelf() 变换，参数为 originX、originY、originZ。
如果 scaleY 未指定，设为 scaleX。
后乘一个非均匀缩放变换到当前矩阵。三维缩放矩阵在 CSS Transforms 里有详细描述，参数为 sx = scaleX，sy = scaleY，sz = scaleZ。[CSS3-TRANSFORMS]
取 originX、originY、originZ 的相反数。
对当前矩阵应用 translateSelf() 变换，参数为 originX、originY、originZ。
若 scaleZ 不为 1，将当前矩阵的 is 2D 设为 false。
返回当前矩阵。

scale3dSelf(scale, originX, originY, originZ)

对当前矩阵应用 translateSelf() 变换，参数为 originX、originY、originZ。
后乘一个统一三维缩放变换（m11 = m22 = m33 = scale）到当前矩阵。三维缩放矩阵在 CSS Transforms 里有详细描述，参数为 sx = sy = sz = scale。[CSS3-TRANSFORMS]
对当前矩阵应用 translateSelf() 变换，参数为 -originX、 -originY、 -originZ。
如果 scale 不为 1，将当前矩阵的 is 2D 设为 false。
返回当前矩阵。

rotateSelf(rotX, rotY, rotZ)

如果 rotY 和 rotZ 都未指定，设 rotZ 为 rotX，rotX 和 rotY 设为 0。
如果 rotY 仍未指定，设为 0。
如果 rotZ 仍未指定，设为 0。
如果 rotX 或 rotY 不为 0 或 -0，将当前矩阵的 is 2D 设为 false。
后乘一个围绕矢量 0,0,1 的旋转变换到当前矩阵，按指定rotZ度数旋转。三维旋转矩阵在 CSS Transforms有详细描述，参数 alpha = rotZ（度数）。[CSS3-TRANSFORMS]
后乘一个围绕矢量 0,1,0 的旋转变换到当前矩阵，按指定rotY度数旋转。三维旋转矩阵在 CSS Transforms有详细描述，参数 alpha = rotY（度数）。[CSS3-TRANSFORMS]
后乘一个围绕矢量 1,0,0 的旋转变换到当前矩阵，按指定rotX度数旋转。三维旋转矩阵在 CSS Transforms有详细描述，参数 alpha = rotX（度数）。[CSS3-TRANSFORMS]
返回当前矩阵。

rotateFromVectorSelf(x, y)

后乘一个旋转变换到当前矩阵。旋转角度由向量(1,0)^T和(x,y)^T之间的夹角（顺时针方向）决定。如果 x 和 y 均为 0 或 -0，角度取 0。二维旋转矩阵在 CSS Transforms有详细描述，参数 alpha 为(1,0)^T和(x,y)^T之间的度数。[CSS3-TRANSFORMS]
返回当前矩阵。

rotateAxisAngleSelf(x, y, z, angle)

后乘一个绕指定向量 x、y、z 按 angle度数旋转的变换到当前矩阵。三维旋转矩阵在 CSS Transforms有详细描述，参数 alpha = angle（度数）。[CSS3-TRANSFORMS]
如果 x 或 y 不为 0 或 -0，将当前矩阵的 is 2D 设为 false。
返回当前矩阵。

skewXSelf(sx)

后乘一个按指定角度 sx（度）倾斜 X 轴的变换到当前矩阵。二维 skewX 矩阵在 CSS Transforms有详细描述，参数 alpha = sx（度）。[CSS3-TRANSFORMS]
返回当前矩阵。

skewYSelf(sy)

后乘一个按指定角度 sy（度）倾斜 Y 轴的变换到当前矩阵。二维 skewY 矩阵在 CSS Transforms有详细描述，参数 beta = sy（度）。[CSS3-TRANSFORMS]
返回当前矩阵。

invertSelf()

将当前矩阵取逆。
如果当前矩阵不可逆，则将所有属性设为 NaN，并将 is 2D 设为 false。
返回当前矩阵。

测试

setMatrixValue(transformList)

将 transformList 解析为抽象矩阵，令 matrix 和 2dTransform 为结果。如果解析失败，则抛出 "SyntaxError" DOMException 异常。
将 is 2D 设为 2dTransform 的值。
将 m11 元素到 m44 元素按列主序赋予 matrix 的各元素值。
返回当前矩阵。

测试

DOMMatrix-css-string.worker.js （在线测试）（源码）

7. 结构化序列化

DOMPointReadOnly、 DOMPoint、 DOMRectReadOnly、 DOMRect、DOMQuad、DOMMatrixReadOnly，以及 DOMMatrix 对象都是可序列化对象。[HTML]

DOMPointReadOnly 和 DOMPoint 的序列化步骤，给定 value 与 serialized，如下：

将 serialized.[[X]] 设为 value 的 x 坐标。
将 serialized.[[Y]] 设为 value 的 y 坐标。
将 serialized.[[Z]] 设为 value 的 z 坐标。
将 serialized.[[W]] 设为 value 的 w 透视值。

它们的反序列化步骤，给定 serialized 与 value，如下：

将 value 的 x 坐标设为 serialized.[[X]]。
将 value 的 y 坐标设为 serialized.[[Y]]。
将 value 的 z 坐标设为 serialized.[[Z]]。
将 value 的 w 透视值设为 serialized.[[W]]。

DOMRectReadOnly 和 DOMRect 的序列化步骤，给定 value 与 serialized，如下：

将 serialized.[[X]] 设为 value 的 x 坐标。
将 serialized.[[Y]] 设为 value 的 y 坐标。
将 serialized.[[Width]] 设为 value 的宽度。
将 serialized.[[Height]] 设为 value 的高度。

它们的反序列化步骤，给定 serialized 与 value，如下：

将 value 的 x 坐标设为 serialized.[[X]]。
将 value 的 y 坐标设为 serialized.[[Y]]。
将 value 的宽度设为 serialized.[[Width]]。
将 value 的高度设为 serialized.[[Height]]。

DOMQuad 的序列化步骤，给定 value 与 serialized，如下：

将 serialized.[[P1]] 设为 value 的子序列化，对应点 1。
将 serialized.[[P2]] 设为 value 的子序列化，对应点 2。
将 serialized.[[P3]] 设为 value 的子序列化，对应点 3。
将 serialized.[[P4]] 设为 value 的子序列化，对应点 4。

它们的反序列化步骤，给定 serialized 与 value，如下：

将 value 的点 1 设为 serialized.[[P1]] 的子反序列化。
将 value 的点 2 设为 serialized.[[P2]] 的子反序列化。
将 value 的点 3 设为 serialized.[[P3]] 的子反序列化。
将 value 的点 4 设为 serialized.[[P4]] 的子反序列化。

DOMMatrixReadOnly 和 DOMMatrix 的序列化步骤，给定 value 与 serialized，如下：

如果 value 的 is 2D 为 true：
1. 将 serialized.[[M11]] 设为 value 的 m11 元素。
2. 将 serialized.[[M12]] 设为 value 的 m12 元素。
3. 将 serialized.[[M21]] 设为 value 的 m21 元素。
4. 将 serialized.[[M22]] 设为 value 的 m22 元素。
5. 将 serialized.[[M41]] 设为 value 的 m41 元素。
6. 将 serialized.[[M42]] 设为 value 的 m42 元素。
7. 将 serialized.[[Is2D]] 设为 true。
注意：二维 DOMMatrix 或 DOMMatrixReadOnly 的某些其它元素（例如 m13 元素）可能是 -0，该算法不会原样往返处理这些值。
否则：
1. 将 serialized.[[M11]] 设为 value 的 m11 元素。
2. 将 serialized.[[M12]] 设为 value 的 m12 元素。
3. 将 serialized.[[M13]] 设为 value 的 m13 元素。
4. 将 serialized.[[M14]] 设为 value 的 m14 元素。
5. 将 serialized.[[M21]] 设为 value 的 m21 元素。
6. 将 serialized.[[M22]] 设为 value 的 m22 元素。
7. 将 serialized.[[M23]] 设为 value 的 m23 元素。
8. 将 serialized.[[M24]] 设为 value 的 m24 元素。
9. 将 serialized.[[M31]] 设为 value 的 m31 元素。
10. 将 serialized.[[M32]] 设为 value 的 m32 元素。
11. 将 serialized.[[M33]] 设为 value 的 m33 元素。
12. 将 serialized.[[M34]] 设为 value 的 m34 元素。
13. 将 serialized.[[M41]] 设为 value 的 m41 元素。
14. 将 serialized.[[M42]] 设为 value 的 m42 元素。
15. 将 serialized.[[M43]] 设为 value 的 m43 元素。
16. 将 serialized.[[M44]] 设为 value 的 m44 元素。
17. 将 serialized.[[Is2D]] 设为 false。
它们的反序列化步骤，给定 serialized 与 value，如下：
1. 如果 serialized.[[Is2D]] 为 true：
  1. 将 value 的 m11 元素设为 serialized.[[M11]]。
  2. 将 value 的 m12 元素设为 serialized.[[M12]]。
  3. 将 value 的 m13 元素设为 0。
  4. 将 value 的 m14 元素设为 0。
  5. 将 value 的 m21 元素设为 serialized.[[M21]]。
  6. 将 value 的 m22 元素设为 serialized.[[M22]]。
  7. 将 value 的 m23 元素设为 0。
  8. 将 value 的 m24 元素设为 0。
  9. 将 value 的 m31 元素设为 0。
  10. 将 value 的 m32 元素设为 0。
  11. 将 value 的 m33 元素设为 1。
  12. 将 value 的 m34 元素设为 0。
  13. 将 value 的 m41 元素设为 serialized.[[M41]]。
  14. 将 value 的 m42 元素设为 serialized.[[M42]]。
  15. 将 value 的 m43 元素设为 0。
  16. 将 value 的 m44 元素设为 1。
  17. 将 is 2D 设为 true。
2. 否则：
  1. 将 value 的 m11 元素设为 serialized.[[M11]]。
  2. 将 value 的 m12 元素设为 serialized.[[M12]]。
  3. 将 value 的 m13 元素设为 serialized.[[M13]]。
  4. 将 value 的 m14 元素设为 serialized.[[M14]]。
  5. 将 value 的 m21 元素设为 serialized.[[M21]]。
  6. 将 value 的 m22 元素设为 serialized.[[M22]]。
  7. 将 value 的 m23 元素设为 serialized.[[M23]]。
  8. 将 value 的 m24 元素设为 serialized.[[M24]]。
  9. 将 value 的 m31 元素设为 serialized.[[M31]]。
  10. 将 value 的 m32 元素设为 serialized.[[M32]]。
  11. 将 value 的 m33 元素设为 serialized.[[M33]]。
  12. 将 value 的 m34 元素设为 serialized.[[M34]]。
  13. 将 value 的 m41 元素设为 serialized.[[M41]]。
  14. 将 value 的 m42 元素设为 serialized.[[M42]]。
  15. 将 value 的 m43 元素设为 serialized.[[M43]]。
  16. 将 value 的 m44 元素设为 serialized.[[M44]]。
  17. 将 is 2D 设为 false。

测试

structured-serialization.html （在线测试）（源码）

8. 安全考虑

DOMMatrix 和 DOMMatrixReadOnly 接口提供了按 CSS 语法解析字符串的入口。因此适用 CSS 语法规范中的安全考虑。[CSS3-SYNTAX]

这可能被用于利用用户代理中 CSS 解析器的漏洞。

本规范定义的接口没有其他已知的安全或隐私影响。然而，其他规范中使用本规范所定义接口的 API 可能会引入安全或隐私问题。

9. 隐私考虑

例如，CSSOM View 中定义的 getBoundingClientRect() API 会返回一个 DOMRect，可用于测量包含某种字体文本的行内元素的尺寸，这会泄露用户是否安装该字体的信息。如果用来测试许多常见字体，该信息随后可能构成可识别个人身份的信息。[CSSOM-VIEW]

10. 历史

本节为非规范性内容。

本规范中的接口旨在替代早期各类规范中的类似接口，以及某些用户代理中的专有接口。本节尝试列举这些接口。

10.1. CSSOM View

CSSOM View 的早期版本定义了 ClientRect 接口，现由 DOMRect 替代。符合本规范的实现将不再支持 ClientRect。[CSSOM-VIEW]

10.2. SVG

SVG 的早期版本定义了 SVGPoint、SVGRect、SVGMatrix，在本规范中分别作为 DOMPoint、DOMRect、DOMMatrix 的别名来定义。[SVG11]

10.3. 非标准

一些用户代理曾支持 WebKitPoint 接口。符合本规范的实现将不再支持 WebKitPoint。

若干用户代理支持 WebKitCSSMatrix 接口，并在 Web 上被广泛使用。它在本规范中被定义为 DOMMatrix 的别名。

一些用户代理支持 MSCSSMatrix 接口。符合本规范的实现将不再支持 MSCSSMatrix。

测试

historical.html (在线测试) (源码)

文档约定

非空列表的 NaN-安全最小值：若列表任一成员为 NaN，则结果为 NaN；否则为该列表的最小值。

类似地，非空列表的 NaN-安全最大值：若列表任一成员为 NaN，则结果为 NaN；否则为该列表的最大值。

自上次发布以来的变更

本节为非规范性内容。

自2018 年 12 月 4 日候选推荐以来的变更如下。

澄清列向量由矩阵前乘 #294、#359
定义最小值和最大值为优先返回 NaN #222
使用新的 WebIDL 构造函数定义
添加默认字典值
为 matrixTransform 添加 [NewObject]，与正文描述保持一致
移除冗余的 originZ 检查 #350
为 DOMRectList 明确添加 [Exposed]
增加 Web 平台测试覆盖

自2014 年 11 月 25 日候选推荐以来的变更如下。

接口总体改为使用特定的静态构造操作，而非重载构造函数，并使接口更加一致。但是，DOMMatrix 仍保留重载构造函数，以与 WebKitCSSMatrix 兼容。
引入 DOMMatrixInit 字典。
为接口添加 JSON 序列化器。
调整 DOMMatrixReadOnly 与 DOMMatrix 以兼容 WebKitCSSMatrix：
- 将 rotate() 和 rotateSelf() 的参数从 (angle, originX, originY) 改为 (rotX, rotY, rotZ)。
- 将 scale() 和 scaleSelf() 调整得更接近此前的 scaleNonUniform()/scaleNonUniformSelf() 方法，并移除 scaleNonUniformSelf()。保留对遗留的 scaleNonUniform() 的支持。
- 除了 setMatrixValue() 外，令 DOMMatrix/DOMMatrixReadOnly 的所有方法参数均可选。
- 添加无参数构造函数。
- 将 WebKitCSSMatrix 定义为 DOMMatrix 的遗留 window 别名。
在 workers 中，DOMMatrix 和 DOMMatrixReadOnly 不支持使用 CSS 语法进行解析或字符串化。
定义了这些接口的结构化序列化。
将 DOMQuad 上的实时 bounds 属性替换为非实时的 getBounds() 方法，同时移除“关联的外接矩形”概念。
将 DOMMatrix 和 DOMMatrixReadOnly 的字符串解析器改为使用 CSS 规则，而非 SVG 规则。
DOMMatrix 和 DOMMatrixReadOnly 的字符串化器在存在非有限值时抛出异常，否则使用 ToString 算法。[ECMA-262]
在全篇比较中将 0 与 -0 视为相等。
添加了 § 9 隐私考虑和 § 10 历史两节。

自2014 年 9 月 18 日工作草案以来的变更如下。

公开 DOMPointReadOnly、 DOMPoint、 DOMRectReadOnly、 DOMRect、 DOMQuad、 DOMMatrixReadOnly 和 DOMMatrix 至 Window 与 Worker。定义了接口的克隆。

自2014 年 6 月 26 日公众征求意见稿以来的变更如下。

DOMPointReadOnly 增加了接受 4 个参数的构造函数。
DOMRectReadOnly 增加了接受 4 个参数的构造函数。
DOMMatrixReadOnly 增加了接受数字序列作为参数的构造函数。
DOMRectList 变更为 ArrayClass。该接口仅用于遗留接口。
将 DOMRectList 列为风险项，等待浏览器反馈。
所有接口均以内部元素的方式描述其只读/可写及继承行为。
用 TypeError 异常替换 IndexSizeError 异常。

自2014 年 5 月 22 日首次公众征求意见稿以来的变更如下。

将可变变换方法从 *By 重命名为 *Self。（例如 translateBy() 重命名为 translateSelf()。）
将 invert() 重命名为 invertSelf()。
新增 setMatrixValue() 方法，接受转换列表作为 DOMString。
is2D 和 isIdentity 现为只读属性。
DOMMatrixReadOnly 被标记以跟踪 3D 变换和属性设置，从而用于 is2D。
invertSelf() 和 inverse() 不再抛出异常。

致谢

编辑们感谢 Robert O’Callahan 对本规范的贡献。非常感谢 Dean Jackson 对 DOMMatrix 的最初提案。同时感谢 Adenilson Cavalcanti、 Benoit Jacob、 Boris Zbarsky、 Brian Birtles、 Cameron McCormack、 Domenic Denicola、 Kari Pihkala、 Max Vujovic、 Mike Taylor、 Peter Hall、 Philip Jägenstedt、 Simon Fraser、以及 Timothy Loh 对本规范的细致审阅、意见与修正。

一致性

文档约定

一致性由描述性断言和 RFC 2119 术语结合表达。规范内容中 “MUST（必须）”、“MUST NOT（不可）”、“REQUIRED（要求）”、“SHALL（应）”、“SHALL NOT（不应）”、“SHOULD（推荐）”、“SHOULD NOT（不推荐）”、“RECOMMENDED（建议）”、“MAY（可以）” 和 “OPTIONAL（可选）” 等关键词，需按照 RFC 2119 的描述进行解释。但为提高可读性，本文档未将这些词全部大写。

除明确标记为非规范性、示例和注释的章节外，本文档所有内容均为规范性。[RFC2119]

本规范中的示例以“例如”开头，或通过 class="example" 样式与规范性文本区分，如下：

信息性注释以“注意”开头，并通过 class="note" 样式与规范性文本区分，如下：

提醒内容为规范性部分，并通过 <strong class="advisement"> 特别标注，如下： UA 必须提供无障碍替代方案。

一致性类别

如果样式表中的所有语句均符合本模块定义的通用 CSS 语法和各特性独立语法，则该样式表符合本规范。

渲染器若能正确解析样式表，并按照本规范定义解析和渲染所有特性，则判定为符合规范。但因设备限制无法正确渲染文档，不视为 UA 不合规。例如 UA 不要求在单色显示器渲染颜色。

创作工具若能生成语法正确且符合本模块所有合规要求的样式表，则视为符合本规范。

部分实现

为便于作者使用前向兼容解析规则设置回退值，CSS 渲染器必须将不能支持的规则、属性、属性值、关键字以及其他语法结构视为无效（如按要求忽略）。特别是，用户代理不得在多值属性声明中选择性地忽略不支持的成分值而保留支持值；若任一值被视为无效（即不支持），则需忽略整个声明。

不稳定与专有特性实现

非实验性实现

当规范达到候选推荐阶段后，可进行非实验性实现。实现者应发布未加前缀的任何 CR 级别、并可证明已正确实现的特性。

为确保各实现间 CSS 的互操作性，CSS 工作组要求非实验性渲染器在发布未加前缀实现前向 W3C 提交实现报告（如有需要，同时提交该报告的测试用例）。提交的测试用例将由 CSS 工作组审核和修正。

候选推荐退出标准

为提升为建议标准，规范的每个特性至少需有两个独立、可互操作的实现。各个特性可由不同产品实现，无需全部特性由同一产品实现。相关术语定义如下：

几何接口模块第1级

摘要

本文档状态

1. 简介

2. DOMPoint 接口

2.1. 用矩阵变换点

3. DOMRect 接口

4. DOMRectList 接口

5. DOMQuad 接口

6. DOMMatrix 接口

6.1. DOMMatrix2DInit 和 DOMMatrixInit 字典

6.2. 将字符串解析为抽象矩阵

6.3. 创建 DOMMatrixReadOnly 和 DOMMatrix 对象

6.4. DOMMatrix 属性

6.5. 不可变变换方法

6.6. 可变变换方法

7. 结构化序列化

8. 安全考虑

9. 隐私考虑

10. 历史

10.1. CSSOM View

10.2. SVG

10.3. 非标准

文档约定

自上次发布以来的变更

致谢

一致性

文档约定

一致性类别

部分实现

不稳定与专有特性实现

非实验性实现

候选推荐退出标准

索引

本规范定义的术语

引用文献定义的术语

参考文献

规范性参考文献

参考性参考文献

IDL 索引

几何接口模块 第1级

摘要

本文档状态

1. 简介

2. DOMPoint 接口

2.1. 用矩阵变换点

3. DOMRect 接口

4. DOMRectList 接口

5. DOMQuad 接口

6. DOMMatrix 接口

6.1. DOMMatrix2DInit 和 DOMMatrixInit 字典

6.2. 将字符串解析为抽象矩阵

6.3. 创建 DOMMatrixReadOnly 和 DOMMatrix 对象

6.4. DOMMatrix 属性

6.5. 不可变变换方法

6.6. 可变变换方法

7. 结构化序列化

8. 安全考虑

9. 隐私考虑

10. 历史

10.1. CSSOM View

10.2. SVG

10.3. 非标准

文档约定

自上次发布以来的变更

致谢

一致性

文档约定

一致性类别

部分实现

不稳定与专有特性实现

非实验性实现

候选推荐退出标准

索引

本规范定义的术语

引用文献定义的术语

参考文献

规范性参考文献

参考性参考文献

IDL 索引

几何接口模块第1级