본문 바로가기
HTML5/SVG

[SVG] SVG matrix interface

by Jundol 2015. 11. 23.

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

SVG matrix interfaceEDIT

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

[a c e]
[b d f]

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

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

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

인터페이스 개요

Also implementNone
Methods
Properties
  • float a
  • float b
  • float c
  • float d
  • float e
  • float f
Normative documentSVG 1.1 (2nd Edition)

프로퍼티EDIT

NameTypeDescription
afloatThe a component of the matrix.
bfloatThe b component of the matrix.
cfloatThe c component of the matrix.
dfloatThe d component of the matrix.
efloatThe e component of the matrix.
ffloatThe f component of the matrix.

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

메소드EDIT

Name & ArgumentsReturnDescription
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)SVGMatrixx값으로 비스듬하게(왜곡하는) 움직인 행렬을 반환한다.
skewY(in floatangle)SVGMatrix
y값으로 비스듬하게(왜곡하는) 움직인 행렬을 반환한다.

브라우저 지원EDIT

FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support??9??

 

문서 태그 및 공헌자

 최종 변경: Hmmim


'HTML5 > SVG' 카테고리의 다른 글

[SVG] preserveAspectRatio 고정종횡비  (6) 2015.10.19
[SVG] document.createElementNS  (4) 2015.10.05
SVG Editor 분석-3 Path 포인트 정의하기  (6) 2015.06.15
SVG pathsegType  (6) 2015.06.15
SVG Editor 분석-2 객체 추가  (6) 2015.06.12

댓글