使用svg在元素直接绘制连线箭头-Toy模板网

这篇具有很好参考价值的文章主要介绍了使用svg在元素直接绘制连线箭头。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

注意：svg的图形绘制的点位置坐标是基于画布的位置坐标，相当于从左上角的点为起点。

先来个简单示例：

在点与点之间绘制连线箭头

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <svg width="300" height="300" style="background: #efefef">
    <path d="M 100 50 L 50 100" stroke="url(#grad1)" stroke-width="2" marker-end="url(#arrowhead)" />
    <path d="M 100 50 L 100 100" stroke="black" stroke-width="2" marker-end="url(#arrowhead)" />
    <path d="M 100 50 L 150 100" stroke="black" stroke-width="2" marker-end="url(#arrowhead)" />
    <defs>
      <marker id="arrowhead" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto">
        <path d="M 0 0 L 10 5 L 0 10 z" />
      </marker>
      <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%" stop-color="#ff0000" />
        <stop offset="100%" stop-color="#00ff00" />
      </linearGradient>
    </defs>
  </svg>
</body>
</html>

使用svg在元素直接绘制连线箭头
上面示例中可以看到，svg画布的位置在哪，path中点的坐标就从哪里开始，默认是从浏览器可视窗口的左上角开始。那么我们只要知道点的坐标就能绘制箭头了。
接下来，就是获取dom元素的位置坐标，使用到Element.getBoundingClientRect()
使用svg在元素直接绘制连线箭头
比如，我们现在需要在1个顶点，2个终点之间设置连线，由于path的点坐标是基于svg的画布位置，所以我们可以把画布的位置基于元素定位，画布的宽为3个元素之间最大-宽度最小的值，高为高度最高-高度最低的值。粉色框为svg画布的位置，框1、框2、框3表示顶点元素可能出现的位置。
使用svg在元素直接绘制连线箭头

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div style="width: 50px;height: 50px;position: absolute;left: 55px;top: 160px;background: red;" id="box1"></div>
  <div style="width: 50px;height: 50px;position: absolute;left: 55px;top: 530px;background: blue;" id="box2"></div>
  <div style="width: 50px;height: 50px;position: absolute;left: 925px;top: 530px;background: green;" id="box3"></div>
  <script>
    // 获取元素
    const box1 = document.querySelector('#box1')
    const box2 = document.querySelector('#box2')
    const box3 = document.querySelector('#box3')
    // 获取坐标
    const coordinate1 = getPosition(box1, 'bottom')
    const coordinate2 = getPosition(box2, 'top')
    const coordinate3 = getPosition(box3, 'top')

    // 动态创建svg
    let svgWidth = 0
    let pointStart = 0
    // 获取svg的宽度
    let coordinateArr = [coordinate1[0], coordinate2[0], coordinate3[0]].sort((a, b) => b - a);
    // 如果开始元素宽度最大，则设为svg的宽
    if (coordinate1[0] > coordinate2[0] && coordinate1[0] > coordinate3[0]) {
      svgWidth = coordinate1[0] - 75; // 50 + 25,需要减去最左侧盒子的left+width/2
      // 第二个箭头的结束点位置
      pointStart = coordinate3[0] - 75;
    } else {
      // 用最大宽度-最小宽度
      svgWidth = coordinateArr[0] - coordinateArr[2];
      pointStart = svgWidth - 5;
    }
    const svgHeight = coordinate3[1] - coordinate1[1]
    const svgEl = document.createElementNS("http://www.w3.org/2000/svg", "svg");
    // 如果只有一个分支可以考虑设置svg的宽高直接为10，然后左上角坐标 = (start元素底部中心点横坐标 - 5, start元素底部中心点纵坐标)
    // 默认是设置宽高为10的原因在于画布需要有空间，这样箭头才能正常显示

    // 以下是针对有两个分支的情况
    // svg的顶部中心位置就是起始坐标
    // svg的左右两个角落位置就是两个结束点坐标
    const start = `${coordinate1[0] - coordinate2[0]}`
    svgEl.innerHTML = `
      <path d="M ${start} 0 L 0 ${svgHeight}" stroke="url(#grad1)" stroke-width="2" marker-end="url(#arrowhead)" />
      <path d="M ${start} 0 L ${pointStart} ${svgHeight}" stroke="url(#grad1)" stroke-width="2" marker-end="url(#arrowhead)" />
      <defs>
        <marker id="arrowhead" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto">
          <path d="M 0 0 L 10 5 L 0 10 z" fill="red" />
        </marker>
        <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="0%" stop-color="#ff0000" />
          <stop offset="100%" stop-color="#00ff00" />
        </linearGradient>
      </defs>
    `
    svgEl.setAttribute('width', svgWidth)
    svgEl.setAttribute('height', svgHeight)
    svgEl.style.cssText = `background: #ddd; position: absolute;left: ${coordinate2[0]}px;top: ${coordinate1[1]}px;`
    document.body.appendChild(svgEl)


    function getPosition (el, direction) {
      const rect = el?.getBoundingClientRect()
      const x = (rect.right - rect.left) / 2 + rect.left
      const y = rect[direction]
      return [x, y]
    }
  </script>
</body>
</html>

使用svg在元素直接绘制连线箭头

注意：当点与点之前的x坐标相同，如果填充色是渐变色的话，会存在path的箭头变为0的情况。我们可以设置点的位置偏差来避免这种情况；还有部分三角形箭头被遮挡的情况，可以把点的y坐标适当减个5的值，避免这种情况

优化代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
<!--可以修改left的值-->
  <div style="width: 50px;height: 50px;position: absolute;left: 55px;top: 160px;background: red;" id="box1"></div>
  <div style="width: 50px;height: 50px;position: absolute;left: 55px;top: 530px;background: blue;" id="box2"></div>
  <div style="width: 50px;height: 50px;position: absolute;left: 925px;top: 530px;background: green;" id="box3"></div>

  <script>
    // 获取元素
    const box1 = document.querySelector('#box1')
    const box2 = document.querySelector('#box2')
    const box3 = document.querySelector('#box3')
    // 获取坐标
    const coordinate1 = getPosition(box1, 'bottom')
    const coordinate2 = getPosition(box2, 'top')
    const coordinate3 = getPosition(box3, 'top')
    console.log(coordinate1)
    console.log(coordinate2)
    console.log(coordinate3)

    // 动态创建svg
    const pad = 10 // 偏移量，避免箭头宽度为0
    let svgWidth = 0
    let pointStart = 0
    // 获取svg的宽度
    let coordinateArr = [coordinate1[0], coordinate2[0], coordinate3[0]].sort((a, b) => b - a);
    // 如果开始元素宽度最大，则设为svg的宽
    if (coordinate1[0] > coordinate2[0] && coordinate1[0] > coordinate3[0]) {
      svgWidth = coordinate1[0] - 75 + pad; // 50 + 25,需要减去最左侧盒子的left+width/2
      // 第二个箭头的结束点位置
      pointStart = coordinate3[0] - 75 + pad;
    } else {
      // 用最大宽度-最小宽度
      svgWidth = coordinateArr[0] - coordinateArr[2] + pad;
      pointStart = svgWidth - 5;
    }
    const svgHeight = coordinate3[1] - coordinate1[1]
    const svgEl = document.createElementNS("http://www.w3.org/2000/svg", "svg");
    // 如果只有一个分支可以考虑设置svg的宽高直接为10，然后左上角坐标 = (start元素底部中心点横坐标 - 5, start元素底部中心点纵坐标)
    // 默认是设置宽高为10的原因在于画布需要有空间，这样箭头才能正常显示

    // 以下是针对有两个分支的情况
    // svg的顶部中心位置就是起始坐标
    // svg的左右两个角落位置就是两个结束点坐标
    const start = `${coordinate1[0] - coordinate2[0] + 8}`
    const pointEnd = svgHeight - 5
    svgEl.innerHTML = `
      <path d="M ${start} 0 L ${pad} ${pointEnd}" stroke="url(#grad1)" stroke-width="2" marker-end="url(#arrowhead)" />
      <path d="M ${start} 0 L ${pointStart} ${pointEnd}" stroke="url(#grad1)" stroke-width="2" marker-end="url(#arrowhead)" />
      <defs>
        <marker id="arrowhead" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto">
          <path d="M 0 0 L 10 5 L 0 10 z" fill="red" />
        </marker>
        <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="0%" stop-color="#ff0000" />
          <stop offset="100%" stop-color="#00ff00" />
        </linearGradient>
      </defs>
    `
    svgEl.setAttribute('width', svgWidth)
    svgEl.setAttribute('height', svgHeight)
    // 这个地方left - 10是为了避免开始点和结束点的x点坐标一样的时候，使用渐变色填充宽度消失的问题，将画布左移10px避免偏差
    svgEl.style.cssText = `background: #ddd; position: absolute;left: ${coordinateArr[2] - pad}px;top: ${coordinate1[1]}px;`
    document.body.appendChild(svgEl)


    function getPosition (el, direction) {
      const rect = el?.getBoundingClientRect()
      const x = (rect.right - rect.left) / 2 + rect.left
      const y = rect[direction]
      return [x, y]
    }
  </script>
</body>
</html>