Menu
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 )
211
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> I have no idea whether anybody looks at this thread anymore but here's the solution i used, it differs only slightly from @markE answer in that this answer makes it much easier to specify exactly where the line needs to start and stop.
<head> <style> .arrow{ stroke:rgb(0,0,0); stroke-width:2; marker-end:url(#markerArrow) } </style> </head> <body> <svg height="210" width="500"> <defs> <marker id="markerArrow" markerWidth="13" markerHeight="13" refX="2" refY="6" orient="auto"> <path d="M2,2 L2,11 L10,6 L2,2" style="fill: #000000;" /> </marker> </defs> <line x1="0" y1="0" x2="200" y2="100" class="arrow" /> </svg> </body> All you have to do is change the x and y coordinates of the line! I used this answer in my react app and it worked beautifully. And heres the fiddle.
.arrow { stroke: rgb(0, 0, 0); stroke-width: 2; marker-end: url(#markerArrow) }<svg height="210" width="500"> <defs> <marker id="markerArrow" markerWidth="13" markerHeight="13" refX="2" refY="6" orient="auto"> <path d="M2,2 L2,11 L10,6 L2,2" style="fill: #000000;" /> </marker> </defs> <line x1="0" y1="0" x2="200" y2="100" class="arrow" /> </svg>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
