자신의 축을 중심으로 SVG 요소를 미러링하십시오.

Question

임의의 SVG 요소를 프로그래밍 방식으로 미러링하고 싶습니다. 즉, 현재 위치에 있어야하지만 미러링해야합니다.

scale(1, -1)을 사용하여 요소를 대칭 처리 한 다음 변환 할 수 있음을 알고 있습니다. 하지만 질문은 : 번역 할 금액을 어떻게 알 수 있습니까?

나는 요소의 높이와 요소의 거리를 0 축에 추가하여 양을 계산할 수 있다고 생각했습니다. 0 축까지의 거리가 10 인 경우, 소자의

<polyline id="line1" stroke="green" stroke-width="1" fill="none" 
      points=" 
        10, 10   
        20, 10 20, 20 30, 20 30, 10 
        40, 10 40, 30 50, 30 50, 10 
        60, 10 60, 40 70, 40 70, 10 
        80, 10 80, 50 90, 50 90, 10 
       100, 10 100, 60 110, 60 110, 10 
       " 
      transform="scale(1, -1) translate(0, -70)" 
/>         

높이가 50이므로 거리 50 + 2 * 10 = 70이다

이것은이 예에 대해 작동한다.

그러나 이것은 계산 유형이 요소 유형 (선, 폴리 라인, 직사각형, g) 및 객체가 이미 변환되었는지 여부에 따라 달라짐을 의미합니다.

SVG 요소를 그대로 유지하는 일반적인 방법이 있습니까?

Answer 1

분명히 적용해야하는 변환 작업은 사용자가 지적한 모든 요소에 따라 달라집니다. 모든 경우에 사용할 수있는 간단한 '일반적인'방법은 없습니다. 당신은 사건별로 그것을 해결해야 할 것입니다.

getBBox() 메서드는 의 바운딩 박스에 후에 transform 속성을 적용합니다. 이로부터 반사 축 (즉, 중심 축)을 결정할 수 있으므로 필요한 변환 작업을 결정할 수 있습니다.

Answer 2

이 경우는»점 주위의 크기 조정«문제 (점 주위를 회전하는 것과 마찬가지). @BigBadaboom이 지적했듯이 요소의 경계 상자를 사용해야합니다. , 요점은 당신이 개체 주위 원점 ((0,0))에있다 확장하려는 있도록/

먼저 이동 객체를 변환

둘째 : 그리고 거기에서 당신은 세 단계를 수행해야합니다 눈금,

세 번째 : 1 단계에서 음수 벡터로 다시 이동/번역합니다.

위에서 언급 한 1 단계에서 3 단계까지의 모든 행렬을 곱하여 적용해야하는 변환 행렬을 미리 계산할 수 있습니다.

은 로컬 좌표로 경계 상자를 제공하므로 이미 변형이 적용된 그룹에 요소가있는 경우 좌표는이 그룹과 관련됩니다.

getBoundingClientRect()은 절대 좌표로 값을 제공합니다.

절대 또는 로컬 공간에서 계산을 수행할지 여부를 결정해야하므로 중요합니다. 절대 공간을 사용하는 것이 일반적이지만, 각 요소에 대해 작동 할 것이기 때문에 로컬 공간을 사용하려는 유혹이 있더라도 DOM에 깊이 중첩되어 있으며 변형이 이미 적용되어 있습니다.

getTransformToElement() 당신은 모든 요소의 절대 변환을 계산하는 친구가 될 것입니다.

절대 공간에서 요소에 필요한 변환을 계산하는 경우이 변환에»기초 변경을 적용하여 로컬 공간으로 다시 가져와야합니다.

이 모든 아핀 변환은 첫눈에 조금 복잡해 보일 수 있지만 일단 배율 된 크기, 회전, 전단 및 체인 변환 (arround 점)이 문제가되지 않으면 그 뒤에 수학을 얻는 것이 좋습니다. 더 길게.

행운을 빌어 요!