在两个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屋!