Rysowanie strzałek powyżej HTML

13

Mam tabelę HTML i chcę narysować strzałkę z jednej komórki do drugiej. Na przykład tak:

arrow-above-html-table

Jak można to zrobić?

Przykładowy HTML:

<html>

 <body>

<table>
 <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td id="end">9</td><tr>
 <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr>
 <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr>
 <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr>
 <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr>
 <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr>
 <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr>
 <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr>
 <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr>
 <tr><td id="start">0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr>


</body>

</html>

Jeśli zmienisz rozmiar przeglądarki, strzałka powinna pozostać w (nowej) pozycji początkowej / końcowej.

javascript html svg guettli
źródło
3
Próbowałeś już czegoś samodzielnie? Wygląda na to, że można to zrobić za pomocą javascript i css
Alexander Kludt
@AlexanderKludt w tym przypadku nie mam pojęcia. Nie mogłem znaleźć użytecznych wskazówek w mojej ulubionej wyszukiwarce.
guettli
Czy możemy założyć, że wszystkie komórki mają równą wysokość i szerokość jak w przykładzie?
bitifet
... Jeśli znany jest również współczynnik kształtu, można to zrobić za pomocą css (na podstawie komórki x, y) i kontrolowanego przez funkcję js działającą na zmienne css. Aby użyć selektorów, należy zbadać jego kontekst, aby odgadnąć współrzędne w funkcji. Nie znam proporcji Nadal o tym myślę ...
bitifet
1
@ guettli oczywiście! ale wtedy nie będzie to czyste rozwiązanie CSS (nawet prawie), wtedy będziesz musiał wykryć zmiany rozmiaru i ponownie obliczyć i wstrzyknąć coś aspekt_ratio css var. Jest to prawdopodobne, ale nie tak wspaniałe jak czyste rozwiązanie css ;-)
bitifet

Odpowiedzi:

6

Przy odrobinie JavaScript i CSS możesz to osiągnąć bez płótna lub SVG. Oto przykład:

function getPosition(el) {
   return {
     x: el.offsetLeft + el.offsetWidth / 2,
     y: el.offsetTop + el.offsetHeight / 2
   };
 }

 function getDistance(a, b) {
   const from = getPosition(a);
   const to = getPosition(b);

   return {
   //https://stackoverflow.com/a/17628488/529024
     distance: Math.hypot(from.x - to.x, from.y - to.y),
     angle: Math.atan2(to.x - from.x, from.y - to.y) * 180 / Math.PI,
     position: {
       start: from,
       end: to
     }
   }
 }

function init(){
// Get values and elements then set style
 const values = getDistance(
   document.getElementById("start"),
   document.getElementById("end")
 );
 
 
 let wrapper = document.getElementById('wrapper');
 let arrow = document.getElementById('arrow');
 let bottom = wrapper.offsetHeight - values.position.start.y;
 arrow.style.height = values.distance + "px";
 arrow.style.transform = `rotate(${values.angle}deg)`;
 arrow.style.bottom = bottom + "px";
 arrow.style.left = values.position.start.x + "px";
}

init();

window.addEventListener('resize', function(){
 init();
});
#wrapper {
  position: relative;
  left: 50px;
  top: 100px;
}

#arrow {
  position: absolute;
  width: 2px;
  background-color: red;
  transform-origin: bottom center;
}

#arrow::before {
    position: absolute;
    height: 0px;
    width: 0px;
    border: 6px solid transparent;
    border-bottom: 8px solid red;
    content: "";
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
  }
<div id='wrapper'>
  <div id='arrow'></div>
  <table>
    <tr>
      <td >0</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
      <td id="end">9</td>
    </tr>
    <tr>
      <td>0</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
      <td>9</td>
    </tr>
    <tr>
      <td>0</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
      <td>9</td>
    </tr>
    <tr>
      <td>0</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
      <td>9</td>
    </tr>
    <tr>
      <td>0</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
      <td>9</td>
    </tr>
    <tr>
      <td>0</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
      <td>9</td>
    </tr>
    <tr>
      <td>0</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
      <td>9</td>
    </tr>
    <tr>
      <td>0</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
      <td>9</td>
    </tr>
    <tr>
      <td>0</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
      <td>9</td>
    </tr>
    <tr>
      <td id="start">0</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
      <td>9</td>
    </tr>
  </table>
</div>
Rozwiń fragment kodu

Kalimah
źródło
Wygląda na błąd: Twoja strzała jest inna. Kończy się na pierwszym zero.
guettli
Zmieniłem wartości. Zaktualizowałem próbkę teraz, aby odzwierciedlić twój przykład.
Kalimah
Jeśli użyję ctrl -(zmniejsz rozmiar), strzałka traci pozycję końcową.
guettli
5

Możesz użyć mojego rozwiązania jeszcze nie ukończyć strzałki rysowania, pozwól stworzyć płótno i narysować linię z dwóch punktów, na podstawie obliczenia punktu początkowego i końcowego.

Example running: https://jsfiddle.net/tabvn/uk7hsj3a    

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
</head>
<body>
<table id="my-table">
    <tr>
        <td>0</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td id="end">9</td>
        </tr>
    <tr>
        <td>0</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        </tr>
    <tr>
        <td>0</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        </tr>
    <tr>
        <td>0</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        </tr>
    <tr>
        <td>0</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        </tr>
    <tr>
        <td>0</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        </tr>
    <tr>
        <td>0</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        </tr>
    <tr>
        <td>0</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        </tr>
    <tr>
        <td>0</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        </tr>
    <tr>
        <td id="start">0</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr>
</table>

<script type="text/javascript">

  var table = document.getElementById('my-table')
  var startElement = document.getElementById('start')
  var endElement = document.getElementById('end')

  var startPoint = {x: startElement.offsetLeft + table.offsetLeft, y: startElement.offsetTop + table.offsetTop}
  var endPoint = {x: endElement.offsetLeft + table.offsetLeft, y: endElement.offsetTop + table.offsetTop}
  
  var canvas = document.createElement('canvas')
  canvas.width = table.clientWidth
  canvas.height = table.clientHeight
  canvas.style.position = 'absolute'
  canvas.style.top = startPoint.y < endPoint.y ? startPoint.y + 'px' : endPoint.y + 'px'
  canvas.style.left = startPoint.x < endPoint.x ? startPoint.x + 'px' : endPoint.x + 'px'

  var ctx = canvas.getContext('2d')

  ctx.beginPath()
  ctx.strokeStyle = 'red'
  ctx.fillStyle = 'red'
  ctx.moveTo(startPoint.x - (startElement.clientWidth / 2), startPoint.y)
  ctx.lineTo(endPoint.x - (endElement.clientWidth / 2), endPoint.y)
  ctx.stroke()
  document.body.insertBefore(canvas, table, 30)

</script>

</body>
</html>
Rozwiń fragment kodu

Toan
źródło
Jeśli zmienię rozmiar ekranu (ctrl + i ctrl -), wówczas czerwona linia traci pozycję.
guettli,
3
więc dodajmy zmianę rozmiaru, możemy zgrupować rozwiązanie w funkcji, a następnie można odsłuchać zmianę rozmiaru okna i ponownie wywołać renderowanie canvas.
Toan
4

Rozwiązanie Javascript:

drawLine();

function drawLine () {
  var table = document.getElementById('my-table')
  var startElement = document.getElementById('start')
  var endElement = document.getElementById('end')

  let arrowRadius = 10;

  let xStart = null;
  let xEnd = null;
  if (startElement.offsetLeft > endElement.offsetLeft) {
    xStart = startElement.offsetLeft + (arrowRadius/2);//to add padding just add more wherever theres this pattern 
    xEnd = endElement.offsetLeft + endElement.offsetWidth / 2;
  } else if (startElement.offsetLeft < endElement.offsetLeft) {
    xStart = startElement.offsetLeft + startElement.offsetWidth - (arrowRadius/2);
    xEnd = endElement.offsetLeft;
  } else {
    xStart = startElement.offsetLeft + startElement.offsetWidth / 2;
    xEnd = endElement.offsetLeft + endElement.offsetWidth / 2;
  }

  let yStart = null;
  let yEnd = null;
  if (startElement.offsetTop > endElement.offsetTop) {
    yStart = startElement.offsetTop + (arrowRadius/2);
    yEnd = endElement.offsetTop + endElement.offsetHeight + (arrowRadius/2);
  } else if (startElement.offsetTop < endElement.offsetTop) {
    yStart = startElement.offsetTop + startElement.offsetHeight - (arrowRadius/2);
    yEnd = endElement.offsetTop - (arrowRadius/2);
  } else {
    yStart = startElement.offsetTop + startElement.offsetHeight / 2;
    yEnd = endElement.offsetTop + endElement.offsetHeight / 2;
  }

  let coordBegin = {
    x: xStart,
    y: yStart
  };
  let coordEnd = {
    x: xEnd,
    y: yEnd
  };

  var canvas = document.createElement('canvas')
  canvas.width = table.offsetWidth
  canvas.height = table.offsetHeight
  canvas.style.position = 'absolute'

  var ctx = canvas.getContext('2d')
  drawArrowhead(ctx, coordBegin, coordEnd, arrowRadius);
  ctx.beginPath()
  ctx.strokeStyle = 'red'
  ctx.fillStyle = 'red'
  ctx.moveTo(coordBegin.x, coordBegin.y)
  ctx.lineTo(coordEnd.x, coordEnd.y)
  ctx.stroke()

  document.body.insertBefore(canvas, table)
}




function drawArrowhead(context, from, to, radius) {
    var x_center = to.x;
    var y_center = to.y;

    var angle;
    var x;
    var y;

    context.beginPath();

    angle = Math.atan2(to.y - from.y, to.x - from.x)
    x = radius * Math.cos(angle) + x_center;
    y = radius * Math.sin(angle) + y_center;

    context.moveTo(x, y);

    angle += (1.0/3.0) * (2 * Math.PI)
    x = radius * Math.cos(angle) + x_center;
    y = radius * Math.sin(angle) + y_center;

    context.lineTo(x, y);

    angle += (1.0/3.0) * (2 * Math.PI)
    x = radius *Math.cos(angle) + x_center;
    y = radius *Math.sin(angle) + y_center;

    context.lineTo(x, y);

    context.closePath();
    context.fillStyle = 'red';
    context.fill();
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
</head>
<body>
<table id="my-table">
    <tr>
        <td>0</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td id="end">9</td>
        </tr>
    <tr>
        <td>0</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        </tr>
    <tr>
        <td>0</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        </tr>
    <tr>
        <td>0</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        </tr>
    <tr>
        <td>0</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        </tr>
    <tr>
        <td>0</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        </tr>
    <tr>
        <td>0</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        </tr>
    <tr>
        <td>0</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        </tr>
    <tr>
        <td>0</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        </tr>
    <tr>
        <td id="start">0</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr>
</table>

</body>
</html>
Rozwiń fragment kodu

David Machado
źródło
Używam chromu, a czerwona linia idzie w dół, zaczynając od pierwszego „2”.
guettli
Jak się przypuszcza, skoro identyfikatory są na tych pozycjach
David Machado
@ guettli to działa dla każdej pozycji, wystarczy zmienić identyfikator i uwzględnia pozycję początkową i końcową, więc rysuje strzałkę z odpowiednim wyrównaniem
David Machado
Zaktualizowałem twoją odpowiedź. Strzałka wskazuje teraz na pierwszą „9”, jak w pytaniu. Dziękuję za tę odpowiedź.
guettli
3

Tak bym to zrobił: element svg używa wielkości tabeli dla wartości viewBox. Obliczasz rozmiar i położenie komórek, które chcesz skorelować, i użyj tej pozycji do narysowania linii. Znacznik służy do końcówki strzały.

Zmień rozmiar okna: 

let cells = Array.from(document.querySelectorAll("td"));
// index of cells to be correlated
let n1 = 90;
let n2 = 9;
// a function to draw the arrow
function drawArrow(){
//get the size of the table
let size = theTable.getBoundingClientRect();
//set the viewBox attribute for the svg element
theSVG.setAttributeNS(null, "viewBox", `0 0 ${size.width} ${size.height}`)
//get the size and the position of the cells
let c1 = cells[n1].getBoundingClientRect();
let c2 = cells[n2].getBoundingClientRect();
//set the x1, y1, x2,y2 attributes of the line
theLine.setAttributeNS(null,"x1",`${c1.left + c1.width/2}`);
theLine.setAttributeNS(null,"y1",`${c1.top + c1.height/2}`);
theLine.setAttributeNS(null,"x2",`${c2.left + c2.width/2}`);
theLine.setAttributeNS(null,"y2",`${c2.top + c1.height/2}`); 
}


drawArrow()


window.setTimeout(function() {
  drawArrow()
  window.addEventListener('resize', drawArrow, false);
}, 15);
body {
  margin: 0;
  padding: 0;
}
table,svg{
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  position:absolute;
}
td {
  border: 1px solid #d9d9d9;
  padding: 0.5em;
  text-align: center;
}

svg{background:rgba(0,0, 255,.5)}
<table id="theTable">
<tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td id="end">9</td><tr>
 <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr>
 <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr>
 <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr>
 <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr>
 <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr>
 <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr>
 <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr>
 <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr>
 <tr><td id="start">0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr>
</table>

<svg id="theSVG">
  <defs>
    <marker id="arrow" markerWidth="6" markerHeight="12" refX="8" refY="6" orient="auto">
        <path d="M 0 0 L 8 6 L 0 12" />
    </marker>
  </defs>
  <line id="theLine" marker-end="url(#arrow)" stroke="black" />  
</svg>
Rozwiń fragment kodu

AKTUALIZACJA:

Ponieważ ktoś skomentował, że po zmianie rozmiaru strzała traci swoją pozycję, dodaję gif:

wprowadź opis zdjęcia tutaj

enxaneta
źródło
Jeśli zmienię rozmiar ekranu (ctrl + i ctrl -), wówczas strzałka traci pozycję.
guettli,
Nie sądzę: dodałem gif
enxaneta
Niestety pozycja początkowa strzały straciła pozycję po ctrl +(po ctrl -) imgur.com/8xbEAK2 Iuse Chromium 78.0.3904.70
guettli
3

Możesz użyć elementu SVG i stylów css do absolutnej pozycji nakładającej się na stół. I uzyskaj punkt początkowy i końcowy przez JavaScript DOM API jakgetBoundingClientRect()

Oto demo. (Wykonane w Angular, ale można go używać wszędzie. Przykład czystego JavaScript patrz poniżej.)

const startElement = document.querySelector('#start');
const endElement = document.querySelector('#end');

const startRect = startElement.getBoundingClientRect();
const endRect = endElement.getBoundingClientRect();

const startX = startRect.right;
const startY = startRect.top;

const endX = endRect.left;
const endY = endRect.bottom;

Możesz dynamicznie zmieniać początek i koniec. Musisz tylko ponownie wywołać metodę, aby uzyskać pozycje. Zauważ, że używam lewego, górnego, prawego przycisku, aby umieścić strzałkę na krawędzi elementu. Możesz obliczyć punkt środkowy lub krawędź, porównując obie pozycje.

I musisz położyć SVG na stole. Możesz to zrobić ustawiając css position: absolute; left: 0; top: 0. Pamiętaj jednak, że twój rodzic również powinien mieć ten positionatrybut. na przykładposition: relative .

Aktualizacja: tutaj czysta wersja JavaScript. Kliknij po lewej, aby wyświetlić wszystkie pliki i wybierz plik index.js, aby wyświetlić zawartość JS. (jak w kodzie VS).

Pełny kod:

<table style="position: absolute; left: 0; top: 0;">
    <tr>
        <td>0</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td id="end">9</td>
    </tr>
    <tr>
        <td>0</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr>
    <tr>
        <td>0</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr>
    <tr>
        <td>0</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr>
    <tr>
        <td>0</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr>
    <tr>
        <td>0</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr>
    <tr>
        <td>0</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr>
    <tr>
        <td>0</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr>
    <tr>
        <td>0</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr>
    <tr>
        <td id="start">0</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr>

    <svg style="position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1">
        <defs>
            <marker id="arrow" markerWidth="10" markerHeight="10" refX="5" refY="3" orient="auto"
                markerUnits="strokeWidth" viewBox="0 0 20 20">
                <path d="M0,0 L0,6 L9,3 z" fill="#f00" />
            </marker>
        </defs>

        <line id="svg-line" stroke="#f00" stroke-width="5"
            marker-end="url(#arrow)" />
    </svg>
</table>
<script>
const svgLine = document.querySelector('#svg-line');

const startElement = document.querySelector("#start");
const endElement = document.querySelector("#end");

const startRect = startElement.getBoundingClientRect();
const endRect = endElement.getBoundingClientRect();


const startX = startRect.right;
const startY = startRect.top;

const endX = endRect.left;
const endY = endRect.bottom;

svgLine.setAttribute('x1', startX);
svgLine.setAttribute('y1', startY);
svgLine.setAttribute('x2', endX);
svgLine.setAttribute('y2', endY);
</script>

Po prostu skopiuj powyższy kod do nowego pustego pliku HTML i uruchom go w przeglądarce.

Btw. Możesz to również zrobić z płótnem. (alternatywa dla svg)

Dominik
źródło
Potrzebujesz pełnej implementacji tutaj, a nie strony trzeciej. Linki zewnętrzne z czasem zanikają, przez co Twoja odpowiedź będzie bezużyteczna. Kod, który tu pokazujesz, jest niekompletny. stackoverflow.com/help/how-to-answer
Rob
2

Musisz umieścić tabelę w div i podać właściwość, position: relative Następnie napisz HTML dla strzałki (użyj obrazu, jeśli chcesz) i nadaj mu właściwość absolutną, a następnie nadaj jej styl, jak chcesz, na górze, Lewo prawo..

Przeczytaj więcej o właściwościach pozycji tutaj https://www.w3schools.com/css/css_positioning.asp

Amit Khare
źródło
Twoja odpowiedź jest poprawna. Ale wciąż czegoś brakuje. Używanie obrazu do obrazu działa dobrze. Nie skaluje się ładnie.
guettli
Pytanie jest oznaczone jako „svg” i pyta, jak „narysować” strzałkę, aby nie odpowiadało na pytanie.
Rob
użyj SVG, skalowanie nie będzie dużym problemem
Amit Khare