Testing several ways to make a test label readable. Last two solutions by https://stackoverflow.com/questions/58784904/how-to-create-a-blurred-label-background-with-svg-filters/58785393#58785393.
Built with blockbuilder.org
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v5.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
.black {
fill: black;
}
.blue {
fill: blue;
}
.red {
fill: red;
}
.yellow {
fill: yellow;
}
.label{
fill: black;
font-size: 14px;
}
.label-background{
fill: white;
font-size: 16px;
}
.text-background{
paint-order: stroke;
stroke: #fff;
fill: black;
stroke-width: 5px;
}
.header{
font-size: 20px;
}
.background{
fill: white;
opacity: 0.6;
}
svg g.row-7 text {
text-shadow: 0px 0px 2px white,
0px 0px 4px white,
0px 0px 6px white,
0px 0px 8px white,
0px 0px 10px white;
}
</style>
</head>
<body>
<svg width="100%" height="100%">
<defs>
<filter x="-0.05" y="-0.1" width="1.08" height="1.2" id="solid">
<feFlood flood-color="lightgrey"/>
<feComposite in="SourceGraphic" operator="xor" />
</filter>
<filter id="shadow">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur" />
<feColorMatrix in="blur" type="matrix" values="0 0 0 0 1
0 0 0 0 1
0 0 0 0 1
0 0 0 8 0" result="white" />
<feColorMatrix in="white" type="matrix" values="1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
0 0 0 .8 0" result="dim" />
<feBlend in="SourceGraphic" in2="dim" mode="normal" />
</filter>
</defs>
<g class="row-1" transform="translate(0,30)">
<text class="header" x="20" y="-10">text label on top of bar </text>
<g>
<rect class="black" width=100 height=30></rect>
<text class="label" x="20" y="20">my text label</text>
</g>
<g transform="translate(120,0)">
<rect class="blue" width=100 height=30></rect>
<text class="label" x="20" y="20">my text label</text>
</g>
<g transform="translate(240,0)">
<rect class="red" width=100 height=30></rect>
<text class="label" x="20" y="20">my text label</text>
</g>
<g transform="translate(360,0)">
<rect class="yellow" width=100 height=30></rect>
<text class="label" x="20" y="20">my text label</text>
</g>
</g>
<g class="row-2" transform="translate(0,100)">
<text class="header" x="20" y="-10">text label on top of rect.background on top of bar </text>
<g>
<rect class="black" width=100 height=30></rect>
<rect class="background" x=17 y=6 width=78 height=19></rect>
<text class="label" x="20" y="20">my text label</text>
</g>
<g transform="translate(120,0)">
<rect class="blue" width=100 height=30></rect>
<rect class="background" x=17 y=6 width=78 height=19></rect>
<text class="label" x="20" y="20">my text label</text>
</g>
<g transform="translate(240,0)">
<rect class="red" width=100 height=30></rect>
<rect class="background" x=17 y=6 width=78 height=19></rect>
<text class="label" x="20" y="20">my text label</text>
</g>
<g transform="translate(360,0)">
<rect class="yellow" width=100 height=30></rect>
<rect class="background" x=17 y=6 width=78 height=19></rect>
<text class="label" x="20" y="20">my text label</text>
</g>
</g>
<g class="row-3" transform="translate(0, 170)">
<text class="header" x="20" y="-10">text label with filter #solid on top of bar </text>
<g>
<rect class="black" width=100 height=30></rect>
<text class="label" filter="url(#solid)" x="20" y="20">my text label</text>
</g>
<g transform="translate(120,0)">
<rect class="blue" width=100 height=30></rect>
<text class="label" filter="url(#solid)" x="20" y="20">my text label</text>
</g>
<g transform="translate(240,0)">
<rect class="red" width=100 height=30></rect>
<text class="label" filter="url(#solid)" x="20" y="20">my text label</text>
</g>
<g transform="translate(360,0)">
<rect class="yellow" width=100 height=30></rect>
<text class="label" filter="url(#solid)" x="20" y="20">my text label</text>
</g>
</g>
<g class="row-4" transform="translate(0, 240)">
<text class="header" x="20" y="-10">text label on top of larger text label with background color on top of bar </text>
<g>
<rect class="black" width=100 height=30></rect>
<text class="label-background" x="18" y="22">my text label</text>
<text class="label" x="20" y="20">my text label</text>
</g>
<g transform="translate(120,0)">
<rect class="blue" width=100 height=30></rect>
<text class="label-background" x="18" y="22">my text label</text>
<text class="label" x="20" y="20">my text label</text>
</g>
<g transform="translate(240,0)">
<rect class="red" width=100 height=30></rect>
<text class="label-background" x="18" y="22">my text label</text>
<text class="label" x="20" y="20">my text label</text>
</g>
<g transform="translate(360,0)">
<rect class="yellow" width=100 height=30></rect>
<text class="label-background" x="18" y="22">my text label</text>
<text class="label" x="20" y="20">my text label</text>
</g>
</g>
<g class="row-5" transform="translate(0, 310)">
<text class="header" x="20" y="-10">text label with paint-order: stroke on top of bar </text>
<g>
<rect class="black" width=100 height=30></rect>
<text class="label text-background" x="20" y="20">my text label</text>
</g>
<g transform="translate(120,0)">
<rect class="blue" width=100 height=30></rect>
<text class="label text-background" x="20" y="20">my text label</text>
</g>
<g transform="translate(240,0)">
<rect class="red" width=100 height=30></rect>
<text class="label text-background" x="20" y="20">my text label</text>
</g>
<g transform="translate(360,0)">
<rect class="yellow" width=100 height=30></rect>
<text class="label text-background" x="20" y="20">my text label</text>
</g>
</g>
<g class="row-6" transform="translate(0,380)">
<text class="header" x="0" y="-10">feGaussianBlur on SourceAlpha</text>
<g>
<rect class="black" width=100 height=30></rect>
<text class="label" x="20" y="20" filter="url(#shadow)">my text label</text>
</g>
<g transform="translate(120,0)">
<rect class="blue" width=100 height=30></rect>
<text class="label" x="20" y="20" filter="url(#shadow)">my text label</text>
</g>
<g transform="translate(240,0)">
<rect class="red" width=100 height=30></rect>
<text class="label" x="20" y="20" filter="url(#shadow)">my text label</text>
</g>
<g transform="translate(360,0)">
<rect class="yellow" width=100 height=30></rect>
<text class="label" x="20" y="20" filter="url(#shadow)">my text label</text>
</g>
</g>
<g class="row-7" transform="translate(0,450)">
<text class="header" x="20" y="-10">text label on top of bar </text>
<g>
<rect class="black" width=100 height=30></rect>
<text class="label" x="20" y="20">my text label</text>
</g>
<g transform="translate(120,0)">
<rect class="blue" width=100 height=30></rect>
<text class="label" x="20" y="20">my text label</text>
</g>
<g transform="translate(240,0)">
<rect class="red" width=100 height=30></rect>
<text class="label" x="20" y="20">my text label</text>
</g>
<g transform="translate(360,0)">
<rect class="yellow" width=100 height=30></rect>
<text class="label" x="20" y="20">my text label</text>
</g>
</g>
</svg>
</body>