Question

157

Draw an arrow between two divs

rated 0 times [ 163] [ 6] / answers: 1 / hits: 69259 / 11 Years ago, sun, november 17, 2013, 12:00:00

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 )

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

dusty

Add To Favorites

Follow

Total Points: 739

Total Questions: 97

Total Answers: 85

Location: Angola

Member since Wed, Apr 13, 2022

2 Years ago

dusty questions

1 js fetch post works, but php is empty

Mon, Dec 14, 20, 00:00, 4 Years ago

1 Nested function component ReactJS

Mon, Mar 23, 20, 00:00, 4 Years ago

1 React Native - How do we know what child element is contained by parent?

Mon, Mar 16, 20, 00:00, 4 Years ago

1 Postman : How to assert all array elements exist in other array?

Fri, Jul 12, 19, 00:00, 5 Years ago

1 How to fix this error Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Document': 'div.com[min=]' is not a valid selector?

Thu, Jun 13, 19, 00:00, 5 Years ago

View All

answered 11 Years ago jaden · Accepted Answer

You might consider SVG.

enter

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>