JS在两个（或更多）元素之间绘制线或带箭头的线

伊泽瑞尔.

于 2024-03-22 11:05:00 发布

阅读量808

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端开发实践文章标签： javascript 前端开发语言

本文链接：https://blog.youkuaiyun.com/weixin_49219528/article/details/136934817

该篇文章介绍了如何使用JavaScript在网页上动态创建SVG线段，并实现当窗口大小改变时，SVG线段能根据新的元素位置进行重绘。作者展示了`drawLine`函数用于创建SVG线条，以及如何利用CSS绝对定位使SVG脱离文档流并响应窗口调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

function drawLine(startObj, endObj) {
//startObj传入的开始dom，endObj结束Dom
  const y_start = startObj.offsetTop + startObj.offsetHeight / 2;
  const x_start = startObj.offsetLeft + startObj.offsetWidth / 2;

  const y_end = endObj.offsetTop + endObj.offsetHeight / 2;
  const x_end = endObj.offsetLeft + endObj.offsetWidth / 2;

  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  svg.setAttribute("width", "100%");
  svg.setAttribute("height", "100%");
  svg.style.position = "absolute";
  svg.style.top = "0";
  svg.style.left = "0";
  svg.style.zIndex = "1";

  const arrow = document.createElementNS("http://www.w3.org/2000/svg", "line");
  arrow.setAttribute("x1", x_start);
  arrow.setAttribute("y1", y_start);
  arrow.setAttribute("x2", x_end);
  arrow.setAttribute("y2", y_end);
  arrow.setAttribute("stroke", "green");//箭头的颜色
  arrow.setAttribute("stroke-width", "2");
  arrow.setAttribute("marker-end", "url(#arrowhead)");
  const