在两个div之间绘制箭头 [英] Draw an arrow between two divs

问题描述

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

其实我需要这样的东西：

因此，要在包含一些正方形（div）的div上绘制箭头。

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

我在画布方向上看，但偶然发现画布上没有显示我的div -index应该有帮助）
但仍然奇怪的是，我找不到一个现成的解决方案的一个问题，我似乎经常出现。
（解释一些事情在网站的箭头几乎是必须的）

解决方案

你可能考虑SVG。 p>



>

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

确保设置orient = auto因此箭头将被旋转以匹配线的斜率。

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

以下是代码和小提琴： http：/ /jsfiddle.net/m1erickson/9aCsJ/

 < svg width =300height =100 > 
 
< defs> 
< marker id =arrowmarkerWidth =13markerHeight =13refx =2refy =6orient =auto> 
< path d =M2,2 L2,11 L10,6 L2,2style =fill：red; /> 
< / marker> 
< / defs> 
 
< path d =M30,150 L100,50
 style =stroke：red; stroke-width：1.25px; fill：none; 
 marker-end ：url（#arrow）; 
 /> 
 
< / svg> 
  

I'm searching for a solution of the question that I expected to be solved already. But I saw only big projects with a lot of features but no simple solution.

Actually I need to get something like that:

So to get an arrow drawing over a div containing some squares (divs)

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

I looked in the canvas direction but stumbled on tha canvas was not visible behind my divs ( maybe some z-index should help ) But still strange that I couldn't find some ready-made solution of a problem that seems to me coming up often. ( to explain some thing on the site arrows are almost a must )

解决方案

You might consider SVG.

In particular, you can use a line with a marker-end shaped with an arrow-path.

Be sure to set orient=auto so the arrowhead will be rotated to match the slope of the line.

Since SVG is a DOM element, you can control the start/end position of the line in javascript.

Here is code and a 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>

这篇关于在两个div之间绘制箭头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！