SVG, polygon mit linear-gradient

[J o]

Guten Morgen zusammen,

mittlerweile hab ich wieder etwas Zeit und bin auf ein kleines Problem gestoßen.

Meine Aufgabe: Ein SVG mit einem Farbverlauf von Links nach Rechts. Dazu findet sich eine Reihe an Referenzen mit Beispielen auch im SelfHTML-Wiki. Soweit also kein Problem.
Nun möchte ich den offset der Farben individuell mit Werten aus einer Datenbank variieren. Dies auch nicht nur für ein SVG sondern für Viele ( N > 25 - 250 ) welche sich dann auch noch ändern können.

Da für jeden Farbverlauf eine eigener <linearGradient> definiert werden müsste und ich den irgendwo zu meiner HTML Struktur hinzufügen müsste, war mein erster Ansatz im CSS eine Klasse zu erstellen welche fill: ein background-image zuweist. Dies schlug leider fehl.

Weiter gesucht und auf diesen Artikel gestoßen. Das sollte doch irgendwie funktionieren. Also ein SVG erstellt:

<svg height="20" width="20">
	<polygon id="svg" points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78"/>
</svg>

(ob das svg oder das polygon die id trägt ändert gerade nichts, bin dort gerade am experimentieren) und versucht dieses als Background Image zu nutzen:

.svg {
	height: 1.5em;
	width: 1.5em;
	-webkit-mask: url(#svg) no-repeat 50% 50%;
	mask: url(#svg) no-repeat 50% 50%;
	-webkit-mask-size: cover;
	mask-size: cover;
}

und den Gradient ebenfalls mit einer Klasse im CSS hinzuzufügen:

.svg--gradient-test {
	background: -webkit-linear-gradient(0deg, var(--color) 40%, var(--color-transparent) 60%);
	background: linear-gradient(0deg, var(--color) 40%, var(--color-transparent) 60%); 
}

Damit müsste es doch möglich sein, beliebig viele Polygone mit JS dem DOM hinzuzufügen:

let node = document.createElement("img");
node.classList.add("svg" , "svg--gradient-test");
document.getElementById("test").appendChild( node );

Dies schlägt jedoch auch Fehl. Irgendwo ist sicher ein kleiner Fehler aber ich komme gerade nicht dahinter.

Gruß
Jo