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

All > SVG > Filters > filters-many-BE-01


File: filters-many-BE-01
Author: Jon Ferraiolo
Origin: W3C SVG conformance suite

Rendered imageSVG source
ElementsAttributes
axlink:href |
defs
descid |
feCompositein | in2 | k1 | k2 | k3 | k4 | operator | result |
feGaussianBlurin | result | stdDeviation |
feMerge
feMergeNodein |
feOffsetdx | dy | in | result |
fePointLightx | y | z |
feSpecularLightingin | result | specularConstant | specularExponent | style | surfaceScale |
filterfilterUnits | height | id | width | x | y |
gid | style |
pathd | style |
rectheight | id | style | width | x | y |
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-many-BE-01</title>
     <desc id="test-desc">Overall filter effects test case. Extracted from example filters00 in the March 3, 2000 spec.</desc>
     <g id="test-body-content">
          <g style="font-size:12;font-family:Verdana;">
               <text x="20" y="30">A single filter that uses a combination of filter primitives.</text>
               <text x="20" y="45">You should see a gray rectangle. Inside, there is an outer</text>
               <text x="20" y="60">ring and an inner button with "SVG" on it, both in red</text>
               <text x="20" y="75">with a 3D appearance and a lighting effect.</text>
          </g>
          <svg x="10" y="30" width="430" height="370" viewBox="0 0 200 120">
               <title>Example filters01.svg - introducing filter effects</title>
               <desc>An example which combines multiple filter primitives to produce a 3D lighting effect on a graphic consisting of the string "SVG" sitting on top of oval filled in red and surrounded by an oval outlined in red.</desc>
               <defs>
                    <filter id="MyFilter" filterUnits="userSpaceOnUse" x="0" y="0" width="450" height="450">
                         <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
                         <feOffset in="blur" dx="4" dy="4" result="offsetBlur"/>
                         <feSpecularLighting in="blur" surfaceScale="5" specularConstant=".75" specularExponent="20" style="lighting-color:white;" result="specOut">
                              <fePointLight x="-5000" y="-10000" z="20000"/>
                         </feSpecularLighting>
                         <feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/>
                         <feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="litPaint"/>
                         <feMerge>
                              <feMergeNode in="offsetBlur"/>
                              <feMergeNode in="litPaint"/>
                         </feMerge>
                    </filter>
               </defs>
               <rect x="1" y="1" width="198" height="118" style="fill:#888888;stroke:blue;"/>
               <g style="filter:url(#MyFilter);">
                    <g>
                         <path style="fill:none;stroke:#D90000;stroke-width:10;" d="M50,90 C0,90 0,30 50,30 L150,30 C200,30 200,90 150,90 z"/>
                         <path style="fill:#D90000;" d="M60,80 C30,80 30,40 60,40 L140,40 C170,40 170,80 140,80 z"/>
                         <g style="fill:#FFFFFF;stroke:black;font-size:45;font-family:Verdana;">
                              <text x="52" y="76">SVG</text>
                         </g>
                    </g>
               </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-many-BE-01</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: conference call service, VoIP Internettelefonie, DSL, SDSL, ADSL, answering service