- SVG significa Gráfico vectorial escalable. Se puede usar para hacer gráficos y animaciones como en el lienzo HTML.
- El elemento <feComponentTransfer> implementa manipulaciones de color en cada canal de color por separado.
- Los cuatro canales de color de este elemento son <feFuncR>, <feFuncG>, <feFuncB> y <feFuncA>.
- Al realizar manipulaciones de color, el elemento solo debe tener un elemento secundario de cada tipo.
Sintaxis:
<feComponentTransfer in=""> ---- </feComponentTransfer>
Atributos:
- in: almacena la entrada para la primitiva dada.
Ejemplo 1:
HTML
<html> <title>SVG Filter</title> <body> <svg width="640" height="550" viewBox="0 0 640 550"> <defs> <filter id="new" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%"> <feComponentTransfer> <feFuncA type="table" tableValues="0 0 1 1"/> <feFuncB type="table" tableValues="0 1 0 1"/> <feFuncG type="table" tableValues="1 1 0 0"/> <feFuncR type="table" tableValues="0 0 1 0"/> </feComponentTransfer> </filter> </defs> <image x="10" y="10" width="280" height="350" preserveAspectRatio="true" xlink:href="C:/Users/pc/Desktop/gfg/Capture25.png"/> <image x="310" y="10" width="280" height="350" preserveAspectRatio="true" filter="url(#new)" xlink:href="C:/Users/pc/Desktop/gfg/Capture25.png"/> </svg> </body> </html>
Producción :
Ejemplo 2:
HTML
<html> <title>SVG Filter</title> <body> <svg width="640" height="550" viewBox="0 0 640 550"> <defs> <filter id="new" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%"> <feComponentTransfer in="BackgroundImage" result="A"> <feFuncA type="discrete" tableValues="0 0 1 1"/> <feFuncB type="discrete" tableValues="0.0 0.6 0.1 0.0"/> <feFuncG type="discrete" tableValues="1 0.5 0.5 0.5"/> <feFuncR type="discrete" tableValues="0.5 1 1 1.0"/> </feComponentTransfer> </filter> </defs> <image x="10" y="10" width="280" height="350" preserveAspectRatio="true" xlink:href="C:/Users/pc/Desktop/gfg/Capture82.png"/> <image x="310" y="10" width="280" height="350" preserveAspectRatio="true" filter="url(#new)" xlink:href="C:/Users/pc/Desktop/gfg/Capture82.png"/> </svg> </body> </html>
Producción :
Ejemplo 3:
HTML
<html> <title>SVG Filter</title> <body> <svg width="640" height="550" viewBox="0 0 640 550"> <defs> <filter id="new" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%"> <feComponentTransfer in="BackgroundImage" result="A"> <feFuncA type="table" tableValues="0 0 1 1"/> <feFuncB type="discrete" tableValues="0 1 1 0"></feFuncB> <feFuncG type="gamma" amplitude="3" exponent="3" offset="0"></feFuncG> <feFuncR type="linear" slope="1.5" intercept="2"></feFuncR> </feComponentTransfer> </filter> </defs> <image x="10" y="10" width="280" height="350" preserveAspectRatio="true" xlink:href="C:/Users/pc/Desktop/gfg/Capture26.png"/> <image x="310" y="10" width="280" height="350" preserveAspectRatio="true" filter="url(#new)" xlink:href="C:/Users/pc/Desktop/gfg/Capture26.png"/> </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