SVG <feImage> Elemento – Barcelona Geeks

SVG significa Gráfico vectorial escalable. Se puede usar para hacer gráficos y animaciones como en el lienzo HTML. La primitiva de filtro SVG <feImage> obtiene datos de imagen de una fuente externa y proporciona los datos de píxeles como salida.

Sintaxis:

<feImage x="" y="" width="" height="" externalResourcesRequired ="" 
preserveAspectRatio="" xlink: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.
ancho: el ancho del objeto extranjero.
altura: La altura del objeto extraño.
externalResourcesRequired: Indica si los recursos externos son requeridos en el documento actual. El valor predeterminado es falso.
preserveAspectRatio: indica cómo un elemento con un viewBox que proporciona una relación de aspecto determinada debe encajar en una ventana gráfica con una relación de aspecto diferente.
xlink:href: Define una referencia a un recurso como IRI de referencia.
crossorigin: Le dice a la solicitud del navegador de un archivo de imagen con permisos de origen cruzado.

Ejemplo 1:

HTML

<!DOCTYPE html>
<html>
  
<body>
    <svg width="250" height="250">
        <defs>
            <filter id="id_1">
                <feImage xlink:href=
"https://media.geeksforgeeks.org/wp-content/
uploads/20201106171852/Untitled189-2.png" />
            </filter>
        </defs>
  
        <g>
            <rect x="1" y="1" width="300" 
                height="200" fill="green" 
                stroke="green" />
  
            <rect x="50" y="25" width="150" 
                height="150" 
                filter="url(#id_1)" />
        </g>
    </svg>
</body>
  
</html>

Producción:

Ejemplo 2:

HTML

<!DOCTYPE html>
<html>
  
<body>
    <svg width="250" height="250">
        <rect id="Img" width="100%" height="80%" 
            stroke="black" fill="gold" />
  
        <filter id="id_2" 
            primitiveUnits="objectBoundingBox">
              
            <feImage xlink:href="#Img" x="25%" 
                y="30%" width="50%" height="50%" 
                result="waves" />
  
            <feComposite operator="atop" 
                in="waves" in2="SourceAlpha" />
        </filter>
  
        <g>
            <rect x="1" y="1" width="300" 
                height="200" fill="red" 
                stroke="blue" />
  
            <rect x="50" y="25" width="150" 
                height="150" 
                filter="url(#id_2)" />
        </g>
    </svg>
</body>
  
</html>

Producción:

Ejemplo 3:

HTML

<!DOCTYPE html>
<html>
  
<body>
    <svg width="500" height="500">
  
        <filter id="id_3" 
            primitiveUnits="objectBoundingBox">
          
            <feImage xlink:href=
"https://media.geeksforgeeks.org/wp-content/
uploads/20201106171852/Untitled189-2.png" 
                x="0" y="0" width="100%" 
                height="100%" 
                preserveAspectRatio="xAlignYAlign"
                result="waves" />
  
            <feComposite operator="atop" 
                in="waves" in2="SourceImage" />
        </filter>
  
        <g>
            <ellipse cx="200" cy="150" 
                rx="180" ry="100" fill="gold" 
                stroke="#ff0000" />
  
            <ellipse cx="200" cy="150" rx="75"
                ry="75" fill="black" 
                filter="url(#id_3)" />
        </g>
    </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

HTML

HTML

HTML

Deja una respuesta Cancelar la respuesta