170 lines
8.3 KiB
XML
170 lines
8.3 KiB
XML
<?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: feDisplacementMap.svg,v 1.1.1.1 2001-06-10 01:46:38 edburns%acm.org Exp $ -->
|
|
<!-- ========================================================================= -->
|
|
|
|
<?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" color-interpolation="linearRGB">
|
|
<stop offset="0" stop-color="rgb(255, 188, 188)" />
|
|
<stop offset=".25" stop-color="rgb(0, 188, 188)" />
|
|
<stop offset=".5" stop-color="rgb(255, 188, 188)" />
|
|
<stop offset="1" stop-color="rgb(0, 188, 188)" />
|
|
</linearGradient>
|
|
|
|
<radialGradient id="redAndGreenFill2" gradientUnits="objectBoundingBox" cx=".5" cy=".5" r="1" spreadMethod="reflect">
|
|
<stop offset="0" stop-color="rgb(255, 0, 188)" />
|
|
<stop offset="1" stop-color="rgb(0, 255, 188)" />
|
|
</radialGradient>
|
|
|
|
<linearGradient id="redAndGreenFill" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="0" color-interpolation="linearRGB">
|
|
<stop offset="0" stop-color="rgb(255, 0, 188)" />
|
|
<stop offset=".25" stop-color="rgb(0, 255, 188)" />
|
|
<stop offset=".5" stop-color="rgb(255, 0, 188)" />
|
|
<stop offset="1" stop-color="rgb(0, 255, 188)" />
|
|
</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>
|
|
|