发表新帖
发表新帖

Draw an arrow between two divs

后端 未结
关注
5 885
不思量自难忘°
不思量自难忘° 2021-01-31 02:45

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

相关标签:
5条回答
  • 清歌不尽
    2021-01-31 03:22

    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>

    0 讨论(0)
  • 遇见更好的自我
    2021-01-31 03:23

    You might consider SVG.

    enter image description here

    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>
    0 讨论(0)
  • 一向
    2021-01-31 03:32

    Use a library, like JSPlumb: https://jsplumbtoolkit.com/

    0 讨论(0)
  • 时光取名叫无心
    2021-01-31 03:34

    Canvas and jCanvas

    Based on your needs, you should definitely check out using Canvas and the jCanvas library. It makes things like this a breeze.

    I ventured down the road of doing everything with DIVs and jQuery but it always fell short on interactivity and quality. This really kicks open the doors without adding code complexity.

    Hope that helps others, like me.

    JP

    EDIT 2017 05 20:

    I used to have an example here that linked to the jCanvas' sandbox with all the code you needed to draw an arrow between two elements and drag both of those elements around the canvas. However, that link no longer works and I don't have the code anywhere else.

    So, I still think you should check out jCanvas but unfortunately I don't have any sample code to start you off.

    0 讨论(0)
  • -上瘾入骨i
    2021-01-31 03:40

    Its fairly simple to create the arrow head. See this example on CSS Tricks. Maybe using this inside a container which has the arrow line might do it.

    0 讨论(0)
 看不清?
提交回复
热议问题