MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

현재 번역은 완벽하지 않습니다. 한국어로 문서 번역에 동참해주세요.

SVG matrix interface

수많은 SVG 그래픽 오퍼레이션은 아래와 같은 2X3 행열을 활용하고있다.

[a c e]
[b d f]

아래와같이 3x3 행렬은 행렬간의 계산을 위한 목적으로 확장되어 만들어졌다.

[a c e]
[b d f]
[0 0 1]

SVGMatrix 수정하기위해 시도하면 예외를 던지도록 읽기전용으로만 설계되었다. 

인터페이스 개요

Also implement None
Methods
Properties
  • float a
  • float b
  • float c
  • float d
  • float e
  • float f
Normative document SVG 1.1 (2nd Edition)

프로퍼티

Name Type Description
a float The a component of the matrix.
b float The b component of the matrix.
c float The c component of the matrix.
d float The d component of the matrix.
e float The e component of the matrix.
f float The f component of the matrix.

 DOMException 와 코드 NO_MODIFICATION_ALLOWED_ERR 는 읽기전용 attribute 나 객체 자신이 읽기전용인 것들을 수정하려할 때 발생한다.

메소드

Name & Arguments Return Description
multiply(in SVGMatrix secondMatrix) SVGMatrix 행렬간 곱셈을 한다. 이 행렬은 다른 행렬과 곱셈을 하여 새로운 행렬을 반환합니다.
inverse() SVGMatrix

거꾸로 반전이 된 행렬을 반환합니다.

예외:

  • DOMException 와 코드  SVG_MATRIX_NOT_INVERTABLE 는 행렬이 거꾸로 되지 않을때 발생합니다.
translate(in float x, in float y) SVGMatrix
행렬에 위치를 이동시키고 행렬을 반환합니다.
scale(in float scaleFactor) SVGMatrix
인자값에 따라 동일한 비율로 변환한 후 행렬을 반환합니다.
scaleNonUniform(in float scaleFactorX, in float scaleFactorY) SVGMatrix
인자값에 따라 동일하지않은 비율로 변환한 후 행렬을 반환합니다.
rotate(in float angle) SVGMatrix
인자값에 따라 회전하여 행렬을 반환합니다.
(angle 은 각도입니다.)
rotateFromVector(in float x, in float y) SVGMatrix

인자값에 따라 회전하여 행렬을 반환합니다.
회전각은 탄젠트(y/x) 에 (+, -) 되도록 되어있다. 방향을 벡터 (x,y) 로 되도록 하고싶다면 상수 혹은 음수를 사용하면 된다.(정확하지 않은 해석인 것 같습니다. 다른분의 해석을 기다리겠습니다.)

원문 : Post-multiplies a rotation transformation on the current matrix and returns the resulting matrix. The rotation angle is determined by taking (+/-) atan(y/x). The direction of the vector (x, y) determines whether the positive or negative angle value is used.

예외:

  •  DOMException 와 코드 SVG_INVALID_VALUE_ERR 전달인자 중 하나라도 유효하지 않은 값일경우 발생한다.
flipX() SVGMatrix
[-1 0 0 1 0 0] 으로 곱하여 변환한 행렬을 반환한다.
flipY() SVGMatrix
[1 0 0 -1 0 0] 으로 곱하여 변환한 행렬을 반환한다.
skewX(in float angle) SVGMatrix x값으로 비스듬하게(왜곡하는) 움직인 행렬을 반환한다.
skewY(in float angle) SVGMatrix
y값으로 비스듬하게(왜곡하는) 움직인 행렬을 반환한다.

브라우저 지원

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support ? ? 9 ? ?
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support ? ? ? ? ?

 

문서 태그 및 공헌자

 이 페이지의 공헌자: Hmmim
 최종 변경: Hmmim,