[SVG] SVG matrix interface

HTML5/SVG

[SVG] SVG matrix interface

Jundol 2015. 11. 23. 11:35

본 포스팅은 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값으로 비스듬하게(왜곡하는) 움직인 행렬을 반환한다.

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

문서 태그 및 공헌자

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