Beispiel:SVG-Filter-11.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 {
 text-anchor: middle; 
 fill: #dfac20;
 stroke: #337599;
 font-weight: bolder;
 font-size: 100px; 
}
 
  </style>
  <title>Beispiel: feMerge</title>
</head>
 
<body>
  <h1>SVG-Filter feMerge</h1>
 
<svg  viewBox="0 0 880 500" >
<defs>

  <filter id="Filter">
    <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="weichgezeichnet"/>
    <feSpecularLighting in="weichgezeichnet" surfaceScale="5" specularConstant="1" 
          specularExponent="10" lighting-color="white"  
                    result="zwischenergebnis1">
	  <fePointLight x="-50" y="-100" z="200"/>
    </feSpecularLighting>
    <feComposite in="zwischenergebnis1" in2="SourceAlpha" operator="in" result="zwischenergebnis2"/>
    <feComposite in="SourceGraphic" in2="zwischenergebnis2" operator="arithmetic" 
                 k1="0" k2="1" k3="1" k4="0" result="beleuchtet"/>
  
    <!-- Weichzeichner -->
    <feGaussianBlur in="SourceAlpha" stdDeviation="3" result="weichgezeichnet1"/>
    <!-- Verschiebung -->
    <feOffset in="weichgezeichnet1" dx="3" dy="3" result="weichgezeichnetVerschoben"/>
    <!-- Zusammenfügen -->
    <feMerge>
      <feMergeNode in="weichgezeichnetVerschoben"/>
      <feMergeNode in="SourceGraphic"/>
      <feMergeNode in="beleuchtet"/>
    </feMerge>
  </filter>
</defs>

<text x="440" y="200" filter="url(#Filter)">
  SelfHTML ist toll!
</text>
</svg>

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