Jak zdobyć ScrollBars w SVG?

Question

Mam element SVG z dużą ilością elementów wewnątrz. Element SVG ma widok, dzięki czemu można nacisnąć przycisk zoomu, a elementy wydają się większe lub mniejsze. Działa dobrze. Problem polega na tym, że gdy elementy przepełniają nadrzędny element SVG, nie pojawiają się paski przewijania.

Przykład:

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

Czy ktoś może mi pomóc? Umieszczam nadmiarowy atrybut w svg, a także w znaczniku div. nie działa.

Answer 1

Częścią punktu SVG jest skalowanie do rozmiaru ekranu. Jednak myślę, że jeśli chcesz uzyskać coś takiego, co opisujesz, musisz ustawić wyraźne width i height na element svg. Coś jak http://jsfiddle.net/qTFxJ/13/, gdzie ustawiam width i height w pikselach, aby pasowały do ​​twojego rozmiaru viewBox.

Answer 2

Spróbuj ustawić element SVG większy niż element div i pozwól elementowi div obsługiwać przepełnienie za pomocą przewijania.

Na przykład zobaczyć jsfiddle, który wykorzystuje następujące CSS:

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