Beispiel:SVG-text-filter-5.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="stylesheeet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css">  
 <style>

text { 

 font-size: 90px; 
 font-family:arial;
 font-weight: bold;

} body { background: #666; }

h1 {color:white;} 

 </style>
 <title>SVG-Texteffekte-14</title>

</head>

<body>

Texteffekte mit dem feSpecularLighting-Filter

<svg viewBox="0 0 880 300">
 <defs>
 <filter id="Licht" filterUnits="userSpaceOnUse">
   <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="schatten"/>

<feOffset in="schatten" dx="4" dy="4" result="Schlagschatten"/> <feSpecularLighting surfaceScale="5" specularConstant=".75" 

       specularExponent="20" lighting-color="white" in="schatten"
       result="beleuchtet">
     <fePointLight x="-500" y="-1000" z="2000"/>
   </feSpecularLighting>

<feComposite operator="in" in="beleuchtet" in2="SourceAlpha" result="beleuchtet2"/> <feComposite operator="arithmetic" in="SourceGraphic" in2="beleuchtet2" k1="0" k2="1" k3="1" k4="0" result="beleuchtet3"/> <feMerge> 

     <feMergeNode in="Schlagschatten"/>
     <feMergeNode in="beleuchtet3"/>
   </feMerge>
 </filter>

 <filter id="Licht2" filterUnits="userSpaceOnUse">
   <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="schatten"/>

<feOffset in="schatten" dx="4" dy="4" result="Schlagschatten"/> <feSpecularLighting surfaceScale="5" specularConstant=".75" 

       specularExponent="20" lighting-color="white" in="schatten"
       result="beleuchtet">
     <feDistantLight azimuth="-45" elevation="-45"/>
   </feSpecularLighting>

<feComposite operator="in" in="beleuchtet" in2="SourceAlpha" result="beleuchtet2"/> <feComposite operator="arithmetic" in="SourceGraphic" in2="beleuchtet2" k1="0" k2="1" k3="1" k4="0" result="beleuchtet3"/> <feMerge> 

     <feMergeNode in="Schlagschatten"/>
     <feMergeNode in="beleuchtet3"/>
   </feMerge>
 </filter>
 </defs>

 <text x="20" y="130" fill="#c82f04" filter="url(#Licht)">Licht und Schatten</text>
 <text x="20" y="250" fill="#337599" filter="url(#Licht2)">Licht und Schatten</text>

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

Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:SVG-text-filter-5.html&oldid=100021“