배경 이미지가 SVG로 확대/축소 및 이동하지 않습니다.

Question

SVG와 배경 이미지가 있습니다. SVG를 확대/축소하려고하고 있습니다. 줌과 패닝을 사용할 수는 있지만 배경 이미지는 따라갈 수 없습니다. 마찬가지로, 왼쪽과 오른쪽으로 팬 할 수 있으며, 배경 이미지가 뒤따라 올 것이지만, 위아래로 패닝 할 때는 그렇지 않습니다.

예를 들어 라이브러리를 사용할 수 없습니다. svg-pan-zoom. 이것에 대한 실제 응용 프로그램은 터치 스크린이며 onclick 이벤트는 이벤트로 바뀌며 다른 SVG에 연결됩니다. 그러나, 내 질문에, 나는 버튼으로 간단하게 유지했습니다.

SVG 파일 크기가 늘어나므로 내 배경 이미지를 CSS로 추가하고 SVG와 인라인하지 않는 것이 좋습니다.

패닝을 허용하기 위해 동일한 크기를 유지하려면 div도 필요합니다.

물론 SVG와 배경 이미지를 동일한 방식으로 스케일하는 방법이 있습니까?

여기 내 JSFiddle입니다. (스크립트는 JSfiddle에서 작동하지 않는 것 같지만 서버에서 실행될 때 사용됩니다).

Answer 1

내 배경 이미지를 CSS로 추가하고 SVG와 인라인하지 않는 것이 좋습니다. 그러면 SVG 파일 크기가 증가합니다.

정확하지 않습니다. SVG에서 <image>을 통해 배경 이미지를 링크하면 CSS를 사용하는 것보다 SVG의 크기가 더 이상 증가하지 않습니다.

다른 작업을 수행 할 필요없이 SVG의 나머지 부분과 함께 이동하고 크기가 조정됩니다.