Reiseroute per SVG-Grafiken auf einer Weltkarte?

Hallo,

ich brauche Hilfe bei der textmäßigen Erstellung von SVG-Grafiken ohne Grafikprogramm.

In einem HTML Dokument möchte ich Orte auf der Landkarte mit Pfeilen verbinden. Es geht um eine Weltreise.

Pro Verbindung zwischen zwei Orten möchte ich eine transparente SVG-Grafik, die ich auf die Weltkarte lege. Habe mich mit SVG noch kaum beschäftigt.

Die Marker auf der Karte sind bereits mit CSS left:50%;top:50%; positioniert. Hoffentlich geht das mit SVG auch.

Hier die Karte, noch ohne Reiseroute:

Answer 1

[regex9]

Die SVG sollte die gesamte Fläche des Bildes einnehmen. Die Marker würde ich eigentlich ebenso in die SVG hineinnehmen. Farben (fill, stroke), Transparenz (opacity) und Positionierung kannst du mittels CSS lösen.

Die Struktur für die Positionierung kurz angedeutet:

<div style="position: relative">
  <img alt="..." src="...">
  <svg height="..." style="height: 100%; left: 0; position: absolute; top: 0; width: 100%" viewport="..." width="...">
    <!-- svg elements ... -->
  </svg>
</div>

Für wiederkehrende Elemente (Marker, Pfeil) kannst du ein symbol anlegen und via use Instanzen davon erzeugen. Um die passend zu rotieren, hilft erneut CSS (siehe transform).

Comments

[Holzbiene2024]

Danke, die Verbindungslinien habe ich, es fehlen noch die Pfeile in Fahrtrichtung.

<svg xmlns="http://www.w3.org/2000/svg"><!-- halifax - jamaica -->
  <line x1="36%" y1="48%" x2="28%" y2="62%" style="stroke:grey;stroke-width:.25%" />
</svg>

[regex9]

@Holzbiene2024

Schau dir das marker-Element an: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/marker.

[Holzbiene2024]

@regex9

Danke dir, es funktioniert. Kannst du mir noch verraten, wie ich die Farbe der Pfeile so blau mache wie die line? stroke und color ist es nicht.

[Holzbiene2024]

@Holzbiene2024

Hab's gefunden: fill=blue

Answer 2

[mat22]

Warum soll es denn ohne GUI-Programm sein?

Mit beispielsweise Inkscape geht das am leichtesten!