Beispiel:SVG-text-filter-3.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">
 <style>

text { 

 font-family: "serif";
 font-size: 120px;	
 font-weight: bold;

} 

 </style>
 <title>SVG - Reflektion</title>

</head>

<body>

SVG - Reflektion

<svg viewBox="0 0 440 225"> 

 <defs>
   <linearGradient id="verlauf" gradientTransform="rotate(90,.5,.5)">
     <stop offset="0" stop-color="#fff"/>
     <stop offset=".3" stop-color="#000"/>
     <stop offset=".4" stop-color="#220"/>
     <stop offset=".55" stop-color="#fff"/>
     <stop offset=".65" stop-color="#884"/>
     <stop offset=".75" stop-color="#002"/>
     <stop offset=".9" stop-color="#fff"/>
   </linearGradient> 
   <linearGradient id="schatten" gradientTransform="rotate(90,.5,.5)">
     <stop offset="0" stop-color="#fff" stop-opacity="0"/>
     <stop offset=".3" stop-color="#000" stop-opacity=".1"/>
     <stop offset=".4" stop-color="#220" stop-opacity=".2"/>
     <stop offset=".55" stop-color="#fff" stop-opacity=".5"/>
     <stop offset=".65" stop-color="#884" stop-opacity=".6"/>
     <stop offset=".75" stop-color="#002"/>
     <stop offset="1" stop-color="#fff"/>
   </linearGradient> 
 </defs>

 <text x="60" y="100" fill="url(#verlauf)" stroke-width=".5" stroke="#222"   transform="scale(.5,1)"  >Reflektion</text>
 <text x="60" y="100" fill="url(#schatten)" role="none" transform="translate(30,165) skewX(25) scale(.5,-.65) ">Reflektion</text>

</svg>

</body> </html>

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