samples/tests/feDisplacementMap.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.                                                         -->
<!-- ========================================================================= -->

<!-- ========================================================================= -->
<!-- feDisplacementMap filter test                                             -->
<!--                                                                           -->
<!-- @author vincent.hardy@eng.sun.com                                         -->
<!-- @version $Id$     -->
<!-- ========================================================================= -->

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

<svg id="body" width="450" height="500" viewBox="0 0 450 500">
<title>Filter Effect: feDisplacementMap</title>
    <!-- ============================================================= -->
    <!-- Test content                                                  -->
    <!-- ============================================================= -->

    <g class="legend">
        <text x="225" y="50" class="title">
            Filter Effect: feDisplacementMap
        </text>

        <defs>
            <!-- ========================================== -->
            <!-- Pattern used to visualize the distorsions  -->
            <!-- created by displacement map.               -->
            <!-- ========================================== -->
            <pattern id="pattern" patternUnits="userSpaceOnUse" x="0" y="0"
                     width="20" height="20">
                <rect x="0" y="0" width="10" height="10" fill="red" />
                <rect x="10" y="10" width="10" height="10" fill="green" />
            </pattern>

            <!-- ========================================== -->
            <!-- Source for the displacement tests          -->
            <!-- ========================================== -->
            <rect id="displaced" x="0" y="0" width="100" height="100" fill="url(#pattern)" />

            <filter id="noOp" x="0" y="0" width="1" height="1">
                <feImage xlink:href="#displaced" result="displaced" />
            </filter>

            <!-- ========================================== -->
            <!-- Variations in the Red channel only         -->
            <!-- ========================================== -->
            <linearGradient id="redOnly" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="0">
                <stop offset="0" stop-color="rgb(255, 128, 128)" />
                <stop offset=".25" stop-color="rgb(0, 128, 128)" />
                <stop offset=".5" stop-color="rgb(255, 128, 128)" />
                <stop offset="1" stop-color="rgb(0, 128, 128)" />
            </linearGradient>

            <radialGradient id="redAndGreenFill2" gradientUnits="objectBoundingBox" cx=".5" cy=".5" r="1" spreadMethod="reflect">
                <stop offset="0" stop-color="rgb(255, 0, 128)" />
                <stop offset="1" stop-color="rgb(0, 255, 128)" />
            </radialGradient>

            <linearGradient id="redAndGreenFill" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="0">
                <stop offset="0" stop-color="rgb(255, 0, 128)" />
                <stop offset=".25" stop-color="rgb(0, 255, 128)" />
                <stop offset=".5" stop-color="rgb(255, 0, 128)" />
                <stop offset="1" stop-color="rgb(0, 255, 128)" />
            </linearGradient>

            <rect id="redOnlyMap" x="0" y="0" width="100" height="100" fill="url(#redOnly)" />

            <rect id="redAndGreenMap" x="0" y="0" width="100" height="100" fill="url(#redAndGreenFill)" />

            <filter id="xOnly" x="0" y="0" width="1" height="1">
                <feImage xlink:href="#redOnlyMap" result="map" />
                <feImage xlink:href="#displaced" result="displaced" />
                <feDisplacementMap in="displaced" in2="map" 
                                   scale="30" xChannelSelector="R" yChannelSelector="G" /> 
            </filter>

            <filter id="yOnly" x="0" y="0" width="1" height="1">
                <feImage xlink:href="#redOnlyMap" result="map" />
                <feImage xlink:href="#displaced" result="displaced" />
                <feDisplacementMap in="displaced" in2="map" 
                                   scale="30" xChannelSelector="G" yChannelSelector="R" /> 
            </filter>

            <filter id="xy" x="0" y="0" width="1" height="1">
                <feImage xlink:href="#redOnlyMap" result="map" />
                <feImage xlink:href="#displaced" result="displaced" />
                <feDisplacementMap in="displaced" in2="map" 
                                   scale="30" xChannelSelector="R" yChannelSelector="R" /> 
            </filter>

            <filter id="redAndGreen" x="0" y="0" width="1" height="1">
                <feImage xlink:href="#redAndGreenMap" result="map" />
                <feImage xlink:href="#displaced" result="displaced" />
                <feDisplacementMap in="displaced" in2="map" 
                                   scale="30" xChannelSelector="R" yChannelSelector="G" /> 
            </filter>



        </defs>

    
        <!-- ================================================== -->
        <!-- First, test different types of displacements       -->
        <!-- ================================================== -->

        <!-- ============================== -->
        <!-- Reference                      -->
        <!-- ============================== -->
        <g transform="translate(20, 100)">
            <rect x="0" y="0" width="100" height="100" filter="url(#noOp)"/>
            <rect x="0" y="0" width="100" height="100" stroke="black" fill="none"/>
            <text x="50" y="-3">Reference</text>
        </g>

        <!-- ============================== -->
        <!-- x-axis only                    -->
        <!-- ============================== -->
        <g transform="translate(150, 100)">
            <rect x="0" y="0" width="100" height="100" filter="url(#xOnly)"/>
            <rect x="0" y="0" width="100" height="100" stroke="black" fill="none"/>
            <text x="50" y="-3">x only</text>            
        </g>

        <!-- ============================== -->
        <!-- y-axis only                    -->
        <!-- ============================== -->
        <g transform="translate(280, 100)">
            <rect x="0" y="0" width="100" height="100" filter="url(#yOnly)"/>
            <rect x="0" y="0" width="100" height="100" stroke="black" fill="none"/>
            <text x="50" y="-3">y only</text>            
        </g>

        <!-- ============================== -->
        <!-- x and y                        -->
        <!-- ============================== -->
        <g transform="translate(20, 230)">
            <rect x="0" y="0" width="100" height="100" filter="url(#xy)"/>
            <rect x="0" y="0" width="100" height="100" stroke="black" fill="none"/>
            <text x="50" y="-3">x and y</text>            
        </g>

        <!-- ============================== -->
        <!-- Rend and Green                 -->
        <!-- ============================== -->
        <g transform="translate(150, 230)">
            <rect x="0" y="0" width="100" height="100" filter="url(#redAndGreen)"/>
            <rect x="0" y="0" width="100" height="100" stroke="black" fill="none"/>
            <text x="50" y="-3">x and y (different)</text>            
        </g>

    </g>

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