Beispiel:SVG-text-filter-10.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

<!DOCTYPE html> <html lang="de"> <head> 

 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet" typ media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css">
 <style>

text { 

 font-family:Arial,sans-serif;
 font-size: 90px;
 font-weight:bold;
 font-weight:900;
 fill: blue;

} 

 </style>
 <title>SVG - Text mit Filter feTurbulence</title>

</head>

<body>

SVG - Text mit Filter feTurbulence

<svg viewBox="0 0 300 75"> 

 <title>Wolke</title>
   <defs>
      <filter id="wolke">
           <feTurbulence type="turbulence" baseFrequency="0.055" numOctaves="5"/>
           <feColorMatrix type="luminanceToAlpha"/>
           <feColorMatrix type="matrix" values="0 0 0 -1 1    0 0 0 -1 1    0 0 0 -1 1   0 0 0 0 1"/>
           <feComponentTransfer>
               <feFuncR type="table" tableValues="0   0    0   .4  1"/>
               <feFuncG type="table" tableValues="0   .15  .5  .9  1"/>
               <feFuncB type="table" tableValues="0   0    1   1  1"/>
               <feFuncA type="linear" slope="1" intercept="0"/>
           </feComponentTransfer>
       </filter>

     <mask id="textMask">
        <text style="fill:white;" x="10" y="60">
        Wolke
        </text>
     </mask>
   </defs>

   <text x="10" y="60" filter="url(#wolke)" mask="url(#textMask)">
   Wolke
   </text>
 </svg>

</body> </html>

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