✔ Strassenkarte mit klickbaren Strassen

wäre es den nicht eigentlich auch möglich, das komplette bild mit php zu erstellen?
theoretisch müsste man doch die (bei dir schwarzen str) auch rein mit php erzeugen können und diese dann setzen lassen mit den image erweiterungen von php
 
im grunde müsste man doch einfach nur die areas bei dir in folgende form bringen:

HTML: 
<a xlink:href="https://de.wikipedia.org/wiki/George_Washington">
    <rect x="300" y="125" opacity="0" width="250" height="300" />
  </a>
um dann das bild responsiv zu nutzen, wie ich das da hatte oder habe ich da jetzt ein denkfehler?

wenn ich ehrlich bin, dann würde mir das diagonale auch nicht wirklich optisch zusprechen :D
 
Zuletzt bearbeitet:
Ich empfehle auch, das Ganze gleich responsiv anzulegen. Wenn man sich den Link mit xlink ansieht, erkennt man, dass dort schon ein Rechteck mit opacity="0" drin ist. Füllt man das statt dessen mit einer Farbe, hat man gleich auch die grafische Darstellung des lang gesteckten Rechtecks für eine Straße und es braucht kein Bitmap mehr, um die Straße darzustellen.
 
also habe mir das jetzt mal ein wenig umgebstelt.
lasse mir die areas so abspeichern:

PHP: 
$areas.=" 
            <a xlink:href=\"https://de.wikipedia.org/wiki/George_Washington\" style=\"fill:blue\"> 
                <rect x=\"$x1\" y=\"$y1\" opacity=\"0\" width=\"$x2\" height=\"20\"  style=\"fill: blue;\"></rect> 
                <text x=\"500px\" y=\"$yt1\" font-family=\"Verdana\" width=\"20\" font-size=\"15\" fill=\"red\">$strassenNamen[$streetID]</text> 
            </a> 
  
 ";

habe nur das problem, das ich kein background-color setzen kann. es kommt immer nur die farbe, wenn ich die maus drüber ziehe also hover los geht.
vielleicht kann mir hier noch einer weiter helfen?

edit: Anpassen von $areas;
 
Ich war auch nicht untätig und habe eine kleine Demo gemacht:
Code: 
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="640" height="480" version="1.1" viewBox="0 0 640 480">
    <?php
        function drawRoad($href, $xstart, $ystart, $length, $width, $fillcolor, $orientation = 'h') {
            if ($orientation == 'h') {
                $x = $xstart;
                $y = $ystart - $width / 2;
                $w = $length;
                $h = $width;
            } else {
                $x = $xstart- $width / 2;
                $y = $ystart;
                $w = $width;
                $h = $length;
            }
            $txtrect = '<rect height="' . $h . '" width="' . $w;
            $txtrect .= '" x="' . $x . '" y="' . $y;
            $txtrect .= '" fill="' . $fillcolor . '">';
            echo '<a xlink:href="' . $href . '">' . $txtrect . '</a>';
        }
        drawRoad('https://wiki.selfhtml.org', 20, 20, 200, 10, '#ff0000', 'h');
        drawRoad('https://wiki.selfhtml.org', 20, 40, 200, 10, '#ff0000', 'h');
        drawRoad('https://wiki.selfhtml.org', 20, 50, 200, 10, '#0000ff', 'v');
    ?>

    </svg>
Mit der Funktion kann man Straßen horizontal oder vertikal zeichnen. Fehlt nur noch der Text, der sich etwas schwieriger gestalten könnte, wenn man ihn schön zentrieren will.
 
Zentrierung des horizontalen Textes war einfacher als ich dachte:
Code: 
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="640" height="480" version="1.1" viewBox="0 0 640 480">
    <?php
        function drawRoad($href, $name,
            $xstart, $ystart, $length, $width,
            $fillcolor, $orientation = 'h') {
            if ($orientation == 'h') {
                $x = $xstart;
                $y = $ystart - $width / 2;
                $w = $length;
                $h = $width;
                $xtxt = $xstart + $length / 2;
                $ytxt = $ystart;
            } else {
                $x = $xstart- $width / 2;
                $y = $ystart;
                $w = $width;
                $h = $length;
            }
            $text = '<text alignment-baseline="central" text-anchor="middle"';
            $text .= ' fill="white"';
            $text .= ' x="' . $xtxt . '" y="' . $ytxt . '">';
            $text .= $name . '</text>';
            $rect = '<rect height="' . $h . '" width="' . $w;
            $rect .= '" x="' . $x . '" y="' . $y;
            $rect .= '" fill="' . $fillcolor . '">';
            $rect .= '</rect>';
            echo '<a xlink:href="' . $href . '">' . $rect . '</a>';
            echo $text;
        }
        drawRoad('https://wiki.selfhtml.org', 'Hauptstraße', 20, 20, 200, 20, '#ff0000', 'h');
        // drawRoad('https://wiki.selfhtml.org', 20, 40, 200, 10, '#ff0000', 'h');
        // drawRoad('https://wiki.selfhtml.org', 20, 50, 200, 10, '#0000ff', 'v');
    ?>

    </svg>
 
Jetzt die Beschriftung der vertikalen Straßen:
Code: 
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="640" height="480" version="1.1" viewBox="0 0 640 480">
    <?php
        function drawRoad($href, $name,
            $xstart, $ystart, $length, $width,
            $fillcolor, $orientation = 'h') {
            if ($orientation == 'h') {
                $x = $xstart;
                $y = $ystart - $width / 2;
                $w = $length;
                $h = $width;
                $xtxt = $xstart + $length / 2;
                $ytxt = $ystart;
                $transform ='';
            } else {
                $x = $xstart- $width / 2;
                $y = $ystart;
                $w = $width;
                $h = $length;
                $xtxt = $xstart + $length / 2;
                $ytxt = $ystart - $width / 2;
                $transform = ' transform="rotate(90,' . $x . ',' . $y . ')"';
            }
            $text = '<text alignment-baseline="central" text-anchor="middle"';
            $text .= ' fill="white"';
            $text .= ' x="' . $xtxt . '" y="' . $ytxt . '"';
            $text .= $transform . '>';
            $text .= $name . '</text>';
            $rect = '<rect height="' . $h . '" width="' . $w;
            $rect .= '" x="' . $x . '" y="' . $y;
            $rect .= '" fill="' . $fillcolor . '">';
            $rect .= '</rect>';
            echo '<a xlink:href="' . $href . '">' . $rect . '</a>';
            echo $text;
        }
        drawRoad('https://wiki.selfhtml.org', 'Hauptstraße', 20, 20, 200, 20, '#ff0000', 'h');
        drawRoad('https://wiki.selfhtml.org', 'Unterstraße', 20, 60, 200, 20, '#ff0000', 'h');
        drawRoad('https://wiki.selfhtml.org', 'Oberstraße', 20, 80, 200, 20, '#0000ff', 'v');
    ?>

    </svg>
Hinterher ist man immer klüger: Besser wäre es gewesen, das Rechteck und den Text einheitlich zu zeichnen und bei vertikaler Anordnung gemeinsam zu drehen. Dann wäre es auch kein Problem, diagonale Straßen zu zeichnen.
 
Besser wäre es gewesen, das Rechteck und den Text einheitlich zu zeichnen und bei vertikaler Anordnung gemeinsam zu drehen.
Zum Vergrößern anklicken....
Das habe ich umgesetzt:
Code: 
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="640" height="480" version="1.1" viewBox="0 0 640 480">
    <?php 
        function drawRoad($href, $name,
                $xstart, $ystart, $length, $width,
                $fillcolor, $rot = 0) {
            $x = $xstart;
            $y = $ystart - $width / 2;
            $w = $length;
            $h = $width;
            $xtxt = $xstart + $length / 2;
            $ytxt = $ystart;
            $transform = ' transform="rotate(' . $rot . ',' . $x . ',' . $y . ')"';
            $text = '<text alignment-baseline="central" text-anchor="middle"';
            $text .= ' fill="white"';
            $text .= ' x="' . $xtxt . '" y="' . $ytxt . '"';
            $text .= $transform . '>';
            $text .= $name . '</text>';
            $rect = '<rect height="' . $h . '" width="' . $w;
            $rect .= '" x="' . $x . '" y="' . $y;
            $rect .= '" fill="' . $fillcolor . '"';
            $rect .= $transform . '>';
            $rect .= '</rect>';
            echo '<a xlink:href="' . $href . '">' . $rect . '</a>';
            echo $text;
        }
        drawRoad('https://wiki.selfhtml.org', 'Hauptstraße', 20, 20, 200, 20, '#ff0000', 0);
        drawRoad('https://wiki.selfhtml.org', 'Unterstraße', 20, 60, 200, 20, '#ff0000', 90);
        drawRoad('https://wiki.selfhtml.org', 'Diagonalstraße', 80, 80, 200, 20, '#0000ff', 45);
    ?>
    </svg>
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück