Beispiel:SVG-text-filter-4.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>

text { 

 font-size:100px; 
 font-weight: bold; 
 font-family: Verdana, Helvetica, Arial, sans-serif;

} body { background: #666; } 

 </style>
 <title>Beispiel: SVG-Texteffekte 12</title>

</head>

<body>

Innenschatten

<svg viewBox="0 0 880 400"> 

 <defs>
   <filter id="inset-shadow">
     <feComponentTransfer in="SourceAlpha">
       <feFuncA type="table" tableValues="1 0" />
     </feComponentTransfer>
     <feGaussianBlur stdDeviation="2"/>
     <feOffset dx="5" dy="5" result="Schatten"/>
     <feFlood flood-color="black" result="Farbe"/>
     <feComposite in="Farbe" in2="Schatten" operator="in"/>
     <feComposite in2="SourceAlpha" operator="in" />
     <feMerge>
       <feMergeNode in="SourceGraphic" />
       <feMergeNode />
     </feMerge>                    
 </filter>

   <filter id="inset-shadow2">
     <feComponentTransfer in="SourceAlpha">
       <feFuncA type="table" tableValues="1 0" />
     </feComponentTransfer>
     <feGaussianBlur stdDeviation="4"/>
     <feOffset dx="5" dy="5" result="Schatten"/>
     <feFlood flood-color="white" result="Farbe"/>
     <feComposite in="Farbe" in2="Schatten" operator="in"/>
     <feComposite in2="SourceAlpha" operator="in" />
     <feMerge>
       <feMergeNode in="SourceGraphic" />
       <feMergeNode />
     </feMerge>                    
 </filter>

 </defs>

 <text style="fill: #dfac20; filter: url(#inset-shadow)" x="10" y="155">
 	    InnenSchatten
 </text>

 <text style="fill: #337599; filter: url(#inset-shadow2)" x="10" y="300">
 	    InnenSchatten
 </text>

</svg>

</body> </html>

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