web-dev-qa-db-fra.com

Positionnement SVG

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

  1. Comment la plupart des gens s'y prennent-ils pour positionner un groupe d'éléments que vous souhaitez déplacer en tandem?
  2. Existe-t-il un concept de positionnement relatif? par exemple. par rapport à son parent
svgpositiongrouping
174
ChrisInCambo

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

Pour déplacer le contenu, il suffit de mettre 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

245
Aaron Digulla

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 parent svg ont des valeurs x différentes.

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

54
Kağan Kayal

Comme mentionné dans l'autre commentaire, l'attribut transform de l'élément g correspond à vos souhaits. Utilisez transform="translate(x,y)" pour déplacer la g et les éléments contenus dans la g se déplaceront par rapport à la g.

30
codedread

Il existe deux manières de regrouper plusieurs formes SVG et de positionner le groupe:

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

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

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

De cette manière, le groupe # group1 svg est imbriqué dans #parent et le x=10 est relatif au groupe parent svg. Cependant, vous ne pouvez pas utiliser l'attribut transform sur l'élément <svg>, contrairement à l'élément <g>.

16
fengshuo