SVG et positionnements en pourcentage - HTML/CSS - Programmation
MarshPosté le 01-05-2012 à 09:56:05
Salut à tous!
Je suis entrain de créer un svg avec des bulles et j'aimerais qu'elles puissent se positionner en pourcentage suivant la largeur de la fenetre. En gros mon SVG a une taille de 100% et est contenu dans un div d'une largeur de 45%(du document). Pour positionner des cercles dans mon svg en % il suffit de metre les valeurs CX et CY en pourcentage dans mon "circle" sauf que moi c'est tout un groupe que je veux placer en pourcentage. Or une balise de groupe ne peut être positionnée qu'en pixels aux dernieres nouvelles.
Du coup j'ai pensé faire ca en javascript : J'ai crée une fonction qui se lance lorsque la fenetre du navigateur change de taille (window.onresize) et dedans, j'y fait changer l'attribut x et y de mon groupe. Sauf que pour calculer ses valeurs j'ai besoin d'une valeur de base en pixel or je n'arrive pas à récuperer une valeur en pixel de la largeur de mon SVG mais j'ai tout le temps la valeur 100% du coup.
Deuxieme astuce que je pensais faire : Je créer des bulles avec la balise circle que je place en % et je cale le centre de mon groupe sur le centre de mon circle mais encore une fois je ne vois pas comment faire!
Je tourne en rond et ne trouve pas de solution quelqu'un pour m'aider?
Merci
Message édité par Aslan117 le 01-05-2012 à 09:59:44
Marsh Posté le 01-05-2012 à 09:56:05
Salut à tous!
Je suis entrain de créer un svg avec des bulles et j'aimerais qu'elles puissent se positionner en pourcentage suivant la largeur de la fenetre. En gros mon SVG a une taille de 100% et est contenu dans un div d'une largeur de 45%(du document).
Pour positionner des cercles dans mon svg en % il suffit de metre les valeurs CX et CY en pourcentage dans mon "circle" sauf que moi c'est tout un groupe que je veux placer en pourcentage. Or une balise de groupe ne peut être positionnée qu'en pixels aux dernieres nouvelles.
Du coup j'ai pensé faire ca en javascript : J'ai crée une fonction qui se lance lorsque la fenetre du navigateur change de taille (window.onresize) et dedans, j'y fait changer l'attribut x et y de mon groupe. Sauf que pour calculer ses valeurs j'ai besoin d'une valeur de base en pixel or je n'arrive pas à récuperer une valeur en pixel de la largeur de mon SVG mais j'ai tout le temps la valeur 100% du coup.
Deuxieme astuce que je pensais faire : Je créer des bulles avec la balise circle que je place en % et je cale le centre de mon groupe sur le centre de mon circle mais encore une fois je ne vois pas comment faire!
Je tourne en rond et ne trouve pas de solution quelqu'un pour m'aider?
Merci
Message édité par Aslan117 le 01-05-2012 à 09:59:44