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>
  <h1>Texteffekte mit dem feSpecularLighting-Filter</h1>

 <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“