<svg width="8cm" height="4cm" viewBox="0 0 800 400" version="1.1"> <title>Example feComponentTransfer - Examples of feComponentTransfer operations</title> <desc>Four text strings showing the effects of feComponentTransfer: an identity function acting as a reference, use of the feComponentTransfer table option, use of the feComponentTransfer linear option, and use of the feComponentTransfer gamma option.</desc> <defs> <linearGradient id="MyGradient" gradientUnits="userSpaceOnUse" x1="100" y1="0" x2="600" y2="0"> <stop offset="0" stop-color="#ff0000"/> <stop offset=".33" stop-color="#00ff00"/> <stop offset=".67" stop-color="#0000ff"/> <stop offset="1" stop-color="#000000"/> </linearGradient> <filter id="Identity" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%"> <feComponentTransfer> <feFuncR type="identity"/> <feFuncG type="identity"/> <feFuncB type="identity"/> <feFuncA type="identity"/> </feComponentTransfer> </filter> <filter id="Table" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%"> <feComponentTransfer> <feFuncR type="table" tableValues="0 0 1 1"/> <feFuncG type="table" tableValues="1 1 0 0"/> <feFuncB type="table" tableValues="0 1 1 0"/> </feComponentTransfer> </filter> <filter id="Linear" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%"> <feComponentTransfer> <feFuncR type="linear" slope=".5" intercept=".25"/> <feFuncG type="linear" slope=".5" intercept="0"/> <feFuncB type="linear" slope=".5" intercept=".5"/> </feComponentTransfer> </filter> <filter id="Gamma" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%"> <feComponentTransfer> <feFuncR type="gamma" amplitude="2" exponent="5" offset="0"/> <feFuncG type="gamma" amplitude="2" exponent="3" offset="0"/> <feFuncB type="gamma" amplitude="2" exponent="1" offset="0"/> </feComponentTransfer> </filter> </defs> <rect fill="none" stroke="blue" x="1" y="1" width="798" height="398"/> <g font-family="Verdana" font-size="75" font-weight="bold" fill="url(#MyGradient)"> <rect x="100" y="0" width="600" height="20"/> <text x="100" y="90">Identity</text> <text x="100" y="190" filter="url(#Table)">TableLookup</text> <text x="100" y="290" filter="url(#Linear)">LinearFunc</text> <text x="100" y="390" filter="url(#Gamma)">GammaFunc</text> </g> </svg> |
Original SVG source |