Beispiel:SVG-text-9.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"> <link rel="stylesheet" media="screen" href="./Beispiel:Grundlayout.css"> <style>
text {
font-family:'Arial'; font-size: 120px; font-weight:bold; font-weight:900; stroke-width: 5; fill:transparent;
} body { background: #999; }
</style> <title>SVG - Randlinie als Verlauf</title>
</head>
<body>
SVG - Randlinie als Verlauf
<svg viewBox="0 0 880 450">
<defs>
<linearGradient id="verlauf">
<stop offset="0" stop-color="red"/>
<stop offset=".25" stop-color="orange"/>
<stop offset=".45" stop-color="yellow"/>
<stop offset=".65" stop-color="green"/>
<stop offset=".82" stop-color="blue"/>
<stop offset="1" stop-color="purple"/>
</linearGradient>
<linearGradient id="verlaufVertikal" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="red"/>
<stop offset="25%" stop-color="orange"/>
<stop offset="45%" stop-color="yellow"/>
<stop offset="65%" stop-color="green"/>
<stop offset="82%" stop-color="blue"/>
<stop offset="100%" stop-color="purple"/>
</linearGradient>
</defs>
<text stroke="url(#verlauf)" x="2%" y="30%">Regenbogen</text>
<text stroke="url(#verlaufVertikal)" x="2%" y="80%">Regenbogen</text>
</svg> </body> </html>
