El atributo de transformación establece la lista de definiciones de transformación que se aplican a un elemento y sus hijos. En SVG 1.1, solo estos elementos pueden usar el atributo de transformación <a>, <circle>, <clipPath>, <defs>, <elipse>, <foreignObject>, <g>, <image>, <line>, < ruta>, <polígono>, <polilínea>, <rect>, <interruptor>, <texto> y <uso>.
Sintaxis:
transform = scale() | translate() | rotate() |
matrix() | skewX() | skewY()
Valores de atributo: el atributo de transformación acepta la función de transformación mencionada anteriormente y descrita a continuación.
- skewX(): Enumera una transformación sesgada a lo largo del eje x en un grado.
- skewY(): Enumera una transformación sesgada a lo largo del eje y en un grado.
- scale(): Enumera una operación de escala por x e y. Se supone que es igual a x si no se proporciona y.
- rotate(): Enumera una rotación de un grado sobre un punto dado.
- translate(): Mueve el objeto por x e y. Se supone que es 0 si no se proporciona y.
- matrix(): Enumera una transformación en forma de array de transformación de seis valores.
Ejemplo 1: a continuación se muestra el ejemplo que ilustra el uso del atributo de transformación mediante la función de transformación de rotate(), traducción(), sesgoX() y escala() .
HTML
<!DOCTYPE html> <html> <body> <h1 style="color:green; font-size:50px;"> GeeksforGeeks </h1> <svg viewBox="-25 0 450 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g fill="grey" transform="rotate(-10 50 100) translate(-36 45.5) skewX(40) scale(1 0.5)"> <path id="heart" d="M 10, 30 A 20, 20 0, 0, 1 50, 30 A 20, 20 0, 0, 1 90, 30 Q 90, 60 50, 90 Q 10, 60 10, 30 z" /> </g> <use xlink:href="#heart" f ill="none" stroke="green" /> </svg> </body> </html>
Producción:
Ejemplo 2: a continuación se muestra el ejemplo que ilustra el uso del atributo de transformación utilizando la función de transformación de escala .
HTML
<!DOCTYPE html> <html> <body> <h1 style="color:green; font-size:50px;"> GeeksforGeeks </h1> <svg viewBox="-60 -40 400 400" xmlns="http://www.w3.org/2000/svg"> <circle cx="0" cy="0" r="10" fill="green" transform="scale(4)" /> <circle cx="0" cy="0" r="10" fill="yellow" transform="scale(1, 4)" /> <circle cx="0" cy="0" r="10" fill="lightgreen" transform="scale(4, 1)" /> <circle cx="0" cy="0" r="10" fill="green" /> </svg> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por thacker_shahid y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA