samples/tests/feMerge.svg

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000802//EN"
"http://www.w3.org/TR/2000/CR-SVG-20000802/DTD/svg-20000802.dtd">

<!-- ========================================================================= -->
<!-- Copyright (C) The Apache Software Foundation. All rights reserved.        -->
<!--                                                                           -->
<!-- This software is published under the terms of the Apache Software License -->
<!-- version 1.1, a copy of which has been included with this distribution in  -->
<!-- the LICENSE file.                                                         -->
<!-- ========================================================================= -->

<!-- ========================================================================= -->
<!-- Test description here                                                     -->
<!--                                                                           -->
<!-- @author deweese@kodak.com                                                 -->
<!-- @version $Id $  -->
<!-- ========================================================================= -->

<?xml-stylesheet type="text/css" href="test.css" ?>

<svg id="body" width="450" height="500" viewBox="0 0 450 500">
<title>feMerge Test</title>

    <!-- ============================================================= -->
    <!-- Test content                                                  -->
    <!-- ============================================================= -->
    <g id="testContent">

      <text x="225" y="40" class="title">
    	feMerge Test
      </text>
  
      <g transform="translate(0, 50)">
      <defs>

       
       <circle id="Circle1" cx="40" cy="65" r="25" style="fill:yellowGreen" />
  
       <circle id="Circle2" cx="80" cy="55" r="25" style="fill:darkBlue" />
  
       <rect   id="Rect1"   x="40" y="35" width="30" height="70" 
	       style="fill:dodgerBlue" />
  
       <rect   id="Rect2"   x="60" y="15" width="30" height="70" 
	       rx="10" ry="10"
	       style="fill:Green" />

    	<filter id="Merge1" x="0" y="0" width="1" height="1">
	        <feImage xlink:href="#Circle1" result="Circle1" />
	        <feImage xlink:href="#Circle2" result="Circle2" />
	        <feImage xlink:href="#Rect1"   result="Rect1" />
	        <feImage xlink:href="#Rect2"   result="Rect2" />
    	    <feMerge>
	            <feMergeNode in="Circle1"/>
	            <feMergeNode in="Circle2"/>
	            <feMergeNode in="Rect1"/>
	            <feMergeNode in="Rect2"/>
	        </feMerge>
    	</filter>
  
    	<filter id="Merge2" x="0" y="0" width="1" height="1">
	  <feImage xlink:href="#Circle1" result="Circle1" />
	  <feImage xlink:href="#Circle2" result="Circle2" />
	  <feImage xlink:href="#Rect1"   result="Rect1" />
	  <feImage xlink:href="#Rect2"   result="Rect2" />

    	  <feMerge>
	    <feMergeNode in="Circle1"/>
	    <feMergeNode in="Rect1"/>
	    <feMergeNode in="Circle2"/>
	    <feMergeNode in="Rect2"/>
	  </feMerge>
    	</filter>
  
    	<filter id="Merge3" x="0" y="0" width="1" height="1">
	  <feImage xlink:href="#Circle1" result="Circle1" />
	  <feImage xlink:href="#Circle2" result="Circle2" />
	  <feImage xlink:href="#Rect1"   result="Rect1" />
	  <feImage xlink:href="#Rect2"   result="Rect2" />

    	  <feMerge>
	    <feMergeNode in="Circle1"/>
	    <feMergeNode in="Rect1"/>
	    <feMergeNode in="Rect2"/>
	    <feMergeNode in="Circle2"/>
	  </feMerge>
    	</filter>
  
    	<filter id="Merge4" x="0" y="0" width="1" height="1">
	  <feImage xlink:href="#Circle1" result="Circle1" />
	  <feImage xlink:href="#Circle2" result="Circle2" />
	  <feImage xlink:href="#Rect1"   result="Rect1" />
	  <feImage xlink:href="#Rect2"   result="Rect2" />

    	  <feMerge>
	    <feMergeNode in="Rect1"/>
	    <feMergeNode in="Rect2"/>
	    <feMergeNode in="Circle1"/>
	    <feMergeNode in="Circle2"/>
	  </feMerge>
    	</filter>
  
    	<filter id="Merge5" x="0" y="0" width="1" height="1">
	  <feImage xlink:href="#Circle1" result="Circle1" />
	  <feImage xlink:href="#Circle2" result="Circle2" />
	  <feImage xlink:href="#Rect1"   result="Rect1" />
	  <feImage xlink:href="#Rect2"   result="Rect2" />

    	  <feMerge>
	    <feMergeNode in="Rect1"/>
	    <feMergeNode in="Circle1"/>
	    <feMergeNode in="Rect2"/>
	    <feMergeNode in="Circle2"/>
	  </feMerge>
    	</filter>
  
    	<filter id="Merge6" x="0" y="0" width="1" height="1">
	  <feImage xlink:href="#Circle1" result="Circle1" />
	  <feImage xlink:href="#Circle2" result="Circle2" />
	  <feImage xlink:href="#Rect1"   result="Rect1" />
	  <feImage xlink:href="#Rect2"   result="Rect2" />

    	  <feMerge>
	    <feMergeNode in="Rect2"/>
	    <feMergeNode in="Circle2"/>
	    <feMergeNode in="Rect1"/>
	    <feMergeNode in="Circle1"/>
	  </feMerge>
    	</filter>
  
      </defs>
  
      <g transform="translate(0 40)" class="legend">

        <!-- ============================================== -->
        <!-- Composite_1_*                                  -->
        <!-- ============================================== -->
        <g transform="translate(0 20)" class="row1" >
    	  <g id="c1" transform="translate(20 0)">
              <rect x="0" y="0" width="120" height="120" style="fill:WhiteSmoke"/>
    	      <rect x="0" y="0" width="120" height="120" 
    	            style="fill:FireBrick;  filter:url(#Merge1)"/>
      
              <g transform="translate(60, 130)">
               <text x="0" y="0" style="text-anchor:middle">
	        lt green/blue/lt blue/green
               </text>
             </g>
    	  </g>
             
    	  <g id="c2" transform="translate(160 0)">
              <rect x="0" y="0" width="120" height="120" style="fill:WhiteSmoke"/>
    	      <rect x="0" y="0" width="120" height="120" 
    	       style="fill:FireBrick;  filter:url(#Merge2)" />
              <g transform="translate(60, 130)">
               <text x="0" y="0" style="text-anchor:middle">
                lt green/lt blue/blue/green
               </text>
             </g>
    	  </g>
  
  
    	  <g id="c2" transform="translate(300 0)">
              <rect x="0" y="0" width="120" height="120" style="fill:WhiteSmoke"/>
    	      <rect x="0" y="0" width="120" height="120" 
    	       style="fill:FireBrick;  filter:url(#Merge3)" />
              <g transform="translate(60, 130)">
               <text x="0" y="0" style="text-anchor:middle">
                lt green/lt blue/green/blue
               </text>
             </g>
    	  </g>
    	</g>

        <!-- ============================================== -->
        <!-- Composite_2_*                                  -->
        <!-- ============================================== -->
        <g transform="translate(0 160)" class="row2" >
    	  <g id="c1" transform="translate(20 0)">
              <rect x="0" y="0" width="120" height="120" style="fill:WhiteSmoke"/>
    	      <rect x="0" y="0" width="120" height="120" 
    	       style="fill:FireBrick;  filter:url(#Merge4)"/>
              <g transform="translate(60, 130)">
               <text x="0" y="0" style="text-anchor:middle">
                lt blue/green/lt green/blue
               </text>
             </g>
    	  </g>

    	  <g id="c1" transform="translate(160 0)">
              <rect x="0" y="0" width="120" height="120" style="fill:WhiteSmoke"/>
    	      <rect x="0" y="0" width="120" height="120" 
    	       style="fill:FireBrick;  filter:url(#Merge5)"/>
              <g transform="translate(60, 130)">
               <text x="0" y="0" style="text-anchor:middle">
                lt blue/lt green/green/blue
               </text>
             </g>
    	  </g>

    	  <g id="c1" transform="translate(300 0)">
              <rect x="0" y="0" width="120" height="120" style="fill:WhiteSmoke"/>
    	      <rect x="0" y="0" width="120" height="120" 
    	       style="fill:FireBrick;  filter:url(#Merge6)"/>
              <g transform="translate(60, 130)">
               <text x="0" y="0" style="text-anchor:middle">
                green/blue/lt blue/lt green
               </text>
             </g>
    	  </g>
      
    	</g>

      </g>
      </g>
    </g>

    <!-- ============================================================= -->
    <!-- Batik sample mark                                             -->
    <!-- ============================================================= -->
    <use xlink:href="../batikLogo.svg#Batik_Tag_Box" />
    
</svg>