<
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-composite-BE-05</
title>
<
desc id="test-desc">Test which verifies the basic facilities of feComposite.</
desc>
<
g id="test-body-content">
<
title>Example feComposite - Examples of feComposite operations</
title>
<
desc>Six pairs of overlapping triangles depicting the six different feComposite operators.</
desc>
<
defs>
<
path id="Blue100"
d="M 0 0 L 100 0 L 100 100 z"
style="
fill:#00ffff;"/>
<
path id="Red100"
d="M 0 0 L 0 100 L 100 0 z"
style="
fill:#ff00ff;"/>
<
path id="Blue50"
d="M 0 125 L 100 125 L 100 225 z"
style="
fill:#00ffff;
fill-opacity:.5;"/>
<
path id="Red50"
d="M 0 125 L 0 225 L 100 125 z"
style="
fill:#ff00ff;
fill-opacity:.5;"/>
<
filter id="over"
filterUnits="objectBoundingBox"
x="-5%"
y="-5%"
width="110%"
height="110%">
<
feFlood style="
flood-color:#ffffff;
flood-opacity:1;"
result="flood"/>
<
feComposite in="SourceGraphic"
in2="BackgroundImage"
operator="over"
result="comp"/>
<
feMerge>
<
feMergeNode in="flood"/>
<
feMergeNode in="comp"/>
</
feMerge>
</
filter>
<
filter id="in"
filterUnits="objectBoundingBox"
x="-5%"
y="-5%"
width="110%"
height="110%">
<
feFlood style="
flood-color:#ffffff;
flood-opacity:1;"
result="flood"/>
<
feComposite in="SourceGraphic"
in2="BackgroundImage"
operator="in"
result="comp"/>
<
feMerge>
<
feMergeNode in="flood"/>
<
feMergeNode in="comp"/>
</
feMerge>
</
filter>
<
filter id="out"
filterUnits="objectBoundingBox"
x="-5%"
y="-5%"
width="110%"
height="110%">
<
feFlood style="
flood-color:#ffffff;
flood-opacity:1;"
result="flood"/>
<
feComposite in="SourceGraphic"
in2="BackgroundImage"
operator="out"
result="comp"/>
<
feMerge>
<
feMergeNode in="flood"/>
<
feMergeNode in="comp"/>
</
feMerge>
</
filter>
<
filter id="atop"
filterUnits="objectBoundingBox"
x="-5%"
y="-5%"
width="110%"
height="110%">
<
feFlood style="
flood-color:#ffffff;
flood-opacity:1;"
result="flood"/>
<
feComposite in="SourceGraphic"
in2="BackgroundImage"
operator="atop"
result="comp"/>
<
feMerge>
<
feMergeNode in="flood"/>
<
feMergeNode in="comp"/>
</
feMerge>
</
filter>
<
filter id="xor"
filterUnits="objectBoundingBox"
x="-5%"
y="-5%"
width="110%"
height="110%">
<
feFlood style="
flood-color:#ffffff;
flood-opacity:1;"
result="flood"/>
<
feComposite in="SourceGraphic"
in2="BackgroundImage"
operator="xor"
result="comp"/>
<
feMerge>
<
feMergeNode in="flood"/>
<
feMergeNode in="comp"/>
</
feMerge>
</
filter>
<
filter id="arithmetic"
filterUnits="objectBoundingBox"
x="-5%"
y="-5%"
width="110%"
height="110%">
<
feFlood style="
flood-color:#ffffff;
flood-opacity:1;"
result="flood"/>
<
feComposite in="SourceGraphic"
in2="BackgroundImage"
result="comp"
operator="arithmetic"
k1=".5"
k2=".5"
k3=".5"
k4=".5"/>
<
feMerge>
<
feMergeNode in="flood"/>
<
feMergeNode in="comp"/>
</
feMerge>
</
filter>
</
defs>
<
g style="
font-family:Verdana;
font-size:40;
shape-rendering:crispEdges;"
transform="translate(5,150) scale(.4)">
<
rect style="
fill:none;
stroke:blue;"
x="1"
y="1"
width="1098"
height="323"/>
<
text x="15"
y="75">opacity 1.0</
text>
<
text x="15"
y="200">opacity 0.5</
text>
<
g transform="translate(275,25)"
style="
enable-background:new;">
<
use xlink:href="#Blue100"/>
<
use xlink:href="#Red100"
style="
filter:url(#over);"/>
</
g>
<
g transform="translate(275,25)"
style="
enable-background:new;">
<
use xlink:href="#Blue50"/>
<
use xlink:href="#Red50"
style="
filter:url(#over);"/>
<
text x="5"
y="275">over</
text>
</
g>
<
g transform="translate(400,25)"
style="
enable-background:new;">
<
use xlink:href="#Blue100"/>
<
use xlink:href="#Red100"
style="
filter:url(#in);"/>
</
g>
<
g transform="translate(400,25)"
style="
enable-background:new;">
<
use xlink:href="#Blue50"/>
<
use xlink:href="#Red50"
style="
filter:url(#in);"/>
<
text x="35"
y="275">in</
text>
</
g>
<
g transform="translate(525,25)"
style="
enable-background:new;">
<
use xlink:href="#Blue100"/>
<
use xlink:href="#Red100"
style="
filter:url(#out);"/>
</
g>
<
g transform="translate(525,25)"
style="
enable-background:new;">
<
use xlink:href="#Blue50"/>
<
use xlink:href="#Red50"
style="
filter:url(#out);"/>
<
text x="15"
y="275">out</
text>
</
g>
<
g transform="translate(650,25)"
style="
enable-background:new;">
<
use xlink:href="#Blue100"/>
<
use xlink:href="#Red100"
style="
filter:url(#atop);"/>
</
g>
<
g transform="translate(650,25)"
style="
enable-background:new;">
<
use xlink:href="#Blue50"/>
<
use xlink:href="#Red50"
style="
filter:url(#atop);"/>
<
text x="10"
y="275">atop</
text>
</
g>
<
g transform="translate(775,25)"
style="
enable-background:new;">
<
use xlink:href="#Blue100"/>
<
use xlink:href="#Red100"
style="
filter:url(#xor);"/>
</
g>
<
g transform="translate(775,25)"
style="
enable-background:new;">
<
use xlink:href="#Blue50"/>
<
use xlink:href="#Red50"
style="
filter:url(#xor);"/>
<
text x="15"
y="275">xor</
text>
</
g>
<
g transform="translate(900,25)"
style="
enable-background:new;">
<
use xlink:href="#Blue100"/>
<
use xlink:href="#Red100"
style="
filter:url(#arithmetic);"/>
</
g>
<
g transform="translate(900,25)"
style="
enable-background:new;">
<
use xlink:href="#Blue50"/>
<
use xlink:href="#Red50"
style="
filter:url(#arithmetic);"/>
<
text x="-25"
y="275">arithmetic</
text>
</
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-composite-BE-05</
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>
