El elemento Patrón SVG en HTML se utiliza para dibujar los diferentes diseños gráficos o patrones. Los patrones representan un objeto gráfico que se utiliza para volver a dibujar el mismo objeto repetidamente en intervalos de coordenadas x e y para cubrir un área.
Ventajas de usar Patrones SVG como fondo:
- Es fácil de implementar en el código y fácil de mantener.
- Son ligeros, fáciles de usar, especialmente para principiantes.
- Son escalables.
- Son personalizables usando CSS para crear una página web dinámica.
- Los patrones se pueden generar desde objetos gráficos básicos como rectángulos, círculos, polígonos hasta formas complejas. Por lo tanto, se está volviendo más popular entre los desarrolladores.
Recursos para herramientas de patrones SVG: hay muchas herramientas o recursos desde los que se pueden generar diferentes patrones y usarlos en el código. Estos son fáciles de usar y pueden ser útiles para crear fondos creativos como se desee.
Algunos atributos importantes de la etiqueta de patrón se dan a continuación:
Sintaxis:
<patrón id=”id-definido-por-usuario” x=”coordenada del eje x” y=”coordenada del eje y” width=”ancho-del-patrón” height=”altura-del-patrón ” patternUnits=”unidades para definir los atributos x,y, ancho y alto” xlink:href=”enlace a otro patrón” preserveAspectRatio=”preservar la relación de aspecto del contenido original” >
</pattern>
Ejemplo 1: En este ejemplo, el patrón se repite para crear todo el fondo. Dentro de la etiqueta del patrón, se asigna una identificación a la que se puede hacer referencia como la identificación del patrón. Puede ser útil ya que este patrón podría usarse fácilmente más adelante en el código haciendo referencia a esta identificación.
html
<!DOCTYPE html>
<html>
<head>
<style>
.patterns {
background-color: #2e4057;
margin: 1%;
height: 100vh;
}
</style>
</head>
<body>
<h3 style="color:green;text-align: center;">
GeeksforGeeks
</h3>
<div class="patterns">
<svg width="100%" height="100%">
<!-- Definition for the SVG -->
<defs>
<!-- Design of the pattern -->
<pattern id="b-design" x="0" y="0"
width="50" height="50"
patternUnits="userSpaceOnUse">
<circle fill="#bee9e7"
cx="0" cy="0" r="10" />
</pattern>
</defs>
<rect x="0" y="0" width="100%"
height="100%" fill="url(#b-design)" />
</svg>
</div>
</body>
</html>
Producción:
Ejemplo 2: En este ejemplo, el patrón se crea usando una ruta, que se especifica usando su atributo ‘id’. La altura, el ancho, el color de relleno, el color de fondo y otros parámetros se establecen después de definir el patrón.
html
<!DOCTYPE html>
<html>
<head>
<style>
.patterns {
background-color: #2e4057;
height: 100vh;
}
</style>
</head>
<body>
<h3 style="color:green;text-align: center;">
GeeksforGeeks
</h3>
<div class="patterns">
<svg width="100%" height="100%">
<defs>
<!-- Define the pattern -->
<pattern id="pie-design" x="0" y="0"
width="60" height="70"
patternUnits="userSpaceOnUse">
<!-- Use the path element
for the design -->
<path fill="#8cf790" d=
"M29 58.58l7.38-7.39A30.95 30.95 0 0
1 29 37.84a30.95 30.95 0 0 1-7.38 13.36l7.37
7.38zm1.4 1.41l.01.01h-2.84l-7.37-7.38A30.95
30.95 0 0 1 6.84 60H0v-1.02a28.9 28.9 0 0 0
18.79-7.78L0 32.41v-4.84L18.78 8.79A28.9
28.9 0 0 0 0 1.02V0h6.84a30.95 30.95 0
0 1 13.35 7.38L27.57 0h2.84l7.39 7.38A30.95
30.95 0 0 1 51.16 0H60v27.58-.01V60h-8.84a30.95
30.95 0 0 1-13.37-7.4L30.4 60zM29 1.41l-7.4
7.38A30.95 30.95 0 0 1 29 22.16 30.95 30.95
0 0 1 36.38 8.8L29 1.4zM58 1A28.9 28.9 0 0 0
39.2 8.8L58 27.58V1.02zm-20.2 9.2A28.9 28.9
0 0 0 30.02 29h26.56L37.8 10.21zM30.02
31a28.9 28.9 0 0 0 7.77 18.79l18.79-18.79H30.02zm9.18
20.2A28.9 28.9 0 0 0 58 59V32.4L39.2
51.19zm-19-1.4a28.9 28.9 0 0 0 7.78-18.8H1.41l18.8
18.8zm7.78-20.8A28.9 28.9 0 0 0 20.2 10.2L1.41
29h26.57z">
</path>
</pattern>
</defs>
<rect x="0" y="0" width="100%"
height="100%"
fill="url(#pie-design)" />
</svg>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por sahelibhattacharjee1 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA