JS einen Pfeil von einem div ziehen auf einen anderen

Question

ich den folgenden Code haben:

<div id="parent"> 
    <div class="child" id="air1">Medium 1</div> 
    <div class="child" id="glass">Medium 2</div> 
    <div class="child" id="air2">Medium 1</div> 
</div> 

<style> 
    #parent { 
    background: #999; 
    padding: 0px; 
    } 
    #glass { 
    background: #666; 
    } 
    .child { 
    background: #ccc; 
    height: 200px; 
    margin: 0px; 
    } 
</style> 

Ich möchte einen Pfeil von # air1 in #glass mit einem svg ziehen. Ich habe den folgenden Code in das div ein Beispiel Pfeil zu zeichnen:

<svg width="300" height="100"> 

    <defs> 
     <marker id="arrow" markerWidth="13" markerHeight="13" refx="2" refy="6" orient="auto"> 
      <path d="M2,2 L2,11 L10,6 L2,2" style="fill:red;" /> 
     </marker> 
    </defs> 

    <path d="M30,150 L100,50" 
      style="stroke:red; stroke-width: 1.25px; fill: none; 
       marker-end: url(#arrow);" 
    /> 

</svg> 

Ich will nicht der Pfeil obwohl in einer zufälligen Richtung spitz, ich es in #glass wie diese verweisen soll:

Wie würde ich auch einen weniger steilen Pfeil so zeichnen:

Wie kann ich das tun?

Answer 1

Sie können dies erreichen, indem Sie positioning verwenden (indem Sie die SVG in den ersten Abschnitt einfügen und auf position: absolute; setzen) und den Offset des Pfadelements anpassen. Um den Pfeil nach unten zu zeigen, verwenden Sie einfach einen negativen Wert für den zweiten Wert des Pfadbeschreibungsattributs.

Weitere Informationen finden Sie unter w3schools about path.

#parent { 
 
    background: #999; 
 
    padding: 0px; 
 
} 
 
#glass { 
 
    background: #666; 
 
} 
 
.child { 
 
    background: #ccc; 
 
    height: 200px; 
 
    margin: 0px; 
 
    position: relative; 
 
} 
 
svg { 
 
    position: absolute; 
 
    left: 0; 
 
}

<div id="parent"> 
 
    <div class="child" id="air1">Medium 1 
 
    <svg width="400" height="200"> 
 
     <defs> 
 
     <marker id="arrow" markerWidth="13" markerHeight="13" refx="2" refy="6" orient="auto"> 
 
      <path d="M2,2 L2,11 L10,6 L2,2" style="fill:red;" /> 
 
     </marker> 
 
     </defs> 
 
     <path d="M-600,-10 L300,195" style="stroke:red; stroke-width: 1.25px; fill: none; marker-end: url(#arrow);" /> 
 
    </svg> 
 
    </div> 
 
    <div class="child" id="glass">Medium 2</div> 
 
    <div class="child" id="air2">Medium 1</div> 
 
</div>