매트릭스 정보를 간단한 x 및 y 좌표로 변환하는 방법

Question

일러스트 레이터에서 편집하고있는 SVG 파일이 있습니다. 이미이 파일 안의 경로 정보를 사용하여 Raphael 객체를 생성했습니다. 지금하고 싶은 것은 그림의 일부에 텍스트를 추가하는 것입니다. Raphael은 X와 Y 좌표 만 허용하며, SVG 파일 안의 텍스트는 행렬입니다.

Basicly 나는 이것을 설정해야합니다

<text transform="matrix(1 0 0 1 583 562)" font-size="12">Argentina</text> 

이런 일에 :

var t = paper.text(x, y, "Argentina"); 

이 가능인가요? 또한 텍스트를 윤곽선으로 바꾸어 보았지만 복잡한 경로가 생겨서 더 가벼운 것을 선호합니다.

Answer 1

문제가 발생합니다. Raphael 변환기 (첫 번째 중 하나)에 SVG를 작성할 때이 문제를 조사했습니다. 변환기는 경로 밖의 모든 변환을 가져 와서 모든 좌표를 상대적에서 절대로 변경합니다. svg Text에는 주위를 둘러 볼 수있는 많은 것들이 있습니다. 내가 작성한 커버 러는 텍스트 변환을 지원합니다. 나는 당신이 변환기를 통해 당신의 SVG를 넣고 텍스트를 참조하여 어떤 자바 스크립트를 볼 수 있을지도 모른다고 생각했다. 변환기는 최소한 두 가지 형식을 지정하지만 시도해 볼 수있는 형식은 기본 출력입니다. converter page

기본값을 사용하여 SVG를 업로드하십시오. "Raphael 수집"을 클릭하면 생성 된 대화 형 자바 스크립트로 이동합니다. 경로와이 유일한 거래는 특정 경우에 ... 도움이 필요하면

, 나는 다시 확인합니다 ...은 "나 페이지"링크를 클릭 텍스트로 이루어졌다 무슨 일 매트릭스 단지를

Answer 2

을 볼 수 x: 583 및 y: 562으로 변환되지만 요소의 크기가 조절되거나 회전하면 이러한 값은 오도 된 것입니다. 당신의 요소에 변환을 적용 좋아하지 않는 경우에 당신은 당신이 필요로하는 모든 인을 위해, 라파엘에서 직접 행렬 변환을 적용 할 수

... 이제

transformation = Raphael 
    .matrix(1, 0, 0, 1, 583, 562) 
    .toTransformString(); 

text = paper 
    .text(0, 0, "Argentina") 
    .attr("font-size", 12) 
    .transform(transformation)​ 

, 당신은에 행렬 변환을 사용할 수 있습니다 console.log(transformation)을 수행하여 사람이 읽을 수있는 형식이면 t100,100r30,100,100s2,2,100,100과 같은 문자열을 제공하며 이는 Raphael's documentation

으로 잘 설명됩니다.