Limiter SVG aux limites div

Question

J'essaie d'afficher plusieurs polygones en tant qu'image SVG sur un div en utilisant Raphael. Bien que j'ai mis en place la taille pour le div Raphael obtient comme argument pour créer l'objet papier, la taille de l'élément div n'est pas respectée et l'image est dessinée en dehors des limites div (que je comprends d'une manière ou d'une autre, les coordonnées polygonales vont au-delà des limites div).

Est-il possible de faire en sorte que le SVG se comporte comme une image normale qui évolue automatiquement une fois que la taille de la fenêtre du navigateur change et empêche le SVG d'être tracé hors des limites div (comme les comportements)?

Cheers, Max

Answer 1

Définissez le style overflow de la div être overflow: auto ou overflow: hidden. La valeur par défaut pour un div est overflow: visible, ce qui fait saigner SVG en dehors de la div. Cependant, si vous voulez que l'ensemble du SVG «redescende» pour que vous puissiez voir le tout, vous devrez redimensionner et traduire chaque élément de Raphaël sur la toile (c'est-à-dire zoomer). J'ai fait défiler et zoomer, mais évidemment, le défilement est beaucoup plus facile.

Answer 2

Pour faire l'élément de Raphaël remplir l'élément contenant (on dirait ce que vous voulez), utilisez:

var paper = Raphael("someElement", "100%", "100%"); 

Je n'ai testé avec Firefox et Chrome, mais semble fonctionner bien.

Answer 3

On dirait qu'il y a 2 questions en une.

Pour la « mise à l'échelle automatique avec la fenêtre du navigateur comme une image » chose, vous pouvez jeter un oeil sur le code de cet exemple, qui fait le travail:

http://www.irunmywebsite.com/raphael/scaleraphael.php