<!DOCTYPE html>
<html>
<head>
<style>
text {
font-size: 80px;
font-weight: bold;
paint-order: normal;
}
</style>
</head>
<body>
<h1>Change paint-order with JavaScript</h1>
<p>Click the "Try it" button to reverse the paint order for the text element so that stroke lines are drawn first, then text is filled.</p>
<button onclick="myFunction()">Try it</button>
<svg width="100%" height="150"><text
x="30" y="80"
id="colorfulText"
fill="rgb(76,167,112)"
stroke="purple"
stroke-width="6">
Thick header
</text>
</svg>
<script>
function myFunction() {
document.querySelector("text").style.paintOrder = "stroke fill";
}
</script>
</body>
</html>