Làm thế nào để có được ScrollBars trong SVG?

Question

Tôi có phần tử SVG với nhiều phần tử bên trong. Phần tử SVG có một hộp xem, vì vậy bạn có thể nhấn nút thu phóng và các phần tử xuất hiện lớn hơn hoặc nhỏ hơn. Hoạt động tốt. Bây giờ vấn đề là, khi các phần tử tràn phần tử SVG gốc không có thanh cuộn xuất hiện.

Ví dụ:

<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)); 

Ai đó có thể giúp tôi? Tôi đặt phần bù tràn vào svg và cũng có trong thẻ div. không hoạt động.

Answer 1

Một phần của điểm SVG là để nó có thể mở rộng cho vừa với màn hình. Tuy nhiên, tôi nghĩ nếu bạn muốn nhận được một cái gì đó giống như những gì bạn đang mô tả, thì bạn cần đặt rõ ràng width và height thành phần svg. Một cái gì đó như http://jsfiddle.net/qTFxJ/13/ nơi tôi đặt width và height tính bằng pixel để khớp với kích thước viewBox của bạn.

Answer 2

Hãy thử làm cho phần tử SVG lớn hơn div và để div xử lý tràn bằng cách sử dụng cuộn.

Ví dụ, xem jsfiddle này, trong đó sử dụng css sau:

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; 
}