turismo - Posicionamiento SVG
usa (4)
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.
- ¿Cómo va la mayoría de las personas a posicionar un grupo de elementos que desea mover en tándem?
- ¿Hay algún concepto de posicionamiento relativo? por ejemplo, en relación con su padre
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 .
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> .
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.
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
