README.md

$$mergeTranslateTransform

• source
• test

svg 엘리먼트에 가장 마지막으로 적용된 SVGTransform 이 SVGTransform.SVG_TRANSFORM_TRANSLATE 타입인 경우 해당 SVGTransform 을 svg 엘리먼트의 x, y 속성 (혹은 그에 준하는 속성) 에 반영합니다. svg 엘리먼트에 다른 SVGTransform 이 있는 경우 각 SVGTransform 을 업데이트합니다.

cx, cy 처럼 x, y 위치를 나타내는 속성명이 다른 경우 x_name, y_name 으로 해당 속성명을 설정할 수 있습니다.

const str = `
<rect
  x="10"
  y="20"
  width="100"
  height="200"
  transform="scale(2, 4)"
>
</rect>
`;
const $el = $$el(str)();

console.log($$getBaseTransformList($el));
// SVGTransformList {0: SVGTransform, length: 1, numberOfItems: 1}
// 0: SVGTransform {type: 3, matrix: SVGMatrix, angle: 0}
//   matrix: SVGMatrix {a: 2, b: 0, c: 0, d: 4, e: 0, f: 0}

$$initTranslateTransform({ tx: 500, ty: 600 })($el);

console.log($$getBaseTransformList($el));
// SVGTransformList {0: SVGTransform, 1: SVGTransform, length: 2, numberOfItems: 2}
// 0: SVGTransform {type: 2, matrix: SVGMatrix, angle: 0}
//   matrix: SVGMatrix {a: 1, b: 0, c: 0, d: 1, e: 500, f: 600}
// 1: SVGTransform {type: 3, matrix: SVGMatrix, angle: 0}
//   matrix: SVGMatrix {a: 2, b: 0, c: 0, d: 4, e: 0, f: 0}

$$mergeTranslateTransform()($el);

console.log($$getBaseTransformList($el));
// SVGTransformList {0: SVGTransform, length: 1, numberOfItems: 1}
// 0: SVGTransform {type: 1, matrix: SVGMatrix, angle: 0}
//   matrix: SVGMatrix {a: 2, b: 0, c: 0, d: 4, e: -500, f: -1800}

console.log($el);
// <rect x="510" y="620" width="100" height="200" transform="matrix(2 0 0 4 -500 -1800)"></rect>

const str = `
<circle
  cx="10"
  cy="20"
  r="100"
  transform="scale(2, 4)"
>
</circle>
`;
const $el = $$el(str)();

console.log($$getBaseTransformList($el));
// SVGTransformList {0: SVGTransform, length: 1, numberOfItems: 1}
// 0: SVGTransform {type: 3, matrix: SVGMatrix, angle: 0}
//   matrix: SVGMatrix {a: 2, b: 0, c: 0, d: 4, e: 0, f: 0}

$$initTranslateTransform({ tx: 500, ty: 600 })($el);

console.log($$getBaseTransformList($el));
// SVGTransformList {0: SVGTransform, 1: SVGTransform, length: 2, numberOfItems: 2}
// 0: SVGTransform {type: 2, matrix: SVGMatrix, angle: 0}
//   matrix: SVGMatrix {a: 1, b: 0, c: 0, d: 1, e: 500, f: 600}
// 1: SVGTransform {type: 3, matrix: SVGMatrix, angle: 0}
//   matrix: SVGMatrix {a: 2, b: 0, c: 0, d: 4, e: 0, f: 0}

$$mergeTranslateTransform({ x_name: "cx", y_name: "cy" })($el);

console.log($$getBaseTransformList($el));
// SVGTransformList {0: SVGTransform, length: 1, numberOfItems: 1}
// 0: SVGTransform {type: 1, matrix: SVGMatrix, angle: 0}
//   matrix: SVGMatrix {a: 2, b: 0, c: 0, d: 4, e: -500, f: -1800}

console.log($el);
// <circle cx="510" cy="620" r="100" transform="matrix(2 0 0 4 -500 -1800)"></circle>