Strassenkarte mit klickbaren Strassen

Danke. Das Zentrieren der Texte war doch recht einfach. Was ich dunkel erinnerte im Zusammenhang mit Text in SVG war der automatische Zeilenumbruch und das Ausrichten der Zeilen, wo es etwas komplizierter wird.
 
Mir ist grad aufgefallen, dass die Texte selbst nicht anklickbar sind. Liegt das an irgendeiner Reihenfolge? Kann man da irgendwas machen, dass die anklickbar werden?

edit;
Ja: echo '<a xlink:href="' . $href . '">' . $rect . $text .'</a>';
 
Zuletzt bearbeitet:
Mal eine kleine Spielerei mit SVG zum Stadtplan.
Momentan gibt es auch hier viel Gepixel, um die diagonalen Strassen in das vorhandene Strassengeflecht einzupassen.
Dazu kommt noch, dass bei unterschiedlichen StrassenFarben die Überschneidungen nicht wirklich ansprechend sind.
Da gibt es doch bestimmt auch irgendetwas, um bei Winkel X der Strasse das Strassenende senkrecht abschliessen zu lassen ? (sofern es auf eine senkrechte Strasse trifft; falls die auch noch gewinkelt ist, wird's ja noch schwieriger.)

screenshot-planSVG-20190808.png
 
Wenn es um die Optik geht, würde ich eher empfehlen, die Enden abzurunden:
Code:
        function drawRoad($href, $name,
                $xstart, $ystart, $length, $width,
                $fillcolor, $rot = 0) {
            $x = $xstart - $width / 2;
            $y = $ystart - $width / 2;
            $rx = $ry = $width / 2;
            $w = $length + $width;
            $h = $width;
            $xtxt = $x + $length / 2;
            $ytxt = $ystart;
            $transform = ' transform="rotate(' . $rot . ',' . $xstart . ',' . $ystart . ')"';
            $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 .= '" rx="' . $rx . '" ry="' . $ry;
            $rect .= '" fill="' . $fillcolor . '"';
            $rect .= $transform . '>';
            $rect .= '</rect>';
            echo '<a xlink:href="' . $href . '">' . $rect . $text . '</a>';
        }
        function drawRoadStartDest($href, $name,
                $xstart, $ystart, $xend, $yend, $width,
                $fillcolor) {
            $length = hypot($xend - $xstart, $yend - $ystart);
            $angle = asin(($yend - $ystart) / $length);
            $rot = ($angle / pi()) * 180;
            drawRoad($href, $name,
                $xstart, $ystart, $length, $width,
                $fillcolor, $rot);
        }
        drawRoad('https://wiki.selfhtml.org', 'Hauptstraße', 20, 20, 200, 20, '#ff0000', 0);
        drawRoad('https://wiki.selfhtml.org', 'Unterstraße', 20, 20, 200, 20, '#ff0000', 90);
        drawRoadStartDest('https://wiki.selfhtml.org', 'Startzielstraße', 20, 20, 220, 220, 20, '#0000ff');
    ?>
Ich habe noch eine Funktion hinzu gefügt, um eine Straße auch nach Start und Ziel zu definieren.
 
Das mit der Winkelberechnung ist natürlich super :)

Abgerundet sieht auch nicht schlecht aus. Kann man bestimmt für viele selbstgezeichnete Anfahrtskizzen benutzen.
 
so ich habe mich jetzt auch mal noch ein wenig hingetzte und die functionen von sempervivum genommen.
eins ist mir dabei aufgefallen:
du schreibst folgendes:
HTML:
<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">
wenn du hier
HTML:
width="640" height="480"
raus nimmst, dann wird das ganze auch responsiv :-) (kleiner tip vom anfänger ;-) )

dann habe ich mir die functionen auch noch in eine class geschrieben, zwar nicht bilderbuchmäßig aber es erfüllt jetzt voll und ganz den dienst, den ich gern haben wollte :-)

hier ein auszug der class:
PHP:
private function drawRoad($id, $name, $xstart, $ystart, $length, $width, $fillcolor, $rot = 0) {
        $x = $xstart - $width / 2;
        $y = $ystart - $width / 2;
        $rx = $ry = $width / 2;
        $w = $length + $width;
        $h = $width;
        $xtxt = $x + $length / 2;
        $ytxt = $ystart+2;
        $transform = ' transform="rotate(' . $rot . ',' . $xstart . ',' . $ystart . ')"';
        $text = '<text alignment-baseline="central" text-anchor="middle" style="font-size:8px;"';
        $text .= ' fill="black"';
        $text .= ' x="' . $xtxt . '" y="' . $ytxt . '"';
        $text .= $transform . '>';
        $text .= $name . '</text>';
        $rect = '<rect height="' . $h . '" width="' . $w;
        $rect .= '" x="' . $x . '" y="' . $y;
        $rect .= '" rx="' . $rx . '" ry="' . $ry;
        $rect .= '" fill="' . $fillcolor . '" fill-opacity="0.4"';
        $rect .= $transform . '>';
        $rect .= '</rect>';
        $this->karte .= '<a xlink:href="#" onclick="alert('. $id .');">' . $rect . $text . '</a>';
    }
    
    private function drawRoadStartDest($name, $xstart, $ystart, $xend, $yend, $width, $fillcolor) {
        $length = hypot($xend - $xstart, $yend - $ystart);
        $angle = asin(($yend - $ystart) / $length);
        $rot = ($angle / pi()) * 180;
        drawRoad($href, $name, $xstart, $ystart, $length, $width, $fillcolor, $rot);
    }
    
    public function StrResponsiv(){
        $str = $this->db->get_results("SELECT * FROM ". STR ." ORDER BY rand()");
        $y = 20;
        for($i = 1; $i <= 20; $i++){
            if($this->db->num_rows("SELECT id FROM ". STRI ." WHERE str_id = '". $str->{$i}->id ."' AND std_id = '". $this->user['stadt'] ."' AND besitzer = '". $this->session['uid'] ."' ") == 1){
                $bgcolor = 'green';
            }else{
                $bgcolor = 'red';
            }
            if($i <= 10){
                $this->drawRoad($str->{$i}->id,$str->{$i}->name, 0, $y, 500, 10, $bgcolor);
            }elseif($i > 10){
                $this->drawRoad($str->{$i}->id,$str->{$i}->name, $y, 0, 500, 10, $bgcolor, 90);
            }
            if($i == 10){ $y = 20; }else{ $y += 50;}
        }
        
        return $this->karte;
    }
damit wird dann auch die straße in rot oder grün angezeigt. so kann man gut unterscheiden, ob diese schon in dem besitz ist oder noch nicht und eine transparenz ist auch noch dazu gekommen :-)

ich danke euch beiden wie verrückt für die hilfe die ihr hier gegeben habt :-)
 
Zurück