Drawing zakrzywione linie ze strzałkami SVG do div div

Question

Chcę narysować dwie zakrzywione linie za pomocą strzałek SVG do łączenia dwóch elementów, które wskazują, że tam iz powrotem, jak to:

Czytałam trochę o SVG, ale nie jestem całkowicie pewien, jak utworzyć linię, która jest pionowa.

Po drugie, jeśli SVG przyjmuje współrzędne, czy muszę znaleźć położenie współrzędnych elementów przed utworzeniem rysunku SVG? Czy musi zostać ponownie narysowany, jeśli rozmiar okna jest dostosowany?

Answer 1

Wykonaj element svg, który (niewidoczny) stanowi podłoże dla całego dokumentu. To przytrzyma obie strzałki. Wstaw dwa elementy svg path (strzałki), których współrzędne początkowe i końcowe są obliczane na podstawie pozycji elementów div, które mają być połączone, i których krzywa jest tworzona w dowolny sposób na podstawie współrzędnych początkowych i końcowych.

W poniższym przykładzie kliknij "Uruchom fragment kodu". Następnie kliknij i przeciągnij jeden z elementów div, aby zobaczyć, jak strzałki są tworzone dynamicznie, tj. Poruszają się za pomocą elementów div. jQuery i jQueryUI są używane w fragmencie kodu, aby umożliwić łatwe przeciąganie elementów div i nie mają nic wspólnego z tworzeniem i używaniem strzałek.

W tym przykładzie dwie strzałki zaczynają się i kończą na środku boków elementów div. Szczegóły krzywej są oczywiście do ciebie. Linie strzałek są konstruowane przy użyciu atrybutu d svg path. W tym przykładzie "M" to współrzędne "moveTo", w którym rozpoczyna się ścieżka, a punkty "C" są pierwszym i drugim punktem kontrolnym oraz końcową współrzędną dla sześciennej krzywej Beziera. Musisz zrozumieć, czym one są, ale są ogólnym sposobem tworzenia gładkich krzywych w elemencie svg. Groty są dodawane przy użyciu elementu svg <marker>, który można przeczytać o here.

Bardziej skomplikowany dokument wymagałby większej uwagi w celu ustalenia początkowych i końcowych współrzędnych elementów svg path, tj. Strzałek, ale ten przykład daje co najmniej miejsce do rozpoczęcia.

Odpowiedzi na konkretne pytania:

• Jeśli SVG bierze współrzędnych, muszę znaleźć położenie elementów współrzędnych przed utworzeniem rysunku SVG? Tak, tak jak zrobiłem w moim kodzie.

• Czy należy ponownie rysować, jeśli rozmiar okna jest regulowany? Prawdopodobnie tak, w zależności od tego, co dzieje się z samymi elementami div przy zmianie rozmiaru okna.

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>