<!DOCTYPE html>
<html>
<head>
<style>
text {
font-size: 80px;
font-weight: bold;
paint-order: stroke fill;
}
</style>
</head>
<body>
<h1>The paint-order Property</h1>
<p>In this example stroke is done first, then fill. This makes stroke fall behind the fill, creating an outline for the characters.</p>
<svg width="100%" height="150">
<defs>
<linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#ef5350;stop-opacity:1" />
<stop offset="25%" style="stop-color:#7e57c2;stop-opacity:1" />
<stop offset="50%" style="stop-color:#26c6da;stop-opacity:1" />
<stop offset="75%" style="stop-color:#eeff41;stop-opacity:1" />
<stop offset="100%" style="stop-color:#ff5722;stop-opacity:1" />
</linearGradient>
</defs>
<text
x="30" y="80"
id="colorfulText"
fill="url(#grad)"
stroke="purple"
stroke-width="10">
I am colorful!
</text>
</svg>