HTML SVG und dynamischer Text

[M.E.]

Hallo,

Ich möchte auf meiner Seite SVG Grafiken einbinden, auf die ich dann dynamisch (per PHP) Text einblenden moechte.

Theoretisch kann ich ja einfach das Bild im HTML einbinden ..

<svg>...</svg>

... und den Text in der Grafik entsprechend ersetzen. Das klappt soweit auch, eignet sich aber für mich nicht.

Mein Anwendungsfall ist ein bisschen komplizierter:

• Ich möchte in meiner SVG Grafik an verschiedenen Stellen kleine Tabellen (in unterschiedlichen Größen) anzeigen.
• Die Inhalte der Tabellen sind dynamisch per PHP generiert.
• Am besten möchte ich einfach die Grafik einbinden und dann mittels Javascript oder schon im PHP die Tabellen in der Grafik positionieren.
• Das ganze muss skalierbar sein und auch mit dem responsivem Verhalten zusammenspielen. Die Positionierung der Tabellen in der Grafik sollte also relativ zur dargestellen Große sein.

Jetzt meine Frage: Mit welchen Techniken mache ich das am besten?

Ich sehe zwei Ansätze:
1) HTML5 Canvas
Die SVG Grafik als Hintergrund der Canvas und dann die Text-Tabellen positionieren.
Das hat einige Vor- und Nachteile (siehe: http://www.w3schools.com/HTML/html5_svg.asp). Insbesondere Skalierung.
2) Einfaches DIV, <img>, und richtig positionierte Tabellen.
Ein DIV als container für das img und dann mittels CSS3 und Javascript die Tabellen in der Grafik relativ positionieren.

Was meint ihr?
Welche Möglichkeit ist die geschicktere?
Kennt jemand Beispiele, wo etwas Ähnliches gemacht wird?
Andere Vorschläge?

MfG
M.E.

 

[pcBauer]

Hi,

Gibt es denn überhaupt einen Grund, warum du svg verwenden willst? Nur zur Skalierung?
Was spricht denn gegen normale HTML-Tabellen? Dann müsstest du nur bei den Größenangaben statt Pixeln eben auf em oder rem setzen. Sollte doch das tun, was du möchtest?

Könntest du irgendwie ne kleine Zeichnung machen mit einem Beispiel wie es im Endeffekt auf der Seite aussehen soll, dass man sich das besser vorstellen kann?

SVG und IMG sind in meinen Augen rein für Zeichnungen, Logos und Bilder, wieso du da ne Tabelle mit anzeigen willst, erschließt sich mir daher nicht.

Achso du hast Bilder, innerhalb derer du Tabellen einzeichnen möchtest? Klingt schon sehr exotisch

Edit:
Du kannst einfach HTML-Tags innerhalb der SVGs einbauen .
Oder was meintest du mit Text innerhalb der SVG funktioniert für dich nicht?
Gibt auch ein paar Einwände gegen die Variante, kannst ja für Alternativen die anderen Antworten durchlesen

Gruß

 

[M.E.]

@pcBauer
Danke fuer den Stackoverflow Link! Dass ich die HTML Tabellen als foreignObject einfach in die SVGs einfuegen kann ist mir garnicht in den Sinn gekommen.
Das scheint mir momentan die simpelste Loesung zu sein ud damit werde ich es mal versuchen.

Als Beispiel:
Ich habe eine fiktive Strassenkarte als SVG Vorliegen. Einige Orte in dieser Karte sollen jetzt dynamisch mit Informationen versehen werden.
Wird am Ende noch deutlich komplexer und interaktiver, aber das ist erst mal der erste Schritt.

Danke fuer den Tipp.

 

[pcBauer]

Ah okay,

gegenfalls gibts ja auch Kartendienstleister, wo du deine fiktiven Karten hinterlegen kannst?
Dann könntest du mit einem netten kleinen sehr performanten und modularem Kartenwrapper die Karte einbinden und Elemente (z.B. Tabellen) als Popup anzeigen?
Klingt zumindest nur bedingt sinnvoll, von Hand zu Fuß solch Kartenmaterial oder Kartenähnliches Material zu erzeugen und direkt mit Tabellen zu versehen.

Vielleicht ja noch eine Option, bevor dich deine eigenen Anforderungen erschlagen, gerade weil du ja sagst, es wird noch deutlich komplexer.
Leaflet ist sehr mächtig und eigentlich auch recht verständlich in der Nutzung. Und wenn dann etwas nicht passt, kannst du dir entweder x-beliebige Erweiterungen einbinden oder eben selbst was schreiben, aber das Rad muss man ja nicht neu erfinden

Die richtige Architektur bzw die richtigen Bibliotheken sind in der Softwareentwicklung schon mehr als die halbe Miete IMHO