Zeichnung gekrümmten SVG Pfeillinien von div div

Question

ich zwei gekrümmten Pfeil Linien mit SVG zeichnen möchten zwei Elemente zu verbinden, um anzuzeigen, sie gehen hin und her, wie folgt aus:

ich gelesen habe ein wenig über SVG, aber ich bin mir nicht ganz sicher, wie man eine vertikale Linie erstellt.

Zweitens, wenn SVG Koordinaten nimmt, muss ich die Koordinatenposition der Elemente vor dem Erstellen der SVG-Zeichnung finden? Muss es neu gezeichnet werden, wenn die Fenstergröße angepasst wird?

Answer 1

Ein svg Element erstellen, das (unsichtbar) dem gesamten Dokument zugrunde liegt. Dies wird beide Pfeile enthalten. Fügen Sie zwei Svg path Elemente (die Pfeile) ein, deren Anfangs- und Endkoordinaten basierend auf den Positionen der zu verbindenden divs berechnet werden und deren Kurve basierend auf diesen Anfangs- und Endkoordinaten beliebig erstellt wird.

Für das folgende Beispiel klicken Sie auf "Code-Snippet ausführen". Dann klicke und ziehe eines der divs, um zu sehen, wie die Pfeile dynamisch erstellt werden, d. H. Sie bewegen sich mit den divs. jQuery und jQueryUI werden im Code-Snippet verwendet, um die einfache Dragierbarkeit der divs zu ermöglichen und haben nichts mit der Erstellung und Verwendung der Pfeile zu tun.

Dieses Beispiel hat zwei Pfeile, die in der Mitte der divs-Seiten beginnen und enden. Die Details der Kurve liegen natürlich bei Ihnen. Die Pfeillinien werden unter Verwendung des d Attributs der Svg path konstruiert. In diesem Beispiel ist "M" die "moveTo" -Koordinate, bei der der Pfad beginnt, und die "C" -Punkte sind der erste und der zweite Kontrollpunkt und die Endkoordinate für eine kubische Bezierkurve. Sie müssen look those up zu verstehen, was sie sind, aber sie sind eine allgemeine Möglichkeit zum Erstellen von weichen Kurven in einem Svg-Element. Die Pfeilspitzen werden unter Verwendung eines Svg <marker> Elements hinzugefügt, das Sie über lesen können.

Ein komplexeres Dokument würde mehr Sorgfalt benötigen, um die Anfangs- und Endkoordinaten der Svg path Elemente, d. H. Die Pfeile, zu bestimmen, aber dieses Beispiel gibt Ihnen zumindest einen Platz zu beginnen.

Antworten auf Ihre speziellen Fragen:

• Wenn SVG nimmt Koordinaten, muss ich die Position der Elemente koordinieren finden, bevor die SVG-Zeichnung zu erstellen? Ja, wie ich es in meinem Code getan habe.

• Muss es neu gezeichnet werden, wenn die Fenstergröße angepasst wird? Wahrscheinlich ja, abhängig davon, was mit den divs selbst passiert, wenn das Fenster in der Größe geändert wird.

var divA  = document.querySelector("#a"); 
 
var divB  = document.querySelector("#b"); 
 
var arrowLeft = document.querySelector("#arrowLeft"); 
 
var arrowRight = document.querySelector("#arrowRight"); 
 

 
var drawConnector = function() { 
 
    var posnALeft = { 
 
    x: divA.offsetLeft - 8, 
 
    y: divA.offsetTop + divA.offsetHeight/2 
 
    }; 
 
    var posnARight = { 
 
    x: divA.offsetLeft + divA.offsetWidth + 8, 
 
    y: divA.offsetTop + divA.offsetHeight/2  
 
    }; 
 
    var posnBLeft = { 
 
    x: divB.offsetLeft - 8, 
 
    y: divB.offsetTop + divA.offsetHeight/2 
 
    }; 
 
    var posnBRight = { 
 
    x: divB.offsetLeft + divB.offsetWidth + 8, 
 
    y: divB.offsetTop + divA.offsetHeight/2 
 
    }; 
 
    var dStrLeft = 
 
     "M" + 
 
     (posnALeft.x  ) + "," + (posnALeft.y) + " " + 
 
     "C" + 
 
     (posnALeft.x - 100) + "," + (posnALeft.y) + " " + 
 
     (posnBLeft.x - 100) + "," + (posnBLeft.y) + " " + 
 
     (posnBLeft.x  ) + "," + (posnBLeft.y); 
 
    arrowLeft.setAttribute("d", dStrLeft); 
 
    var dStrRight = 
 
     "M" + 
 
     (posnBRight.x  ) + "," + (posnBRight.y) + " " + 
 
     "C" + 
 
     (posnBRight.x + 100) + "," + (posnBRight.y) + " " + 
 
     (posnARight.x + 100) + "," + (posnARight.y) + " " + 
 
     (posnARight.x  ) + "," + (posnARight.y); 
 
    arrowRight.setAttribute("d", dStrRight); 
 
}; 
 

 
$("#a, #b").draggable({ 
 
    drag: function(event, ui) { 
 
    drawConnector(); 
 
    } 
 
}); 
 

 
drawConnector();

html, 
 
body { 
 
    width: 100%; 
 
    height: 100%; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
#a, #b { 
 
    color: white; 
 
    text-align: center; 
 
    padding: 10px; 
 
    position: fixed; 
 
    width: 100px; 
 
    height: 20px; 
 
    left: 100px; 
 
} 
 
#a { 
 
    background-color: blue; 
 
    top: 20px; 
 
} 
 
#b { 
 
    background-color: red; 
 
    bottom: 20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script> 
 
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"> 
 
    <defs> 
 
    <marker id="arrowhead" viewBox="0 0 10 10" refX="3" refY="5" 
 
     markerWidth="6" markerHeight="6" orient="auto"> 
 
     <path d="M 0 0 L 10 5 L 0 10 z" /> 
 
    </marker> 
 
    </defs> 
 
    <g fill="none" stroke="black" stroke-width="2" marker-end="url(#arrowhead)"> 
 
    <path id="arrowLeft"/> 
 
    <path id="arrowRight"/> 
 
    </g> 
 
</svg> 
 
<div id="a">Div 1</div> 
 
<div id="b">Div 2</div>