Beispiel:SVG-Filter-04.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche 
<!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:SELFHTML-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="wolke">
    <path stroke="blue" stroke-with="1" fill="skyblue"
	      d="m40,40 c0,0 20,-50 30,0 0,0 10,-40 40,0 0,0 40,-50 30,30 20,20 -0,30 -30,20 0,0 -20,50 -30,0 0,0 -30,50 -40,-20 0,0 -45,-30 0,-30" />
  </symbol>
  
  <symbol id="doppeldecker">
    <rect width="200" height="200" stroke="black" stroke-width="1" fill="none"/>
    <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 x="0" y="0" width="200" height="200" href="//wiki.selfhtml.org/images/c/c8/Wolke.png" result="img" />
    <feComposite operator="over" in="SourceGraphic" in2="img" />
  </filter>

  <filter id="compIn" x="0" y="0" width="200" height="200" filterUnits="userSpaceOnUse">
    <feImage x="0" y="0" width="200" height="200" href="//wiki.selfhtml.org/images/c/c8/Wolke.png" result="img" />
    <feComposite operator="in" in="SourceGraphic" in2="img" />
  </filter>
  
  <filter id="compOut" x="0" y="0" width="200" height="200" filterUnits="userSpaceOnUse">
    <feImage x="0" y="0" width="200" height="200" href="//wiki.selfhtml.org/images/c/c8/Wolke.png" result="img" />
    <feComposite operator="out" in="SourceGraphic" in2="img" />
  </filter>

  <filter id="compAtop" x="0" y="0" width="200" height="200" filterUnits="userSpaceOnUse">
    <feImage x="0" y="0" width="200" height="200" href="//wiki.selfhtml.org/images/c/c8/Wolke.png" result="img" />
    <feComposite operator="atop" in="SourceGraphic" in2="img" />
  </filter>
  
  <filter id="compXor" x="0" y="0" width="200" height="200" filterUnits="userSpaceOnUse">
    <feImage x="0" y="0" width="200" height="200" href="//wiki.selfhtml.org/images/c/c8/Wolke.png" result="img" />
    <feComposite operator="xor" in="SourceGraphic" in2="img" />	
  </filter>
  
  <filter id="compArith" x="0" y="0" width="200" height="200" filterUnits="userSpaceOnUse">
    <feImage x="0" y="0" width="200" height="200" href="//wiki.selfhtml.org/images/c/c8/Wolke.png" result="img" />
    <feComposite operator="arithmetic" in="SourceGraphic" in2="img" k1="0" k2=".5" k3=".7" k4="0" />
  </filter>

</defs>

<text x="20" y="20">operator="over"</text>
<use href="#doppeldecker" transform="translate(10,50)" filter="url(#compOver)" />
<text x="270" y="20">operator="in"</text>
<use href="#doppeldecker" transform="translate(260,50)" filter="url(#compIn)" />
<text x="520" y="20">operator="out"</text>
<use href="#doppeldecker" transform="translate(510,50)" filter="url(#compOut)" />
<text x="20" y="275">operator="atop"</text>
<use href="#doppeldecker" transform="translate(10,280)" filter="url(#compAtop)" />
<text x="270" y="275">operator="xor"</text>
<use href="#doppeldecker" transform="translate(260,280)" filter="url(#compXor)" /> 
<text x="520" y="275">operator="arith" k1="0" k2=".5" k3=".7" k4="0"</text>
<use href="#doppeldecker" transform="translate(510,280)" filter="url(#compArith)" /> 
</svg>

</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:SVG-Filter-04.html&oldid=86793“