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

All > SVG > Filters > filters-morph-BE-10


File: filters-morph-BE-10
Author: Jon Ferraiolo
Origin: W3C SVG conformance suite

Rendered imageSVG source
ElementsAttributes
axlink:href |
defs
descid |
feMorphologyoperator | radius |
filterfilterUnits | height | id | width | x | y |
gid | style | transform |
pathd | style |
rectheight | id | style | width | x | y |
svgheight | id | width |
textstyle | x | y |
titleid |
usestyle | x | xlink:href | y |

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-morph-BE-10</title>
     <desc id="test-desc">Test which verifies the basic facilities of feMorphology.</desc>
     <g id="test-body-content">
          <text x="225" y="30" style="text-anchor:middle;font-size:16pt;">Filter Effect: feMorphology</text>
          <g transform="translate(0, 30)">
               <defs>
                    <filter id="erode1" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">
                         <feMorphology operator="erode" radius="1"/>
                    </filter>
                    <filter id="erode2" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">
                         <feMorphology operator="erode" radius="2"/>
                    </filter>
                    <filter id="dilate1" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">
                         <feMorphology operator="dilate" radius="1"/>
                    </filter>
                    <filter id="dilate2" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">
                         <feMorphology operator="dilate" radius="3"/>
                    </filter>
                    <g id="morphologySource">
                         <g style="fill-rule:nonzero;clip-rule:nonzero;stroke:#000000;stroke-miterlimit:4;">
                              <g>
                                   <path style="fill:#FFFFFF;stroke:#6666FF;stroke-width:7.1711;" d="M81.403,78.289H3.585v-64.75h77.818v64.75z"/>
                                   <path style="fill:none;stroke:#00FF00;stroke-width:7.1711;" d="M93.261,77.536c0,23.285-18.581,42.163-41.503,42.163c-22.921,0-41.503-18.877-41.503-42.163c0-23.286,18.582-42.163,41.503-42.163c22.922,0,41.503,18.877,41.503,42.163z"/>
                                   <path style="fill:none;stroke:#FF0000;stroke-width:7.1711;" d="M98.31,28.445l13.288,27.354l29.714,4.385l-21.501,21.292l5.076,30.064L98.31,97.347l-26.577,14.194l5.076-30.064L55.307,60.184l29.714-4.385L98.31,28.445z"/>
                                   <path style="fill:none;stroke:#FFFF00;stroke-width:7.1711;" d="M131.563,26.338c0,28.559-22.79,51.709-50.901,51.709c-22.489,0-40.72-18.521-40.72-41.367c0-18.278,14.584-33.095,32.576-33.095c14.394,0,26.061,11.854,26.061,26.475 c0,11.698-9.334,21.181-20.849,21.181c-9.211,0-16.68-7.586-16.68-16.944c0-7.486,5.975-13.555,13.344-13.555c5.895,0,10.674,4.855,10.674,10.844c0,4.791-3.823,8.676-8.54,8.676c-3.773,0-6.832-3.107-6.832-6.941"/>
                              </g>
                         </g>
                    </g>
               </defs>
               <g style="text-anchor:middle;">
                    <g transform="translate(0, 0)">
                         <use xlink:href="#morphologySource" x="35" y="25" style="filter:url(#erode1);"/>
                         <text x="110" y="170">type=erode radius=1</text>
                    </g>
                    <g transform="translate(225, 0)">
                         <use xlink:href="#morphologySource" x="35" y="25" style="filter:url(#erode2);"/>
                         <text x="110" y="170">type=erode radius=2</text>
                    </g>
                    <g transform="translate(0, 160)">
                         <use xlink:href="#morphologySource" x="35" y="25" style="filter:url(#dilate1);"/>
                         <text x="110" y="170">type=dilate radius=1</text>
                    </g>
                    <g transform="translate(225, 160)">
                         <use xlink:href="#morphologySource" x="35" y="25" style="filter:url(#dilate2);"/>
                         <text x="110" y="170">type=dilate radius=3</text>
                    </g>
               </g>
          </g>
     </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-morph-BE-10</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: UNLIMITED Web Hosting by HostDepartment, conference call service, answering service, Alojamiento Web, Domain Names