2010-08-07 4 views
3

그래서 I've found a script도 마찬가지입니다. 변형 행렬을 적용하여 전체 svg 내용을 감싸는 <g>을 확대/축소합니다. 스니핑). <g>에있는 모든 항목을 감싸는 것은 옵션이 아닙니다. 이미지 뷰어를 만들고 다른 파일을로드 할 수 있기 때문입니다.마우스 위치에 따라 SVG의 다른 부분을 확대/축소합니다.

transform="matrix(...)"을 루트에 설정하면 <svg>이 적용되지 않습니다. currentScale<svg>으로 설정하면 사진이 확대/축소되지만 마우스 왼쪽 위치 나 이미지 가운데가 아닌 왼쪽 상단 모서리에서 확대/축소됩니다. 그리고 전체 <svg> 요소를 끌기가 불가능하기 때문에 이동 기능도 작동하지 않습니다.

viewBox 속성을 조작하는 것이 도움이되는 것처럼 보이지만 필요한 값을 알아내는 것은 매우 까다로운 작업입니다.

그런 상황에서 확대/축소 및 이동하는 방법을 생각해 볼 수 있습니까?

demo here을 다운로드 할 수 있습니다. 컴퓨터에 Opera가 설치되어 있어야합니다.

답변

3

currentScale 외에도 수정할 수있는 currentTranslate 속성이 있습니다.

+0

고맙지 만 사양에 따르면 읽기 전용이라고되어 ​​있습니다. 내가 어떻게 사용할 수 있는지 자세히 설명해 주시겠습니까? –

+1

예, 'currentTranslate' 객체 자체는 읽기 전용이지만'currentTranslate.x'와'currentTranslate.y'에 쓸 수 있습니다. –