SVGTransform

SVG transform interface

SVGTransform is the interface for one of the component transformations within an SVGTransformList ; thus, an SVGTransform object corresponds to a single component (e.g., scale(…) or matrix(…) ) within a transform 属性。

An SVGTransform object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown.

Interface overview

Also implement None
方法
  • void setMatrix(in SVGMatrix 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 SVGMatrix 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
Normative document SVG 1.1 (2nd Edition)

常量

Name 描述
SVG_TRANSFORM_UNKNOWN 0 The unit type is not one of predefined unit types. It is invalid to attempt to define a new value of this type or to attempt to switch an existing value to this type.
SVG_TRANSFORM_MATRIX 1 A matrix(…) transformation
SVG_TRANSFORM_TRANSLATE 2 A translate(…) transformation
SVG_TRANSFORM_SCALE 3 A scale(…) transformation
SVG_TRANSFORM_ROTATE 4 A rotate(…) transformation
SVG_TRANSFORM_SKEWX 5 A skewx(…) transformation
SVG_TRANSFORM_SKEWY 6 A skewy(…) transformation

特性

Name Type 描述
type unsigned short The type of the value as specified by one of the SVG_TRANSFORM_* constants defined on this interface.
angle float A convenience attribute for SVG_TRANSFORM_ROTATE , SVG_TRANSFORM_SKEWX and SVG_TRANSFORM_SKEWY . It holds the angle that was specified.

For SVG_TRANSFORM_MATRIX , SVG_TRANSFORM_TRANSLATE and SVG_TRANSFORM_SCALE , angle will be zero.
matrix SVGMatrix

The matrix that represents this transformation. The matrix object is live, meaning that any changes made to the SVGTransform object are immediately reflected in the matrix object and vice versa. In case the matrix object is changed directly (i.e., without using the methods on the SVGTransform interface itself) then the type of the SVGTransform changes to SVG_TRANSFORM_MATRIX .

  • For SVG_TRANSFORM_MATRIX , the matrix contains the a, b, c, d, e, f values supplied by the user.
  • For SVG_TRANSFORM_TRANSLATE , e and f represent the translation amounts (a=1, b=0, c=0 and d=1).
  • For SVG_TRANSFORM_SCALE , a and d represent the scale amounts (b=0, c=0, e=0 and f=0).
  • For SVG_TRANSFORM_SKEWX and SVG_TRANSFORM_SKEWY , a, b, c and d represent the matrix which will result in the given skew (e=0 and f=0).
  • For SVG_TRANSFORM_ROTATE , a, b, c, d, e and f together represent the matrix which will result in the given rotation. When the rotation is around the center point (0, 0), e and f will be zero.

方法

Name & Arguments 返回 描述
setMatrix (in SVGMatrix matrix ) void

Sets the transform type to SVG_TRANSFORM_MATRIX , with parameter matrix defining the new transformation. Note that the values from the parameter matrix are copied.

Exceptions:

  • a DOMException with code NO_MODIFICATION_ALLOWED_ERR is raised when attempting to modify a read only attribute or when the object itself is read only.
setTranslate (in float tx , in float ty ) void

Sets the transform type to SVG_TRANSFORM_TRANSLATE , with parameters tx and ty defining the translation amounts.

Exceptions:

  • a DOMException with code NO_MODIFICATION_ALLOWED_ERR is raised when attempting to modify a read only attribute or when the object itself is read only.
setScale (in float sx , in float sy ) void

Sets the transform type to SVG_TRANSFORM_SCALE , with parameters sx and sy defining the scale amounts.

Exceptions:

  • a DOMException with code NO_MODIFICATION_ALLOWED_ERR is raised when attempting to modify a read only attribute or when the object itself is read only.
setRotate (in float angle , in float cx , in float cy ) void

Sets the transform type to SVG_TRANSFORM_ROTATE , with parameter angle defining the rotation angle and parameters cx and cy defining the optional center of rotation.

Exceptions:

  • a DOMException with code NO_MODIFICATION_ALLOWED_ERR is raised when attempting to modify a read only attribute or when the object itself is read only.
setSkewX (in float angle ) void

Sets the transform type to SVG_TRANSFORM_SKEWX , with parameter angle defining the amount of skew.

Exceptions:

  • a DOMException with code NO_MODIFICATION_ALLOWED_ERR is raised when attempting to modify a read only attribute or when the object itself is read only.
setSkewY (in float angle ) void

Sets the transform type to SVG_TRANSFORM_SKEWY , with parameter angle defining the amount of skew.

Exceptions:

  • a DOMException with code NO_MODIFICATION_ALLOWED_ERR is raised when attempting to modify a read only attribute or when the object itself is read only.

浏览器兼容性

更新 GitHub 上的兼容性数据
Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
SVGTransform Chrome Yes Edge ≤18 Firefox Yes IE ? Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android Yes Opera Android Yes Safari iOS Yes Samsung Internet Android Yes

图例

完整支持
完整支持
兼容性未知
兼容性未知
  1. SVGTransform
  2. Related pages for SVG
    1. SVGAElement
    2. SVGAltGlyphElement
    3. SVGAngle
    4. SVGAnimateColorElement
    5. SVGAnimateElement
    6. SVGAnimateMotionElement
    7. SVGAnimateTransformElement
    8. SVGAnimatedAngle
    9. SVGAnimatedBoolean
    10. SVGAnimatedEnumeration
    11. SVGAnimatedInteger
    12. SVGAnimatedLength
    13. SVGAnimatedLengthList
    14. SVGAnimatedNumber
    15. SVGAnimatedNumberList
    16. SVGAnimatedPathData
    17. SVGAnimatedPoints
    18. SVGAnimatedPreserveAspectRatio
    19. SVGAnimatedRect
    20. SVGAnimatedString
    21. SVGAnimatedTransformList
    22. SVGAnimationElement
    23. SVGCircleElement
    24. SVGClipPathElement
    25. SVGComponentTransferFunctionElement
    26. SVGCursorElement
    27. SVGDefsElement
    28. SVGDescElement
    29. SVGDocument
    30. SVGElement
    31. SVGEllipseElement
    32. SVGFEBlendElement
    33. SVGFEColorMatrixElement
    34. SVGFEComponentTransferElement
    35. SVGFECompositeElement
    36. SVGFEConvolveMatrixElement
    37. SVGFEDiffuseLightingElement
    38. SVGFEDisplacementMapElement
    39. SVGFEDistantLightElement
    40. SVGFEDropShadowElement
    41. SVGFEFloodElement
    42. SVGFEFuncAElement
    43. SVGFEFuncBElement
    44. SVGFEFuncGElement
    45. SVGFEFuncRElement
    46. SVGFEGaussianBlurElement
    47. SVGFEImageElement
    48. SVGFEMergeElement
    49. SVGFEMergeNodeElement
    50. SVGFEMorphologyElement
    51. SVGFEOffsetElement
    52. SVGFEPointLightElement
    53. SVGFESpecularLightingElement
    54. SVGFESpotLightElement
    55. SVGFETileElement
    56. SVGFETurbulenceElement
    57. SVGFilterElement
    58. SVGFilterPrimitiveStandardAttributes
    59. SVGFitToViewBox
    60. SVGFontElement
    61. SVGFontFaceElement
    62. SVGFontFaceFormatElement
    63. SVGFontFaceNameElement
    64. SVGFontFaceSrcElement
    65. SVGFontFaceUriElement
    66. SVGForeignObjectElement
    67. SVGGElement
    68. SVGGlyphElement
    69. SVGGradientElement
    70. SVGGraphicsElement
    71. SVGHKernElement
    72. SVGImageElement
    73. SVGLength
    74. SVGLengthList
    75. SVGLineElement
    76. SVGLinearGradientElement
    77. SVGMPathElement
    78. SVGMarkerElement
    79. SVGMaskElement
    80. SVGMatrix
    81. SVGMetadataElement
    82. SVGMissingGlyphElement
    83. SVGNumber
    84. SVGNumberList
    85. SVGPathElement
    86. SVGPathSeg
    87. SVGPathSegArcAbs
    88. SVGPathSegArcRel
    89. SVGPathSegClosePath
    90. SVGPathSegCurvetoCubicAbs
    91. SVGPathSegCurvetoCubicRel
    92. SVGPathSegCurvetoCubicSmoothAbs
    93. SVGPathSegCurvetoCubicSmoothRel
    94. SVGPathSegCurvetoQuadraticAbs
    95. SVGPathSegCurvetoQuadraticRel
    96. SVGPathSegCurvetoQuadraticSmoothAbs
    97. SVGPathSegCurvetoQuadraticSmoothRel
    98. SVGPathSegLinetoAbs
    99. SVGPathSegLinetoHorizontalAbs
    100. SVGPathSegLinetoHorizontalRel
    101. SVGPathSegLinetoRel
    102. SVGPathSegLinetoVerticalAbs
    103. SVGPathSegLinetoVerticalRel
    104. SVGPathSegList
    105. SVGPathSegMovetoAbs
    106. SVGPathSegMovetoRel
    107. SVGPatternElement
    108. SVGPoint
    109. SVGPointList
    110. SVGPolygonElement
    111. SVGPolylineElement
    112. SVGPreserveAspectRatio
    113. SVGRadialGradientElement
    114. SVGRect
    115. SVGRectElement
    116. SVGSVGElement
    117. SVGScriptElement
    118. SVGSetElement
    119. SVGStopElement
    120. SVGStringList
    121. SVGStylable
    122. SVGStyleElement
    123. SVGSwitchElement
    124. SVGSymbolElement
    125. SVGTRefElement
    126. SVGTSpanElement
    127. SVGTests
    128. SVGTextContentElement
    129. SVGTextElement
    130. SVGTextPathElement
    131. SVGTextPositioningElement
    132. SVGTitleElement
    133. SVGTransformList
    134. SVGTransformable
    135. SVGURIReference
    136. SVGUnitTypes
    137. SVGUseElement
    138. SVGVKernElement
    139. SVGViewElement
    140. SVGZoomAndPan
    141. SVGZoomEvent
    142. TimeEvent