Beispiel:SVG-Filter-04.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" media="screen" href="./Beispiel:Grundlayout.css">
<style>
svg {
width: 96%;
padding:0;
margin:0;
background: white;
}
text {
font-size: 14px;
}
</style>
<title>Beispiel: feComposite</title>
</head>
<body>
<h1>SVG-Filter feComposite</h1>
<svg viewBox="0 0 880 500">
<defs>
<symbol id="doppeldecker" viewBox="0 0 200 200" width="200" height="200">
<path id="tragflaecheUnten" stroke="black" stroke-with="0.5" fill="red" d="m37,120 c-10,-20 55,-30 55,-40 0,0 45,-40 45,-30 15,15 -96,90 -100,70" />
<path stroke="black" stroke-with="0.5" fill="red" d="m25,33 c-3,-30 21,-35 22,-3 30,5 15,-30 0,0 0,0 95,60 70,70 -30,25 -58,-40 -85,-60 -35,30 -35,-10 -7,-8" />
<path id="tragflaecheOben" stroke="black" stroke-with="0.5" fill="red" d="m20,85 c-10,-10 110,-70 105,-55 10,10 -105,75 -105,55" />
<path id="propeller" stroke="black" stroke-with="0.5" fill="black" d="m120,95 c5,-30 25,-30 0,0 -25,30 -5,30 0,0" />
<path id="streben" stroke="black" stroke-with="0.5" fill="none" d="m30,88 l15,15 c0,0 -5,-20 0,-20 m70,-40 l10,10 l-5,-14 m-40,68 l2,5 1-7" />
<circle cx="85" cy="115" r="4" fill="white" stroke="black" stroke-width="6" />
</symbol>
<filter id="compOver" x="0" y="0" width="200" height="200" filterUnits="userSpaceOnUse">
<feImage href="/images/1/1c/Cloud.svg" result="img" />
<feComposite operator="over" in="SourceGraphic" in2="img" />
</filter>
<filter id="compIn" x="0" y="0" width="200" height="200" filterUnits="userSpaceOnUse">
<feImage href="/images/1/1c/Cloud.svg" result="img" />
<feComposite operator="in" in="SourceGraphic" in2="img" />
</filter>
<filter id="compOut" x="0" y="0" width="200" height="200" filterUnits="userSpaceOnUse">
<feImage href="/images/1/1c/Cloud.svg" result="img" />
<feComposite operator="out" in="SourceGraphic" in2="img" />
</filter>
<filter id="compAtop" x="0" y="0" width="200" height="200" filterUnits="userSpaceOnUse">
<feImage href="/images/1/1c/Cloud.svg" result="img" />
<feComposite operator="atop" in="SourceGraphic" in2="img" />
</filter>
<filter id="compXor" x="0" y="0" width="200" height="200" filterUnits="userSpaceOnUse">
<feImage href="/images/1/1c/Cloud.svg" result="img" />
<feComposite operator="xor" in="SourceGraphic" in2="img" />
</filter>
<filter id="compArith" x="0" y="0" width="200" height="200" filterUnits="userSpaceOnUse">
<feImage href="/images/1/1c/Cloud.svg" result="img" />
<feComposite operator="arithmetic" in="SourceGraphic" in2="img" k1="0" k2=".5" k3=".7" k4="0" />
</filter>
</defs>
<!-- Beispiele als Gruppe an die gewünschte Stelle schieben. Für die Filter sind die damit auf (0,0),
was die Definition der Filterregion einfacher macht. objectBoundingBox als filterUnits funktioniert
nicht, weil ein mit use geholte Symbol immer nur so groß wie sein Inhalt ist. -->
<g transform="translate(10,10)">
<rect x="0" y="0" width="200" height="200" fill="none" stroke="black" />
<use href="#doppeldecker" filter="url(#compOver)"/>
<text x="5" y="194">operator="over"</text>
</g>
<g transform="translate(260,10)">
<rect x="0" y="0" width="200" height="200" fill="none" stroke="black" />
<use href="#doppeldecker" filter="url(#compIn)" />
<text x="5" y="194">operator="in"</text>
</g>
<g transform="translate(510,10)">
<rect x="0" y="0" width="200" height="200" fill="none" stroke="black" />
<use href="#doppeldecker" filter="url(#compOut)" />
<text x="5" y="194">operator="out"</text>
</g>
<g transform="translate(10,230)">
<rect x="0" y="0" width="200" height="200" fill="none" stroke="black" />
<use href="#doppeldecker" filter="url(#compAtop)" />
<text x="5" y="194">operator="atop"</text>
</g>
<g transform="translate(260,230)">
<rect x="0" y="0" width="200" height="200" fill="none" stroke="black" />
<use href="#doppeldecker" filter="url(#compXor)" />
<text x="5" y="194">operator="xor"</text>
</g>
<g transform="translate(510,230)">
<rect x="0" y="0" width="200" height="200" fill="none" stroke="black" />
<use href="#doppeldecker" filter="url(#compArith)" />
<text x="5" y="176">operator="arithmetic"</text>
<text x="5" y="194">k1="0" k2=".5" k3=".7" k4="0"</text>
</g>
</svg>
</body>
</html>
