SVG <escotilla> Elemento – Barcelona Geeks

SVG significa Gráfico vectorial escalable. Se puede usar para hacer gráficos y animaciones como en el lienzo HTML.

El elemento SVG <hatch> se usa para trazar un objeto. Utiliza una o más rutas predefinidas para llenar un objeto. Repite la ruta después de un intervalo fijo en una dirección específica para cubrir las áreas a pintar.

Sintaxis:

<hatch x="" y="" pitch="" rotate="" hatchUnits="" 
hatchContentUnits="" transform="" href="">

Atributos:

x – Define la coordenada del eje x en el sistema de coordenadas del usuario.
y – Define la coordenada del eje y en el sistema de coordenadas del usuario.
rotar: especifica cómo gira el elemento animado a medida que viaja a lo largo de una ruta especificada en un elemento <animateMotion>.
transform: define la lista de definiciones de transformación que se aplican a un elemento y a los elementos secundarios.
href – Define el enlace a un recurso como una URL de referencia.

Ejemplo 1:

<!DOCTYPE html>
<html>
  
<body>
    <svg viewBox="0 0 1100 400">
        <defs>
            <hatch id="hatch" 
                hatchUnits="userSpaceOnUse" 
                pitch="5" rotate="135">
  
                <hatchpath stroke="#a080ff" 
                    stroke-width="2" />
            </hatch>
        </defs>
  
        <foreignObject x="95" y="12" 
            width="160" height="160" 
            color="Green">
              
            <div>
                <br><br>GEEKSFORGEEKS<br><br>
            </div>
  
        </foreignObject>
        <rect fill="url(#hatch)" 
            stroke="Green" stroke-width="2" 
            x="5%" y="5%" width="20%" 
            height="20%" />
    </svg>
</body>
  
</html>

Producción:

Ejemplo 2:

<!DOCTYPE html>
<html>
      
<body>
    <svg viewBox="0 0 1100 400">
        <defs>
            <hatch id="hatch" 
                hatchUnits="userSpaceOnUse" 
                pitch="9" rotate="135">
  
                <hatchpath stroke="Green" 
                    stroke-width="12" />
            </hatch>
        </defs>
  
        <foreignObject x="110" y="12" 
            width="160" height="160" 
            color="Green">
              
            <div>
                <br><br>GeeksForGeeks<br><br>
            </div>
  
        </foreignObject>
        <ellipse vfill="url(#hatch)" 
            fill="None" stroke="green" 
            stroke-width="2" cx="164" 
            cy="58" rx="100" ry="50"
            fill />
    </svg>
</body>
  
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por epistler_999 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta