Positionnement

Question

Je vais avoir un jeu avec SVG et je rencontre quelques problèmes avec le positionnement. J'ai une série de formes qui sont contenues dans l' g groupe tag. J'espérais pouvoir l'utiliser comme un conteneur, afin que je puisse définir sa position x et ensuite tous les éléments de ce groupe serait aussi se déplacer. Mais cela ne semble pas être possible.

1. Comment la plupart des gens aller sur le positionnement d'un groupe d'éléments que vous souhaitez déplacer en tandem?
2. Est-il un concept de positionnement relatif? par exemple, par rapport à son parent

Answer 1

Tout dans l’élément de g est positionné par rapport à la matrice de transformation courante.

Pour déplacer le contenu, il suffit de mettre la transformation dans l’élément de g :

Liens : exemple de la spécification SVG 1.1

Answer 2

Il y a une alternative plus courte à la réponse précédente. Éléments de SVG peuvent également être regroupées en imbriquant les éléments svg :

Les deux rectangles sont identiques (sauf les couleurs), mais les éléments svg de parents ont différentes valeurs x.

Voir http://tutorials.jenkov.com/svg/svg-element.html.

Answer 3

Comme mentionné dans l’autre commentaire, l’attribut « transform » sur l’élément de g est ce que vous voulez. Utilisez transform="translate(x,y) » pour déplacer le g autour et les choses dans le g se déplace par rapport à g.

Answer 4

Vous pouvez les regrouper dans un div, puis déplacez la div.

voir ce violon : http://jsfiddle.net/israfelli/YfSG2/

Dans le violon, que j’ai 100 style SVG rects animation à l’intérieur d’un div traduction (gris) :