El atributo patternTransform describe una lista de funciones de transformación que se aplican a un patrón.
Sintaxis:
patternTransform = "values"
Valores de atributo: el atributo patternTransform acepta valores que se describen a continuación:
- Array: La función de transformación mueve el objeto por x e y.
- Escala: la función de transformación de escala especifica una operación de escala por x e y.
- Rotar: la función de transformación de rotación especifica una rotación de un grado alrededor de un punto dado.
- SkewX: la función de transformación skewX especifica una transformación sesgada a lo largo del eje x en un grado.
- SkewY: La función de transformación skewY especifica una transformación sesgada a lo largo del eje y en un grado.
Los siguientes ejemplos ilustran el uso del atributo patternTransform .
Ejemplo 1:
HTML
<!DOCTYPE html> <html> <body> <h1 style="color: green;"> GeeksforGeeks </h1> <svg viewBox="-30 0 1200 1200" xmlns="http://www.w3.org/2000/svg"> <pattern id="geek" x="0" y="0" width="200" height="200" patternUnits="userSpaceOnUse" patternTransform="rotate(45) scale(0.2 0.2)"> <rect class="checker" fill="green" x="0" width="100" height="100" y="0"> </rect> <rect class="checker" fill="green" x="100" width="80" height="80" y="100"> </rect> </pattern> <rect x="0" y="0" width="18%" height="18%" fill="url(#geek)"> </rect> </svg> </body> </html>
Producción:
Ejemplo 2:
HTML
<!DOCTYPE html> <html> <body> <h1 style="color: green;"> GeeksforGeeks </h1> <svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg"> <pattern id="geeksforgeeks" height=".48" width=".18" fill="green" patternTransform="rotate(10)skewX(20) scale(2 2.5)"> <circle cx="5" r="5" cy="5" /> </pattern> <rect width="80" height="80" x="10" y="10" fill="url(#geeksforgeeks)" /> </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