JSFiddle - React, Tailwind, and code Playground

by mrcl

HTML

<div class="kartewrapper">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 753 868" id="bawue">
                    <style>
                        g:not(.ign) * {
                            fill: #dddddd;
                            stroke: rgba(0, 0, 0, 0.4);
                            stroke-width: 0.8;
                        }

                        g:not(.ign):not(.on):hover * {
                            fill: khaki;
                        }

                        .bodensee {
                            fill: deepskyblue;
                        }

                        #Staedtenamen tspan {
                            font-size: 24pt;
                            fill: black;
                            stroke-width: 0;
                            pointer-events: none;
                            font-family: TheSans,sans-serif; 
                        }

                        g.on * {
                            fill: gold;
                        }
                    </style>
                    <g class="ign bodensee" id="bodensee">
                        <title>Bodensee</title>
                        <polygon points="421 801 418 793 411 796 403 796 383 795 366 797 379 784 375 779 370 779 357 771 366 769 383 772 407 783 420 789 428 792 421 771 404 760 399 757 385 744 387 739 395 743 407 752 431 767 437 778 450 790 453 792 460 795 466 799 476 796 493 802 501 803 505 808 510 816 510 820 516 827 529 828 530 831 536 833 541 838 557 840 561 847 565 849 567 854 561 862 548 859 538 862 519 862 515 867 497 865 487 859 487 852 475 844 474 833 461 827 454 819 421 801 " id="polygon332"></polygon>
                    </g>
                    <g class="ign" id="Kreise">
                        <g id="neckarodenwaldkreis">
                            <title>Neckar-Odenwald-Kreis</title>
                            <polygon points="406 99 406 100 403 106 407 109 393 119 397 129 391 138 389 141 386 136 381 139 382 147 373 148 370...

CSS

text {display:none;}

JavaScript

var daten=[["neckarodenwaldkreis","Neckar-Odenwald-Kreis",0.47],
["rheinneckarkreis","Rhein-Neckar-Kreis",0.47],
["mannheimstadtkreis","Mannheim",0.58],
["heidelbergstadtkreis","Heidelberg",0.69],
["maintauberkreis","Main-Tauber-Kreis",0.47],
["hohenlohekreis","Hohenlohekreis",0.47],
["heilbronn","Landkreis Heilbronn",0.73],
["heilbronnstadtkreis","Stadtkreis Heilbronn",0.73],
["ludwigsburg","Ludwigsburg",0.69],
["schwaebischhall","Schwäbisch-Hall",0.58],
["remsmurrkreis","Rems-Murr-Kreis",0.47],
["ostalbkreis","Ostalbkreis",0.47],
["heidenheim","Heidenheim",0.58],
["stuttgart","Stuttgart",0.74],
["goeppingen","Göppingen",0.73],
["esslingen","Esslingen",0.73],
["ulmstadtkreis","Ulm",0.58],
["albdonaukreis","Alb-Donau-Kreis",0.47],
["reutlingen","Reutlingen",0.73],
["boeblingen","Böblingen",0.45],
["tuebingen","Tübingen",0.33],
["konstanz","Konstanz",0.84],
["bodenseekreis","Bodenseekreis",0.57],
["ravensburg","Ravensburg",0.69],
["biberach","Biberach",0.58],
["sigmaringen","Sigmaringen",0.97],
["tuttlingen","Tuttlingen",0.73],
["zollernalbkreis","Zollernalbkreis",0.47],
["rottweil","Rottweil",0.58],
["freudenstadt","Freudenstadt",0.29],
["pforzheimstadtkreis","Pforzheim",0.58],
["enzkreis","Enzkreis",0.47],
["calw","Calw",0.58],
["karlsruhe","Landkreis Karlsruhe",0.58],
["karlsruhestadtkreis","Stadtkreis Karlsruhe",0.58],
["rastatt","Rastatt",0.39],
["badenbadenstadtkreis","Baden-Baden",0.73],
["ortenaukreis","Ortenau-Kreis",0.41],
["schwarzwaldbaarkreis","Schwarzwald-Barr-Kreis",0.47],
["emmendingen","Emmendingen",0.73],
["freiburgimbreisgaustadtkreis","Freiburg im Breisgau",0.58],
["breisgauhochschwarzwald","Breisgau-Hochschwarzwald",0.58],
["waldshut","Waldshut",0.39],
["loerrach","Lörrach",0.58]];

for (var i=0; i<daten.length; i++) { 
console.log(daten[i][0]);

var t = document.getElementById(daten[i][0]).querySelectorAll("polygon,path");

for (var j=0; j<t.length; j++) {
 t[j].style.fill = "rgba(144,2,124,"+daten[i][2]+")";
}
 
}

$("g#Kreise...