SVGTransform

SVG 变换接口

SVGTransform 是 SVGTransformList 中一个组件变换的接口；因此，SVGTransform 对象对应于 transform 属性中的单个组件（例如，scale(…) 或 matrix(…)）。

SVGTransform 对象可以被指定为只读，这意味着尝试修改该对象会导致抛出异常。

接口概述

也实现 无
方法
  • void setMatrix(in DOMMatrix matrix)
  • void setTranslate(in float tx, in float ty)
  • void setScale(in float sx, in float sy)
  • void setRotate(in float angle, in float cx, in float cy)
  • void setSkewX(in float angle)
  • void setSkewY(in float angle)
属性
  • readonly unsigned short type
  • readonly float angle
  • readonly DOMMatrix matrix
常量
  • SVG_TRANSFORM_UNKNOWN = 0
  • SVG_TRANSFORM_MATRIX = 1
  • SVG_TRANSFORM_TRANSLATE = 2
  • SVG_TRANSFORM_SCALE = 3
  • SVG_TRANSFORM_ROTATE = 4
  • SVG_TRANSFORM_SKEWX = 5
  • SVG_TRANSFORM_SKEWY = 6
规范文档 SVG 1.1 (第二版)

常量

名称 值 描述
SVG_TRANSFORM_UNKNOWN 0 单位类型不是预定义的单位类型之一。尝试定义此类型的新值或尝试将现有值切换到此类型都是无效的。
SVG_TRANSFORM_MATRIX 1 matrix(…) 变换
SVG_TRANSFORM_TRANSLATE 2 translate(…) 变换
SVG_TRANSFORM_SCALE 3 scale(…) 变换
SVG_TRANSFORM_ROTATE 4 rotate(…) 变换
SVG_TRANSFORM_SKEWX 5 skewx(…) 变换
SVG_TRANSFORM_SKEWY 6 skewy(…) 变换

实例属性

名称 类型 描述
type unsigned short 值类型，由此接口定义的 SVG_TRANSFORM_* 常量之一指定。
angle float SVG_TRANSFORM_ROTATE、SVG_TRANSFORM_SKEWX 和 SVG_TRANSFORM_SKEWY 的便利属性。它保存了指定的角度。

对于 SVG_TRANSFORM_MATRIX、SVG_TRANSFORM_TRANSLATE 和 SVG_TRANSFORM_SCALE，angle 将为零。
matrix DOMMatrix

表示此变换的矩阵。矩阵对象是动态的，这意味着对 SVGTransform 对象进行的任何更改都会立即反映在矩阵对象中，反之亦然。如果直接更改矩阵对象（即，不使用 SVGTransform 接口本身的方法），则 SVGTransform 的类型会更改为 SVG_TRANSFORM_MATRIX。

  • 对于 SVG_TRANSFORM_MATRIX，矩阵包含用户提供的 a、b、c、d、e、f 值。
  • 对于 SVG_TRANSFORM_TRANSLATE，e 和 f 表示平移量（a=1，b=0，c=0，d=1）。
  • 对于 SVG_TRANSFORM_SCALE，a 和 d 表示缩放量（b=0，c=0，e=0，f=0）。
  • 对于 SVG_TRANSFORM_SKEWX 和 SVG_TRANSFORM_SKEWY，a、b、c 和 d 表示会导致给定倾斜的矩阵（e=0，f=0）。
  • 对于 SVG_TRANSFORM_ROTATE，a、b、c、d、e 和 f 共同表示会导致给定旋转的矩阵。当旋转绕中心点 (0, 0) 进行时，e 和 f 将为零。

实例方法

名称和参数 返回值 描述
setMatrix(in DOMMatrix matrix) void

将变换类型设置为 SVG_TRANSFORM_MATRIX，参数矩阵定义新的变换。请注意，参数 matrix 中的值将被复制。

异常

  • 当尝试修改只读属性或对象本身为只读时，会引发一个代码为 NO_MODIFICATION_ALLOWED_ERR 的 DOMException。
setTranslate(in float tx, in float ty) void

将变换类型设置为 SVG_TRANSFORM_TRANSLATE，参数 tx 和 ty 定义平移量。

异常

  • 当尝试修改只读属性或对象本身为只读时，会引发一个代码为 NO_MODIFICATION_ALLOWED_ERR 的 DOMException。
setScale(in float sx, in float sy) void

将变换类型设置为 SVG_TRANSFORM_SCALE，参数 sx 和 sy 定义缩放量。

异常

  • 当尝试修改只读属性或对象本身为只读时，会引发一个代码为 NO_MODIFICATION_ALLOWED_ERR 的 DOMException。
setRotate(in float angle, in float cx, in float cy) void

将变换类型设置为 SVG_TRANSFORM_ROTATE，参数 angle 定义旋转角度，参数 cx 和 cy 定义可选的旋转中心。

异常

  • 当尝试修改只读属性或对象本身为只读时，会引发一个代码为 NO_MODIFICATION_ALLOWED_ERR 的 DOMException。
setSkewX(in float angle) void

将变换类型设置为 SVG_TRANSFORM_SKEWX，参数 angle 定义倾斜量。

异常

  • 当尝试修改只读属性或对象本身为只读时，会引发一个代码为 NO_MODIFICATION_ALLOWED_ERR 的 DOMException。
setSkewY(in float angle) void

将变换类型设置为 SVG_TRANSFORM_SKEWY，参数 angle 定义倾斜量。

异常

  • 当尝试修改只读属性或对象本身为只读时，会引发一个代码为 NO_MODIFICATION_ALLOWED_ERR 的 DOMException。

浏览器兼容性

BCD 表格仅在浏览器中加载