Positionnement SVG

203

Je joue avec SVG et j'ai quelques problèmes de positionnement. J'ai une série de formes contenues dans la gbalise de groupe. J'espérais l'utiliser comme un conteneur, afin de pouvoir définir sa position x et tous les éléments de ce groupe se déplaceraient également. Mais cela ne semble pas possible.

Comment la plupart des gens positionnent-ils un groupe d'éléments que vous souhaitez déplacer en tandem?
Existe-t-il un concept de positionnement relatif? par exemple par rapport à son parent

svg position grouping ChrisInCambo
la source

276

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

Pour déplacer le contenu, placez simplement la transformation dans l'élément g:

<g transform="translate(20,2.5) rotate(10)">
    <rect x="0" y="0" width="60" height="10"/>
</g>

Liens: exemple de la spécification SVG 1.1

Aaron Digulla
la source

73

Il existe une alternative plus courte à la réponse précédente. Les éléments SVG peuvent également être regroupés en imbriquant des éléments svg:

<svg xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <svg x="10">
    <rect x="10" y="10" height="100" width="100" style="stroke:#ff0000;fill: #0000ff"/>
  </svg>
  <svg x="200">
    <rect x="10" y="10" height="100" width="100" style="stroke:#009900;fill: #00cc00"/>
  </svg>
</svg>

Les deux rectangles sont identiques (à l'exception des couleurs), mais les éléments svg parents ont des valeurs x différentes.

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

Kağan Kayal
la source

33

À droite, l'élément SVG peut également être un élément de regroupement. Je voulais souligner que l'élément SVG implémente l'écrêtage par défaut (au moins en ce moment dans Chrome). Cela signifie que tout débordement ne sera pas visible. Contrairement à l'élément "g". Définissez simplement overflow = "visible" et vous êtes de retour aux affaires, si cela vous mord.

bladnman

1

C'est utile si vous voulez traduire un groupe d'éléments avec des pourcentages: stackoverflow.com/a/17103928/470117

mems

14

Y a-t-il des inconvénients à utiliser svg au lieu de g?

grabantot

34

Comme mentionné dans l'autre commentaire, l' transformattribut sur l' gélément est ce que vous voulez. Utilisez transform="translate(x,y)"pour déplacer les gobjets et les objets dans le gmouvement par rapport au g.

lecture codée
la source

22

Il existe deux façons de regrouper plusieurs formes SVG et de positionner le groupe:

Le premier à utiliser <g>avec transformattribut comme l'a écrit Aaron. Mais vous ne pouvez pas simplement utiliser un xattribut sur le<g> élément.

L'autre façon consiste à utiliser l' <svg>élément imbriqué .

<svg id="parent">
   <svg id="group1" x="10">
      <!-- some shapes -->
   </svg>
</svg>

De cette façon, le svg # group1 est imbriqué dans #parent, et le x=10est relatif au svg parent. Cependant, vous ne pouvez pas utiliser l' transformattribut on <svg>element, ce qui est tout à fait le contraire de <g>element.

fengshuo
la source

13

pourquoi <g> n'a pas d'attribut ax et y alors que toutes les autres balises svg l'ont? cela signifie que la position est toujours absolue dans un <svg> ... pas de position relative,

reuns

2

les comités open source sont comme ça.

Muhammad Umer

Je suis d'accord ... cela semble être un mauvais choix de conception. Incrémenter simplement la transformation X d'un groupe nécessite d'écrire une chaîne potentiellement compliquée et de stocker toutes les variables ailleurs

Eyelash

9

@ user1952009: il y a une chance - juste une chance - que vous ne compreniez pas réellement les choix de conception qui sont entrés dans SVG.

Paul D. Waite

3

<g> sert au regroupement. Il ne représente aucune forme en soi, il ne serait donc pas logique qu'il ait un emplacement ou une taille. Cependant, il est logique d'avoir un attribut de transformation , que vous pouvez lire comme "appliquer cette transformation à l'ensemble du groupe".

AlQafir

0

Je sais que c'est vieux mais ni un <svg>tag de groupe ni un<g> problème fixe auquel je faisais face. J'avais besoin d'ajuster la position y d'une balise qui comportait également une animation.

La solution consistait à utiliser à la fois les balises et:

<svg y="1190" x="235">
   <g class="light-1">
     <path />
   </g>
</svg>

Code convivial
la source

Positionnement SVG

Réponses: