Beispiel:SVG-Filter-01-Blend-2.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:Grundlayout.css">
 <style>
   svg {
     width: 96%;
     padding:0;
     margin:0;
     background: white;
   }
 </style>
 <title>Beispiel: feBlend</title>

</head>

<body>

SVG-Filter feBlend

<svg viewBox="0 0 880 500" > <defs>

<filter id="Blend" x 

   filterUnits="userSpaceOnUse"
   x="0" y="0" width="600" height="450">
 <feImage id="fi1" xlink:href="//wiki.selfhtml.org/images/a/a6/Lauf-1.jpg"
   x="0" y="0" width="450" height="450" result="out1" />
 <feImage id="fi2" xlink:href="//wiki.selfhtml.org/images/4/48/Flugzeug.png"
   x="20" y="20" width="160" height="120" result="out2" />
 <feBlend id="fb" in="out1" in2="out2" mode="multiply">
   <animate attributeName="mode"
       values="normal;screen;darken;lighten"
       begin="1s"
       dur="9s"

repeatCount="indefinite" /> 

 </feBlend>

</filter>

</defs>

<rect x="100" y="100" width="450" height="450" filter="url(#Blend)"/>

</svg> </body> </html>

Abgerufen am 30.09.2025
von "http://wiki.selfhtml.org/wiki/Beispiel:SVG-Filter-01-Blend-2.html"