SVGでスクロールバーを取得するには？

Question

私は内部に多くの要素を持つSVG要素を持っています。 SVG要素にはビューボックスがあるので、ズームボタンを押すと要素が大きくなったり小さくなったりします。うまくいく。ここで問題は、要素が親SVG要素をオーバーフローしたときにスクロールバーが表示されないことです。

例：

<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のポイントの一部は、画面に合わせて拡大縮小できるようになっています。しかし、あなたが何を記述しているのかを知りたければ、とheightをsvg要素に明示的に設定する必要があります。何かhttp://jsfiddle.net/qTFxJ/13/のようにviewBoxのサイズに合わせてピクセル数をwidthとheightに設定します。

Answer 2

SVG要素をdivより大きくし、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; 
}