El atributo patternUnits especifica qué sistema de coordenadas se debe usar para las propiedades de geometría del elemento <pattern> . Solo el elemento <patrón> está usando este atributo.
Sintaxis:
patternUnits = userSpaceOnUse | objectBoundingBox
Valores de atributo: el atributo patternUnits acepta los valores mencionados anteriormente y descritos a continuación:
- userSpaceOnUse: muestra que cuando se aplicó el patrón, todas las coordenadas para las propiedades de la geometría se refieren al sistema de coordenadas del usuario.
- objectBoundingBox: Muestra que todas las coordenadas para las propiedades de la geometría representan porcentajes o fracciones del cuadro delimitador del elemento.
Los siguientes ejemplos ilustran el uso del atributo patternUnits .
Ejemplo 1:
HTML
<!DOCTYPE html> <html> <body> <h2 style="color: green; margin-left: 25px;"> GeeksforGeeks </h2> <svg viewBox="0 0 600 100" xmlns="http://www.w3.org/2000/svg"> <pattern id="geek1" x="-5" fill="green" y="8.5" width="20" height="25" patternUnits="userSpaceOnUse"> <circle cx="10" cy="10" r="8" /> </pattern> <rect x="10" y="0" width="100" height="100" fill="url(#geek1)" /> </svg> </body> </html>
Producción:
Ejemplo 2:
HTML
<!DOCTYPE html> <html> <body> <h2 style="color: green; margin-left: 25px;"> GeeksforGeeks </h2> <svg viewBox="0 0 600 100" xmlns="http://www.w3.org/2000/svg"> <pattern id="geek2" x=".125" y=".125" width=".175" height=".175" fill="green" patternUnits="objectBoundingBox"> <circle cx="10" cy="10" r="8" /> </pattern> <rect x="10" y="0" width="100" height="100" fill="url(#geek2)" /> </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