我正在寻找我期望已经解决的问题的解决方案。 但我只看到了具有很多功能但没有简单解决方案的大型元素。
实际上我需要得到这样的东西:
所以要在包含一些正方形 (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 应该有帮助) 但奇怪的是,对于一个在我看来经常出现的问题,我找不到现成的解决方案。 (要在网站上解释一些事情箭头几乎是必须的)
最佳答案
您可能会考虑 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>
关于javascript - 在两个 div 之间画一个箭头,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20037122/