Posicionamiento SVG

203

Estoy jugando con SVG y tengo algunos problemas con el posicionamiento. Tengo una serie de formas que están contenidas en la getiqueta del grupo. Tenía la esperanza de usarlo como un contenedor, para poder 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 hace la mayoría de las personas para posicionar un grupo de elementos que desea mover en conjunto?
  2. ¿Existe algún concepto de posicionamiento relativo? por ejemplo, relativo a su padre
svg position grouping ChrisInCambo
fuente

Respuestas:

276

Todo en el elemento g se coloca en relación con 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: Ejemplo de la especificación SVG 1.1

Aaron Digulla
fuente
73

Hay una alternativa más corta a la respuesta anterior. Los elementos SVG también se pueden agrupar anidando elementos 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>

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

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

Kağan Kayal
fuente
33
Correcto, el elemento SVG también puede ser un elemento de agrupación. Quería señalar que el elemento SVG implementa el recorte de forma predeterminada (al menos en este momento en Chrome). Esto significa que cualquier desbordamiento no será visible. A diferencia del elemento "g". Simplemente configure overflow = "visible" y volverá al negocio, si esto lo muerde.
bladnman
1
Es útil si desea traducir un grupo de elementos con porcentajes: stackoverflow.com/a/17103928/470117
mems
14
¿Hay algún inconveniente para usar svg en lugar de g?
grabantot
34

Como se mencionó en el otro comentario, el transformatributo en el gelemento es lo que desea. Use transform="translate(x,y)"para mover el galrededor y las cosas dentro de la gvoluntad se moverán en relación con el g.

lectura codificada
fuente
22

Hay dos formas de agrupar múltiples formas SVG y posicionar el grupo:

El primero en usar <g>con transformatributo como Aaron escribió. Pero no puede simplemente usar un xatributo en el <g>elemento.

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

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

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

fengshuo
fuente
13
¿por qué <g> no tiene el atributo ax e y mientras que todas las demás etiquetas svg lo tienen? esto significa que la posición es siempre absoluta en un <svg> ... ninguna posición relativa,
reuns
2
Los comités de código abierto son así.
Muhammad Umer
Estoy de acuerdo ... parece una mala elección de diseño. Simplemente incrementar la transformación X de un grupo requiere escribir una cadena potencialmente complicada y almacenar todas las variables en otro lugar
Eyelash
9
@ user1952009: existe la posibilidad, solo una posibilidad, de que realmente no comprenda las opciones de diseño que se incluyeron en SVG.
Paul D. Waite
3
<g> es para agrupar. No representa ninguna forma en sí misma, por lo que no tendría sentido que tenga una ubicación o un tamaño. Sin embargo, tiene sentido tener un atributo de transformación , que puede leerse como "aplicar esta transformación a todo el grupo".
AlQafir
0

Sé que esto es antiguo, pero ni una <svg>etiqueta de grupo ni un <g>problema resuelto. Necesitaba ajustar la posición y de una etiqueta que también tenía animación.

La solución fue usar ambos y etiquetar juntos:

<svg y="1190" x="235">
   <g class="light-1">
     <path />
   </g>
</svg>
Código amistoso
fuente