Question 182933 in Html Question posted in
Some basic documentation can be found here.

Is there a way to draw a line between two points on a HTML page without Canvas?

I’m designing a web interface for a robotic arm, and I need a way to draw lines between points in a HTML div element, given a start (x, y) and a end (x, y). I’d rather not use a canvas, because I need the lines to be elements themselves (They should have onclick events and CSS styles). Maybe something with SVG? Note that this is different from questions like this, as that question was trying to connect elements, whereas I’m trying to connect points inside an element.

<div id="somediv">
    <!--This div is 100px * 100px, I need to draw a line 4px thick from (23, 24) to (87, 96)-->
</div>

It would actually be preferable if I could create the line based on a single point and angle, but the math to convert that to two points is easy.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I modified @Keith's answer, making it into a function that draws a line between given points in a element:

    function drawLine(x1, y1, x2, y2, line_class,     element=document.documentElement) {
            element.innerHTML += `<svg><line class=${line_class} x1="${x1}" y1="${y1}" x2="${x2}" y2="${y2}"/></svg>`
}

drawLine(20, 25, 89, 78, "line", document.getElementById("adiv")) 
    .line {
    stroke-width: 5px;
    stroke: black;
}
#adiv {
    height: 100px;
    width: 100px;
    background-color: blue;
}
    <div id="adiv">
</div>


  2. 0

    The basic idea here is to place the SVG on top of the DIV element, make the DIV position relative, and the SVG absolute to do this. And then you can draw the SVG to any x/y point you like.

    And as expected, events like click work with SVG, try clicking the line, and double clicking the yellow box.

    example ->

    document.querySelector('#theline').
  addEventListener('click', 
    () => alert("line clicked"));

document.querySelector('#somediv').
  addEventListener('dblclick', 
    () => alert('box double clicked'));
    #somediv {
  width: 100px;
  height: 100px;
  background-color: yellow;
  position: relative;
}

#svg {
  position: absolute;
  top: 0px;
  left: 0px;
}
    <div id="somediv">
    <!--This div is 100px * 100px, I need to draw a line 4px thick from (23, 24) to (87, 96)-->
   <svg id="svg" width="100" height="100"> 
      <line 
        style="cursor:pointer"
        id="theline" 
        x1="23" y1="24" x2="87" y2="96" stroke="black" stroke-width="4"/>
   </svg>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search