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>
  <h1>Innenschatten</h1>
 
<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“