web-dev-qa-db-fra.com

Comment obtenir des ScrollBars en SVG?

J'ai un élément SVG avec beaucoup d'éléments à l'intérieur. L'élément SVG a une boîte de visualisation, vous pouvez donc appuyer sur un bouton de zoom et les éléments apparaissent plus ou moins grands. Fonctionne bien. Maintenant, le problème est que, lorsque les éléments dépassent l'élément SVG parent, aucune barre de défilement n'apparaît.

Exemple:

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

Est-ce que quelqu'un peut m'aider? J'ai mis l'attribut de débordement dans le svg et aussi dans la balise div. ne fonctionne pas.

htmlcsssvg
25
snapple

Essayez de rendre l'élément SVG plus grand que le div, et laissez le div gérer le débordement à l'aide de scroll.

Par exemple, voyez ceci jsfiddle , qui utilise le CSS suivant:

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

Une partie de l'intérêt de SVG est de pouvoir évoluer pour s'adapter à l'écran. Cependant, je pense que si vous voulez obtenir quelque chose comme ce que vous décrivez, vous devez définir explicitement width et height sur l'élément svg. Quelque chose comme http://jsfiddle.net/qTFxJ/13/ où j'ai défini les width et height en pixels pour correspondre à votre taille viewBox .

5
ScottS