svg - guia - qgis manual

Escalar y duplicar el objeto SVG

Question

¿Cómo puedo escalar más fácilmente un objeto, digamos 2 * veces su tamaño actual y luego voltearlo vertical y horizontalmente, o ambos?

A partir de ahora, puedo establecer "scale (2,2)" para que sea 2 veces más grande que su ancho y alto, pero no puedo voltear al mismo nivel con scale (-1, 1) para flip vertical .

Estoy creando objetos SVG programáticamente, como un formato para exportar a.

Answer 1

Para aplicar tanto la escala como el salto, simplemente haga una lista de ambos en su transformación.

transform="scale(2,2) scale(-1,1)"

o simplemente combine los valores

transform="scale(-2,2)"

Por supuesto, el problema que tiene con las escalas negativas es que los objetos se invierten en el origen (arriba a la izquierda) del SVG, por lo que pueden salirse del borde del documento. Debe corregir esto agregando un traductor también.

Entonces, por ejemplo, imagina que tenemos un documento que es 100x100.

<svg width="100" height="100">
    <polygon points="100,0,100,100,0,100"/>
</svg>

Para voltear esto verticalmente hacemos:

<polygon points="100,0,100,100,0,100" transform="scale(2,-2)"/>

y para corregir el movimiento de la pantalla, lo cambiamos a negativo antes de que se voltee (para que vuelva a aparecer en la pantalla):

<polygon points="100,0,100,100,0,100" transform="scale(2,-2) translate(0,-100)"/>

(El traductor aparece en la segunda posición aquí porque las listas de transformación se aplican de manera efectiva de derecha a izquierda)

o podemos cambiarlo positivo (por el tamaño escalado) después:

<polygon points="100,0,100,100,0,100" transform="translate(0,200) scale(-2,2)"/>

Aquí hay una demostración que muestra el giro vertical, el giro horizontal y ambos volteos

Actualizar

Para voltear (en posición) un objeto ya existente que está en algún lugar de la pantalla. Primero determine su cuadro delimitador (minX, minY, maxX, maxY) o centreX, centreY si ya lo conoce.

Luego anteponga lo siguiente a su transformación:

translate(<minX+maxX>,0) scale(-1, 1)   // for flip X
translate(0,<minY+maxY>) scale(1, -1)   // for flip Y

o si tienes el centro puedes usar

translate(<2 * centreX>,0) scale(-1, 1)   // for flip X

Entonces en tu ejemplo:

<rect x="75" y="75" width="50" height="50"  transform="translate(-100, -100) scale(2, 2) scale(1, 1) rotate(45, 100, 100)" />

El minX + maxX llega a 200. Por lo tanto, para voltear horizontalmente, precedemos:

translate(200,0) scale(-1, 1)

Entonces el objeto final se convierte en:

<rect x="75" y="75" width="50" height="50"  transform="translate(200,0) scale(-1, 1) translate(-100, -100) scale(2, 2) scale(1, 1) rotate(45, 100, 100)" />

Demo aquí