LayoutTests/svg/filters/feComposite.svg

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="400" height="400" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="over" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">
    <feFlood flood-color="#f00" flood-opacity="0.5" result="res1" x="0%" y="0%" width="75%" height="75%"/>
    <feFlood flood-color="#00f" flood-opacity="0.5" result="res2" x="25%" y="25%" width="75%" height="75%"/>
    <feComposite in2="res1" in="res2" operator="over"/>
</filter>
<filter id="in" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">
    <feFlood flood-color="#f00" flood-opacity="0.5" result="res1" x="0%" y="0%" width="75%" height="75%"/>
    <feFlood flood-color="#00f" flood-opacity="0.5" result="res2" x="25%" y="25%" width="75%" height="75%"/>
    <feComposite in2="res1" in="res2" operator="in"/>
</filter>
<filter id="out" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">
    <feFlood flood-color="#f00" flood-opacity="0.5" result="res1" x="0%" y="0%" width="75%" height="75%"/>
    <feFlood flood-color="#00f" flood-opacity="0.5" result="res2" x="25%" y="25%" width="75%" height="75%"/>
    <feComposite in2="res1" in="res2" operator="out"/>
</filter>
<filter id="atop" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">
    <feFlood flood-color="#f00" flood-opacity="0.5" result="res1" x="0%" y="0%" width="75%" height="75%"/>
    <feFlood flood-color="#00f" flood-opacity="0.5" result="res2" x="25%" y="25%" width="75%" height="75%"/>
    <feComposite in2="res1" in="res2" operator="atop"/>
</filter>
<filter id="xor" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">
    <feFlood flood-color="#f00" flood-opacity="0.5" result="res1" x="0%" y="0%" width="75%" height="75%"/>
    <feFlood flood-color="#00f" flood-opacity="0.5" result="res2" x="25%" y="25%" width="75%" height="75%"/>
    <feComposite in2="res1" in="res2" operator="xor"/>
</filter>
<filter id="arithmetic" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">
    <feFlood flood-color="#f00" flood-opacity="0.2" result="res1" x="0%" y="0%" width="75%" height="75%"/>
    <feFlood flood-color="#00f" flood-opacity="0.5" result="res2" x="25%" y="25%" width="75%" height="75%"/>
    <feComposite in2="res1" in="res2" operator="arithmetic" k1=".5" k2=".5" k3=".5" k4=".5"/>
</filter>
</defs>
<rect x="10" y="10" width="50" height="50" filter="url(#over)"/>
<text x="10" y="90">over</text>
<rect x="70" y="10" width="50" height="50" filter="url(#in)"/>
<text x="70" y="90">in</text>
<rect x="130" y="10" width="50" height="50" filter="url(#out)"/>
<text x="130" y="90">out</text>
<rect x="10" y="110" width="50" height="50" filter="url(#atop)"/>
<text x="10" y="190">atop</text>
<rect x="70" y="110" width="50" height="50" filter="url(#xor)"/>
<text x="70" y="190">xor</text>
<rect x="130" y="110" width="50" height="50" filter="url(#arithmetic)"/>
<text x="130" y="190">arithmetic</text>
</svg>