Beispiel:SVG-text-filter-3.html
Aus SELFHTML-Wiki
<!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 - Reflexion</title>
</head>
<body>SVG - Reflexion
<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)" >Reflexion</text>
<text x="60" y="100" fill="url(#schatten)" role="none" transform="translate(30,165) skewX(25) scale(.5,-.65) ">Reflexion</text>
</svg>
</body> </html>
