SVG-Grafik Farbe ändern

[Rolf B]

Hallo Rolf,

das habe ich jetzt mal ausprobiert. Hier ein Spiel-SVG:

<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 72" width="960" height="72">
<style>
  #reck {
    fill: red;
    stroke-width: 4;
    stroke: blue;
  }
  .curc {
    fill: blue;
    stroke-width: 4;
    stroke: red;
  }
</style>

<rect id="reck" x="100" y="30" width="200" height="30"></rect>
<circle class="curc" cx="600" cy="45" r="20"></circle>

<script>
   for (let e of new URLSearchParams(location.search)) {
      let key = e[0].split('/');
      if (key.length == 2) {
         for (let elem of document.querySelectorAll(key[0]))
            elem.style.setProperty(key[1], e[1]);
      }
   }
</script>
</svg>

Das kann ich z.B. einbinden mit

<embed type="image/svg+xml"
       src="test.svg?.curc/stroke=black&%23reck/fill=pink">

und schon kriegt der Kreis einen schwarzen Rand und das Rechteck eine rosa Füllung. Es muss aber embed sein. SVGs, die als img eingebunden sind, führen keine Scripte aus.

Die Keys der URL-Parameter bestehen aus 2 Teilen: Ein Selektor und ein CSS Eigenschaftsname, getrennt durch einen Schrägstrich. Der Wert zum Key wird dann den Elementen, die durch den Selektor identifiziert werden, zugewiesen.

Selektoren mit Zeichen darin, die in URLs nicht zulässig sind, müssen natürlich prozentcodiert werden. Aber dafür gibt's ja Funktionen, wie encodeURIComponent in JavaScript.

Das ist nicht SCHÖN. Okay. Aber man kann damit in SVGs hineinstylen...

Rolf