javascript - 在两个 div 之间画一个箭头

Question

我正在寻找我期望已经解决的问题的解决方案。但我只看到了具有很多功能但没有简单解决方案的大型元素。

实际上我需要得到这样的东西:

所以要在包含一些正方形 (divs) 的 div 上绘制一个箭头

<div id="container">
<div class="white_field"></div>
<div id="1" class="black_field">
<br style="clear:both;">    
<div id="2" class="black_field">
<div class="white_field"></div>
<br style="clear:both;">    
<div id="3" class="black_field">
<div class="white_field"></div>
</div>

我朝 Canvas 方向看，但偶然发现 Canvas 在我的 div 后面不可见(也许一些 z-index 应该有帮助)但奇怪的是，对于一个在我看来经常出现的问题，我找不到现成的解决方案。(要在网站上解释一些事情箭头几乎是必须的)

Answer 1

您可能会考虑 SVG。

特别是，您可以使用带有箭头路径形状的标记端的线。

一定要设置 orient=auto，这样箭头会旋转以匹配直线的斜率。

由于 SVG 是 DOM 元素，您可以在 javascript 中控制行的开始/结束位置。

这是代码和 fiddle :http://jsfiddle.net/m1erickson/9aCsJ/

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