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

All > SVG > Filters > filters-colorMtrx-BE-03


File: filters-colorMtrx-BE-03
Author: Jon Ferraiolo
Origin: W3C SVG conformance suite

Rendered imageSVG source
ElementsAttributes
axlink:href |
defs
descid |
feColorMatrixin | result | type | values |
feCompositein | in2 | operator |
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-colorMtrx-BE-03</title>
     <desc id="test-desc">Test which verifies the basic facilities of feColorMatrix.</desc>
     <g id="test-body-content">
          <svg x="25" y="98" width="400" height="252" viewBox="0 0 800 500">
               <title>Example feColorMatrix - Examples of feColorMatrix operations</title>
               <desc>Five rectangles filled with a gradient showing the effects of feColorMatrix: an unfiltered rectangle acting as a reference, use of the feColorMatrix matrix option to convert to grayscale, use of the feColorMatrix saturate option, use of the feColorMatrix hueRotate option, and use of the feColorMatrix luminanceToAlpha option.</desc>
               <defs>
                    <linearGradient id="MyGradient" gradientUnits="userSpaceOnUse" x1="100" y1="0" x2="500" y2="0">
                         <stop offset="0" style="stop-color:#dd00dd;"/>
                         <stop offset=".33" style="stop-color:#22cc22;"/>
                         <stop offset=".67" style="stop-color:#400000;"/>
                         <stop offset="1" style="stop-color:#a0a0ff;"/>
                    </linearGradient>
                    <filter id="Matrix" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">
                         <feColorMatrix type="matrix" in="SourceGraphic" values=".33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0"/>
                    </filter>
                    <filter id="Saturate40" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
                         <feColorMatrix type="saturate" in="SourceGraphic" values="25%"/>
                    </filter>
                    <filter id="HueRotate90" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
                         <feColorMatrix type="hueRotate" in="SourceGraphic" values="90"/>
                    </filter>
                    <filter id="LuminanceToAlpha" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
                         <feColorMatrix type="luminanceToAlpha" in="SourceGraphic" result="a"/>
                         <feComposite in="SourceGraphic" in2="a" operator="in"/>
                    </filter>
               </defs>
               <g style="font-size:25;font-family:Verdana;">
                    <rect style="fill:none;stroke:blue;" x="1" y="1" width="798" height="498"/>
                    <rect x="100" y="20" width="500" height="40" style="fill:url(#MyGradient);"/>
                    <text x="100" y="85">Unfiltered</text>
                    <rect x="100" y="120" width="500" height="40" style="fill:url(#MyGradient);filter:url(#Matrix);"/>
                    <text x="100" y="185">type="matrix" (grayscale matrix)</text>
                    <rect x="100" y="220" width="500" height="40" style="fill:url(#MyGradient);filter:url(#Saturate40);"/>
                    <text x="100" y="285">type="saturate" values=".4"</text>
                    <rect x="100" y="320" width="500" height="40" style="fill:url(#MyGradient);filter:url(#HueRotate90);"/>
                    <text x="100" y="385">type="hueRotate" values="90"</text>
                    <rect x="100" y="420" width="500" height="40" style="fill:url(#MyGradient);filter:url(#LuminanceToAlpha);"/>
                    <text x="100" y="485">type="luminanceToAlpha"</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-colorMtrx-BE-03</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