[英]JS draw an arrow pointing from one div to another
I have the following code: 我有以下代码:
<div id="parent">
<div class="child" id="air1">Medium 1</div>
<div class="child" id="glass">Medium 2</div>
<div class="child" id="air2">Medium 1</div>
</div>
<style>
#parent {
background: #999;
padding: 0px;
}
#glass {
background: #666;
}
.child {
background: #ccc;
height: 200px;
margin: 0px;
}
</style>
I want to draw an arrow from #air1 into #glass using an svg. 我想使用svg从#air1中将箭头绘制成#glass。 I added the following code into the div to draw an example arrow:
我将以下代码添加到div中以绘制示例箭头:
<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>
I don't want the arrow pointed in a random direction though, I want it to point into #glass like this: 我不希望箭头指向随机方向,我希望它指向#glass,如下所示:
Also, how would I go about drawing a less steep arrow like this as well: 另外,我如何绘制这样一个不那么陡峭的箭头:
How can I do this? 我怎样才能做到这一点?
You can achieve that by using positioning (inserting the svg into the first section and set it to position: absolute;
) and adjusting the offset of the path element. 您可以通过使用定位 (将svg插入第一部分并将其设置为
position: absolute;
)并调整path元素的偏移量来实现。 To make the arrow pointing down, just use a negative value for the second value of the path description attribute. 要使箭头指向下方,只需对路径描述属性的第二个值使用负值。
For more information see w3schools about path . 有关更多信息,请参阅w3schools关于路径 。
#parent { background: #999; padding: 0px; } #glass { background: #666; } .child { background: #ccc; height: 200px; margin: 0px; position: relative; } svg { position: absolute; left: 0; }
<div id="parent"> <div class="child" id="air1">Medium 1 <svg width="400" height="200"> <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="M-600,-10 L300,195" style="stroke:red; stroke-width: 1.25px; fill: none; marker-end: url(#arrow);" /> </svg> </div> <div class="child" id="glass">Medium 2</div> <div class="child" id="air2">Medium 1</div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.