SVG/SVGPan :로드

Question

시 센터 그래픽 내 브라우저 프레임 내에서 SVG 그래픽을 중앙에 중첩 된 <svg/> 및 <g/> 요소를 사용했다. 외부 svg 요소의 너비와 높이가 100 %이고, 내부의 x와 y는 50 %로 설정되어 있습니다. 안쪽 g 요소는 반쪽 이미지 크기의 음의 오프셋을가집니다. 이것은 정상적으로 작동하지만 이제 팬 및 확대/축소 기능을 추가하려고합니다.

중첩 된 SVG 접근

혼란 도착 SVGPan와 호환되지 않는 것 같다.

SVGPan은 맨 위 왼쪽의 그래픽으로 시작하는 경우에만 작동합니다. SVGPan과 호환되는 방식으로 최상위 수준의 중심을 중심으로 변환을 추가하기 위해 SCG가로드 /로드 될 때 실행되는 스크립트를 작성해야한다고 생각합니다.

는

어떻게 초기화 할 수 있습니다 내 <g />을 thusly 히 변환 행렬 변환에?

((viewport.width - g.width)/2, (viewport.width - g.width)/2) 

SVG가 생성하지만 난 변환 또는 번역 만들 거기에 몇 가지 스크립트를 삭제할 수 있습니다 때 뷰포트의 크기는 알려져 있지 않다. 스크립트는 어디서 살고 무엇을해야합니까? SVGPan과 호환되어야합니다.

Answer 1

탈로스는 나에게이 문제는, 지금

<svg><g><svg></svg></g></svg> 

을 사용하고 https://github.com/talos/jquery-svgpan/issues/3

대신

<svg><svg><g></g></svg></svg> 

참조 해결하고는 중심의 그래픽 jquery- [작업을 수행 할 수 있습니다 ] svgpan.

Answer 2

는 HTML 요소에 SVG 요소를 채우려면 : (해당하는 경우, 또는 position:absolute 또는 position:fixed)

1. 는 포장 HTML 요소에 position:relative를 넣습니다.
2. 는 SVG 요소에 position:absolute (및 top:0; left:0; width:100%; height:100% 필요한 경우)를 넣습니다. 이 당신의 SVG 요소와

는 항상 HTML 요소를 채울 것입니다. 이 요소의 위치/크기/중심을 원하는대로 지정합니다.

은 SVG 콘텐츠를 콘텐츠의 중심을 중심으로하는 귀하의 SVG에 viewBox을 설정 SVG 뷰포트

1. 내 중심 얻으려면. 콘텐츠 인 경우
   예를 들어, 175,300를 중심으로 반경 30 원은 viewBox="145 270 60 60"을 설정합니다.
2. SVG 요소에 preserveAspectRatio 특성을 생략하거나 xMidYMid을 사용하도록 설정하여 뷰 박스의 가운데가 항상 SVG 뷰포트의 가운데에 오도록하십시오.

는 팬 및

그에 따라 viewBox을 조정하거나 다른 요소를 변형하여 SVG 콘텐츠를 끕니다.