SVG einbinden und dabei Farben anpassen

Question

Hallo Leute,

hab da mal wieder eine Frage.

Ich habe eine hochkomplexe SVG-Datei bestehend aus vielen Polygonen. Die Polygone haben alle eine ID. Hier ein stark vereinfachtes Beispiel:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 53 48">

<polygon style="stroke:black;fill:none;stroke-width:1px;" id="links" points="0 25 23 17 23 31"/>
<polygon style="stroke:black;fill:none;stroke-width:1px;" id="oben" points="23 17 30 0 36 17"/>
<polygon style="stroke:black;fill:none;stroke-width:1px;" id="rechts" points="36 17 53 24 36 31"/>
<polygon style="stroke:black;fill:none;stroke-width:1px;" id="unten" points="36 31 30 48 23 31"/>
<polygon style="stroke:black;fill:none;stroke-width:1px;" id="mitte" points="23 17 36 17 36 31 23 31"/>

</svg>

Diese SVG-Datei möchte ich nun an verschiedenen Stellen im Html-Dokument bzw. in verschiedenen HTML-Dokumenten einbinden. Dabei sollen jedoch einzelne Polygonen jedesmal eine andere Füllfarbe erhalten. Welche Chancen habe ich?

Eine Einbindung über das Image-Objekt geht zwar, aber dann kann ich die SVG nicht mehr über CSS stylen. Wenn ich das aber als Inline-SVG eintrage, (also über das SVG-TAG direkt im HTML-Body) muss ich jedesmal den gesamten SVG-Code mitgeben, nur um an Teilen die Farbe zu ändern. Das will ich nicht. Gibt es noch eine Andere Möglichkeit? Meine Recherchen haben bislang nichts ergeben.

Gruß Mr. K.

Answer 1

Hallo Mr. K.,

läuft auf dem Server, der die HTML-Seite enthält auch PHP? Dann könntest du die Formatierung als PHP-Variable ausgeben und diese Variable jeweils vor der Ausgabe an die Erfordernisse anpassen.

aus dieser Zeile

<polygon style="stroke:black;fill:none;stroke-width:1px;" id="links" points="0 25 23 17 23 31"/>

würde dann

<polygon style=<?php echo $Ausgabestil ?> id="links" points="0 25 23 17 23 31"/>

und die Variable Ausgabestil wird vorher gesetzt mit

<?php $Ausgabestil = '"stroke:black;fill:none;stroke-width:1px;"' ?>

Gruß computerschrat

Answer 2

Hallo Computerschrat,

Danke für deine Antwort

Mit PHP hab ich mich bislang überhaupt noch nicht beschäftigt. Das liegt vor allem daran, dass ich es nicht testen kann.Denn die Seite liegt zurzeit auf meinem lokalen PC. Und da funktioniert PHP leider nicht (hab ich gelesen).

Sobald die Seite online ist, und ich etwas erfahrener bin, werde ich deinen Tipp aber zumindest mal ausprobieren. In den Tutorials sieht es jedenfalls auch nicht viel anders aus als VBA. Insofern sollte ein Einarbeiten rasch möglich sein. Nur was ich dann wo und vor allem wie einfügen muss, hab ich noch nicht ganz kapiert. Hast du da noch einen Tipp für mich als Anfänger?

Vielleicht geht es aber auch ganz anders. Alternative Vorschläge sind jederzeit willkommen.

Gruß Mr. K.

Answer 3

Hallo Mr. K,

Möglicherweise kannst du die  gleiche Technik auch mit JavaScript umsetzen.Im Grunde musst du ja nur innerhalb der Ausgabezeile einen Textstring aus einer Variablen holen.

Eine andere Variante wäre es, CSS-Definitionen zu erzeugen und mit Namen zu belegen.

#Format-1 {
 stroke:black;
 fill:none;
 stroke-width:1px;
}

Das machst du für alle vorgesehenen Formatvarianten. Dann kannst du vor der Ausgabe die Verwendung der passenden CSS- Anweisungen aufrufen und die Vektoren ausgeben. Die CSS Anweisungen innerhalb dieser Ausgabe entfallen dann

<div id="Format-1">
<polygon id="links" points="0 25 23 17 23 31"/>
</div> 

PHP kannst du übrigens sehr einfach auf dem PC installieren. Hier, gibt es eine Anleitung dazu:

https://www.php-einfach.de/php-tutorial/php-installation/

Gruß computerschrat

Answer 4

Hey Computerschrat,

Ich wollte die Polygone eigentlich nur einmal schreiben und die Daten dann von extern über eine kurze URL einbinden. Das scheint in der Tat nur mit PHP möglich zu sein. Denn CSS kann leider keine externen Dateien stylen. Hab mich aber nun entschieden, doch über Inline SVG zu gehen, um das mit CSS stylen zu können.

Aber danke für den Link. Den kann ich gut gebrauchen wenn ich mich demnächst in PHP einarbeite. Spätestens fürs Gästebuch wird PHP nötig werden.

Gruß Mr. K.