在两个div之间绘制箭头

Alexander P 发表于 Dev

亚历山大·P

我正在寻找我希望已经解决的问题的解决方案。但是我只看到具有许多功能但没有简单解决方案的大型项目。

其实我需要得到这样的东西：

因此要在包含一些正方形（div）的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>

我朝画布方向看，但偶然发现div后面看不到画布（也许有些z-index应该有帮助），但仍然很奇怪，因为我找不到一些现成的问题的现成解决方案，。（要解释网站上的某些内容，箭头几乎是必须的）

牌

您可能会考虑SVG。

在此处输入图片说明

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

确保将orient = auto设置为使箭头旋转以匹配直线的斜率。

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

这是代码和小提琴：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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。