SVG significa Gráfico vectorial escalable. Se puede usar para hacer gráficos y animaciones como en el lienzo HTML.
El elemento <feBlend> se usa para combinar dos imágenes o fragmentos SVG en un solo gráfico. Ejecuta una combinación de píxeles de dos fragmentos o imágenes SVG de entrada.
Sintaxis:
<feBlend in="" in2="" mode=""/>
Atributos:
- in : identifica la entrada para la primitiva de filtro dada.
- in2 : identifica la segunda entrada para la primitiva de filtro dada. Toma los mismos valores que el atributo ‘in’.
- mode – Define el modo de fusión en la primitiva de filtro <feBlend>. Si no se especifica el modo , se ejecuta el valor normal .
Ejemplo 1:
<!DOCTYPE html> <html> <body> <svg width="200" height="200"> <defs> <filter id="spotlight"> <feFlood result="floodFill" x="0" y="0" width="100%" height="100%" flood-color="green" flood-opacity="1" /> <feBlend in="FillPaint" in2="floodFill" mode="multiply" /> </filter> </defs> <rect x="40" y="40" width="100" height="100" style="stroke: #000000; fill: lightgreen; filter: url(#spotlight);" /> <rect x="40" y="40" width="100" height="100" style="stroke: #000000; fill: green;" /> <g fill="#FFFFFF" stroke="black" font-size="10" font-family="Verdana"> <text x="50" y="90">GeeksForGeeks</text> </g> </svg> </body> </html>
Producción:
Ejemplo 2:
<!DOCTYPE html> <html> <body> <svg width="200" height="200"> <defs> <filter id="Screen"> <feBlend mode="screen" in2="BackgroundImage" in="SourceGraphic" /> </filter> </defs> <rect x="1" y="1" width="198" height="118" style="stroke: #000000; fill: black; filter: url(#Screen);" /> <circle cx="100" cy="60" r="55" stroke="black" stroke-width="3" fill="Lightgreen" /> <g fill="#FFFFFF" stroke="Green" font-size="10" c font-family="Verdana"> <text x="60" y="62">GeeksForGeeks</text> </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