[SVG] SVG matrix interface

본 포스팅은 MDN에 있는 변역되지 않은 문서를 번역 봉사에 참여한 후 블로그에 옮겨놓는 포스팅 입니다.

SVG matrix interfaceEDIT

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

[a c e]
[b d f]

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

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

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

인터페이스 개요

Also implement	None
Methods	SVGMatrix multiply(in SVGMatrix secondMatrix) SVGMatrix inverse() SVGMatrix translate(in float x, in float y) SVGMatrix scale(in float scaleFactor) SVGMatrix scaleNonUniform(in float scaleFactorX, in floatscaleFactorY) SVGMatrix rotate(in float angle) SVGMatrix rotateFromVector(in float x, in float y) SVGMatrix flipX() SVGMatrix flipY() SVGMatrix skewX(in float angle) SVGMatrix skewY(in float angle)
Properties	float a float b float c float d float e float f
Normative document	SVG 1.1 (2nd Edition)

프로퍼티EDIT

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 나 객체 자신이 읽기전용인 것들을 수정하려할 때 발생한다.

메소드EDIT

Name & Arguments	Return	Description
multiply(inSVGMatrixsecondMatrix)	SVGMatrix	행렬간 곱셈을 한다. 이 행렬은 다른 행렬과 곱셈을 하여 새로운 행렬을 반환합니다.
inverse()	SVGMatrix	거꾸로 반전이 된 행렬을 반환합니다. 예외: DOMException 와 코드  SVG_MATRIX_NOT_INVERTABLE 는 행렬이 거꾸로 되지 않을때 발생합니다.
translate(in floatx, in float y)	SVGMatrix	행렬에 위치를 이동시키고 행렬을 반환합니다.
scale(in floatscaleFactor)	SVGMatrix	인자값에 따라 동일한 비율로 변환한 후 행렬을 반환합니다.
scaleNonUniform(in float scaleFactorX, in floatscaleFactorY)	SVGMatrix	인자값에 따라 동일하지않은 비율로 변환한 후 행렬을 반환합니다.
rotate(in floatangle)	SVGMatrix	인자값에 따라 회전하여 행렬을 반환합니다. (angle 은 각도입니다.)
rotateFromVector(in float x, in floaty)	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 floatangle)	SVGMatrix	x값으로 비스듬하게(왜곡하는) 움직인 행렬을 반환한다.
skewY(in floatangle)	SVGMatrix	y값으로 비스듬하게(왜곡하는) 움직인 행렬을 반환한다.

브라우저 지원EDIT

• Desktop
 
• Mobile

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

 

문서 태그 및 공헌자

 최종 변경: Hmmim, 2015. 11. 23. 오전 11:34:07