ZVON > References > Zvon Example Repository
Example repository: index | categories | search

All > SVG > Filters > filters-transfer-BE-04


File: filters-transfer-BE-04
Author: Jon Ferraiolo
Origin: W3C SVG conformance suite

Rendered imageSVG source
ElementsAttributes
axlink:href |
defs
descid |
feComponentTransfer
feFuncAtype |
feFuncBamplitude | exponent | intercept | offset | slope | tableValues | type |
feFuncGamplitude | exponent | intercept | offset | slope | tableValues | type |
feFuncRamplitude | exponent | intercept | offset | slope | tableValues | type |
filterfilterUnits | height | id | width | x | y |
gid | style |
linearGradientgradientUnits | id | x1 | x2 | y1 | y2 |
pathd | style |
rectheight | id | style | width | x | y |
stopoffset | style |
svgheight | id | viewBox | width | x | y |
textstyle | x | y |
titleid |

Source

<svg id="svg-root" width="450" height="450" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" >
     <title id="test-title">filters-transfer-BE-04</title>
     <desc id="test-desc">Test which verifies the basic facilities of feComponentTransfer.</desc>
     <g id="test-body-content">
          <svg x="25" y="125" width="400" height="200" viewBox="0 0 800 400">
               <title>Example feComponentTransfer - Examples of feComponentTransfer operations</title>
               <desc>Four rectangles filled with a gradient 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" style="stop-color:#ff0000;"/>
                         <stop offset=".33" style="stop-color:#00ff00;"/>
                         <stop offset=".67" style="stop-color:#0000ff;"/>
                         <stop offset="1" style="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 style="fill:none;stroke:blue;" x="1" y="1" width="798" height="398"/>
               <g style="font-size:25;font-family:Verdana;">
                    <rect style="fill:none;stroke:blue;" x="1" y="1" width="798" height="398"/>
                    <rect x="100" y="20" width="500" height="40" style="fill:url(#MyGradient);filter:url(#Identity);"/>
                    <text x="100" y="85">type="identity"</text>
                    <rect x="100" y="120" width="500" height="40" style="fill:url(#MyGradient);filter:url(#Table);"/>
                    <text x="100" y="185">type="table"</text>
                    <rect x="100" y="220" width="500" height="40" style="fill:url(#MyGradient);filter:url(#Linear);"/>
                    <text x="100" y="285">type="linear" slope=".5" intercepts:.25/0/.5</text>
                    <rect x="100" y="320" width="500" height="40" style="fill:url(#MyGradient);filter:url(#Gamma);"/>
                    <text x="100" y="385">type="gamma" amplitude="2" exponents:5/3/1</text>
               </g>
          </svg>
     </g>
     <g id="test-legend" style="fill:black;font-family:Helvetica;font-size:10;">
          <rect x="10" y="390" width="275" height="50" style="fill:none;stroke:#000000;"/>
          <path style="fill:none;stroke:#000000;" d="M10 405 h275 M205 405 v35 M10 426 h195 M205 422 h80"/>
          <text x="25" y="401">Scalable Vector Graphics (SVG) Conformance Suite</text>
          <a xlink:href="copyright-documents-19990405.html">
               <text x="12" y="437" style="fill:blue;">Copyright 2000 W3C. All Rights Reserved.</text>
          </a>
          <text style="font-size:12;" x="35" y="420">filters-transfer-BE-04</text>
          <text style="font-size:10;" x="210" y="417">$Revision: 1.1 $</text>
          <text style="font-size:10;" x="210" y="435">Release 2.0</text>
          <rect id="test-frame" x="1" y="1" width="448" height="448" style="fill:none;stroke:#000000;"/>
     </g>
</svg>



Sponsored links: Domain Names, VoIP Internettelefonie, DSL, SDSL, ADSL, UNLIMITED Web Hosting by HostDepartment, conference call service, answering service