turismo - Posicionamiento SVG

usa

Question

Estoy jugando con SVG y tengo algunos problemas con el posicionamiento. Tengo una serie de formas que están contenidas en la etiqueta del grupo g . Tenía la esperanza de usarlo como un contenedor, así que podría establecer su posición x y luego todos los elementos en ese grupo también se moverían. Pero eso no parece ser posible.

1. ¿Cómo va la mayoría de las personas a posicionar un grupo de elementos que desea mover en tándem?
2. ¿Hay algún concepto de posicionamiento relativo? por ejemplo, en relación con su padre

Answer 1

Como se menciona en el otro comentario, el atributo transform en el elemento g es lo que desea. Usa transform="translate(x,y)" para mover g y las cosas dentro de g se moverán en relación con g .

Answer 2

Hay dos formas de agrupar varias formas de SVG y posicionar el grupo:

El primero en usar <g> con el atributo de transform como Aaron escribió. Pero no puedes usar un atributo x en el elemento <g> .

La otra forma es usar el elemento <svg> anidado.

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

De esta forma, el # group1 svg está anidado en #parent, y el x=10 es relativo al svg principal. Sin embargo, no puede usar el atributo de transform en el elemento <svg> , que es todo lo contrario del elemento <g> .

Answer 3

Hay una alternativa más corta a la respuesta anterior. Los elementos SVG también se pueden agrupar por elementos svg de anidamiento:

<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>

Los dos rectángulos son idénticos (aparte de los colores), pero los elementos svg principales tienen valores de x diferentes.

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

Answer 4

Todo en el elemento g se posiciona con relación a la matriz de transformación actual.

Para mover el contenido, simplemente ponga la transformación en el elemento g:

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

Enlaces: Example de la especificación SVG 1.1