JS繪制一個從一個div指向另一個div的箭頭

Question

我有以下代碼：

<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>

我想使用svg從＃air1中將箭頭繪制成#glass。 我將以下代碼添加到div中以繪制示例箭頭：

<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>

我不希望箭頭指向隨機方向，我希望它指向#glass，如下所示：

另外，我如何繪制這樣一個不那么陡峭的箭頭：

我怎樣才能做到這一點？

Answer 1

您可以通過使用定位 （將svg插入第一部分並將其設置為position: absolute; ）並調整path元素的偏移量來實現。 要使箭頭指向下方，只需對路徑描述屬性的第二個值使用負值。

有關更多信息，請參閱w3schools關於路徑 。

 #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>