SVG에서 스크롤 막대를 얻는 방법?

Question

내부에 많은 요소가있는 SVG 요소가 있습니다. SVG 요소에는보기 상자가 있으므로 확대/축소 버튼을 누르면 요소가 더 크게 또는 더 작게 표시됩니다. 잘 작동합니다. 이제 문제는 요소가 부모 SVG 요소를 오버플로 할 때 아무 ScrollBars도 나타나지 않는다는 것입니다.

예 :

<div width="100%" height="100%"> 
<svg height="100%" width="100%" style="overflow-x: auto; overflow-y: auto; "viewBox="0 0 793 1122"> 
<g> 
... 
<line y2="44.9792mm" y1="44.9792mm" x1="197.203mm" x2="12.7028mm"></line> 
<line y2="44.9792mm" y1="44.9792mm" x1="197.203mm" x2="12.7028mm"></line> 
<text x="43.4516mm" y="52.9167mm" style="font-size: 11pt;">S</text> 
<rect x="0" width="210mm" y="0" height="297mm"></rect> 
... 
</g> 
</svg> 
</div> 

---

//here I set the viewbox after clicking the zoomOut-Button 
float width = svg.getViewBox().getBaseVal().getWidth(); 
float height = svg.getViewBox().getBaseVal().getHeight(); 

svg.getViewBox().getBaseVal().setHeight((float) (height/0.9)); 
svg.getViewBox().getBaseVal().setWidth((float) (width/0.9)); 

누군가가 나를 도울 수 있습니까? 오버 플로우 속성을 svg 및 div 태그에도 넣습니다. 작동하지 않습니다.

Answer 1

SVG 지점의 일부는 화면에 맞게 확장 할 수 있습니다. 그러나 설명하는 것과 같은 것을 얻고 싶다면 width 및 height을 svg 요소로 명시 적으로 설정해야한다고 생각합니다. 예를 들어 http://jsfiddle.net/qTFxJ/13/과 같이 viewBox 크기와 일치하도록 width 및 height을 픽셀 단위로 설정합니다.

Answer 2

div보다 SVG 요소를 크게 만들고 div를 사용하여 스크롤을 사용하여 오버플로를 처리하도록하십시오.

div#container { 
    height: 400px; 
    width: 400px; 
    border:2px solid #000; 
    overflow: scroll; 
} 
svg#sky { 
    height: 100px; 
    width: 1100px; 
    border:1px dotted #ccc; 
    background-color: #ccc; 
}