Javascript 角度SVG路径不可见

我正在做一个项目，我有一个页面列出了工作岗位，我需要用线条/箭头直观地显示进度（如何从一个工作到另一个工作），以便用户可以跟随。我创建了一个包含所有数据的页面，现在我尝试使用SVG路径在数据顶部创建线条并绘制路径

我在另一个答案中找到了一些代码，我将其转换为纯JS，并删除了jQuery引用，以便能够在我的项目中使用它

以下是一个路径示例：

<path class="path" id="path1" d="M449.953125 512.34375 V568.03125 A55.6875 55.6875 0 0 0 505.640625 623.71875 H765.515625 A55.6875 55.6875 0 0 1 821.203125 679.40625 V1055.3203125"></path>

  #svgContainer {
    z-index: -10;
    opacity: 0.5;
    margin: 2.5em 2.5em;
    position: absolute;
    background-color: #999;
}

  path { 
    fill:   none !important;
    stroke: #000 !important;
    stroke-width: 0.7em !important;
  }

  // calculate path's end (x,y) coords
  var endX = endCoord.offsetLeft + 0.5 * endElem.offsetWidth - svgLeft;
  var endY = endCoord.offsetTop - svgTop;

  // calculate path's end (x,y) coords
  var endX = endCoord.getBoundingClientRect().left + 0.5 * endElem.offsetWidth - svgLeft;
  var endY = endCoord.getBoundingClientRect().top - svgTop;

以下是我的尝试：

<path class="path" id="path1" d="M449.953125 512.34375 V568.03125 A55.6875 55.6875 0 0 0 505.640625 623.71875 H765.515625 A55.6875 55.6875 0 0 1 821.203125 679.40625 V1055.3203125"></path>

  #svgContainer {
    z-index: -10;
    opacity: 0.5;
    margin: 2.5em 2.5em;
    position: absolute;
    background-color: #999;
}

  path { 
    fill:   none !important;
    stroke: #000 !important;
    stroke-width: 0.7em !important;
  }

  // calculate path's end (x,y) coords
  var endX = endCoord.offsetLeft + 0.5 * endElem.offsetWidth - svgLeft;
  var endY = endCoord.offsetTop - svgTop;

  // calculate path's end (x,y) coords
  var endX = endCoord.getBoundingClientRect().left + 0.5 * endElem.offsetWidth - svgLeft;
  var endY = endCoord.getBoundingClientRect().top - svgTop;

我面临的问题是，SVG和路径似乎是创建的，但我无法看到DOM上的行/路径。但是，如果我查看web工具中的元素，我可以看到SVG元素和path元素，它们似乎位于从起始和结束位置绘制路径的正确位置

我的渲染路径如下：

<path class="path" id="path1" d="M449.953125 512.34375 V568.03125 A55.6875 55.6875 0 0 0 505.640625 623.71875 H765.515625 A55.6875 55.6875 0 0 1 821.203125 679.40625 V1055.3203125"></path>

  #svgContainer {
    z-index: -10;
    opacity: 0.5;
    margin: 2.5em 2.5em;
    position: absolute;
    background-color: #999;
}

  path { 
    fill:   none !important;
    stroke: #000 !important;
    stroke-width: 0.7em !important;
  }

  // calculate path's end (x,y) coords
  var endX = endCoord.offsetLeft + 0.5 * endElem.offsetWidth - svgLeft;
  var endY = endCoord.offsetTop - svgTop;

  // calculate path's end (x,y) coords
  var endX = endCoord.getBoundingClientRect().left + 0.5 * endElem.offsetWidth - svgLeft;
  var endY = endCoord.getBoundingClientRect().top - svgTop;

是不是我遗漏了什么特定角度的东西导致了它没有出现

我对SVG不是很熟悉，但是在DOM中看到SVG元素和Path元素让我觉得它非常接近。我无法想象箭头在DOM之外的任何地方，但我可能错了

更新：

<path class="path" id="path1" d="M449.953125 512.34375 V568.03125 A55.6875 55.6875 0 0 0 505.640625 623.71875 H765.515625 A55.6875 55.6875 0 0 1 821.203125 679.40625 V1055.3203125"></path>

  #svgContainer {
    z-index: -10;
    opacity: 0.5;
    margin: 2.5em 2.5em;
    position: absolute;
    background-color: #999;
}

  path { 
    fill:   none !important;
    stroke: #000 !important;
    stroke-width: 0.7em !important;
  }

  // calculate path's end (x,y) coords
  var endX = endCoord.offsetLeft + 0.5 * endElem.offsetWidth - svgLeft;
  var endY = endCoord.offsetTop - svgTop;

  // calculate path's end (x,y) coords
  var endX = endCoord.getBoundingClientRect().left + 0.5 * endElem.offsetWidth - svgLeft;
  var endY = endCoord.getBoundingClientRect().top - svgTop;

我将路径代码粘贴在几个SVG的“验证器”站点中，以查看它是否会绘制路径，并且我没有得到任何视觉指示。这表明它用于创建路径的坐标有问题。然而，在工作示例中使用了相同的代码，所以我想知道这是否是一个角度上的怪癖，毕竟是操纵DOM的排序

更新2: 我相信我已经解决了这个问题。我必须改变在JS中获取结束坐标的方式

之前：

<path class="path" id="path1" d="M449.953125 512.34375 V568.03125 A55.6875 55.6875 0 0 0 505.640625 623.71875 H765.515625 A55.6875 55.6875 0 0 1 821.203125 679.40625 V1055.3203125"></path>

  #svgContainer {
    z-index: -10;
    opacity: 0.5;
    margin: 2.5em 2.5em;
    position: absolute;
    background-color: #999;
}

  path { 
    fill:   none !important;
    stroke: #000 !important;
    stroke-width: 0.7em !important;
  }

  // calculate path's end (x,y) coords
  var endX = endCoord.offsetLeft + 0.5 * endElem.offsetWidth - svgLeft;
  var endY = endCoord.offsetTop - svgTop;

  // calculate path's end (x,y) coords
  var endX = endCoord.getBoundingClientRect().left + 0.5 * endElem.offsetWidth - svgLeft;
  var endY = endCoord.getBoundingClientRect().top - svgTop;

之后：

<path class="path" id="path1" d="M449.953125 512.34375 V568.03125 A55.6875 55.6875 0 0 0 505.640625 623.71875 H765.515625 A55.6875 55.6875 0 0 1 821.203125 679.40625 V1055.3203125"></path>

  #svgContainer {
    z-index: -10;
    opacity: 0.5;
    margin: 2.5em 2.5em;
    position: absolute;
    background-color: #999;
}

  path { 
    fill:   none !important;
    stroke: #000 !important;
    stroke-width: 0.7em !important;
  }

  // calculate path's end (x,y) coords
  var endX = endCoord.offsetLeft + 0.5 * endElem.offsetWidth - svgLeft;
  var endY = endCoord.offsetTop - svgTop;

  // calculate path's end (x,y) coords
  var endX = endCoord.getBoundingClientRect().left + 0.5 * endElem.offsetWidth - svgLeft;
  var endY = endCoord.getBoundingClientRect().top - svgTop;

---

新提琴：

我通过以下操作使您的示例生效：

• 将

  offsetTop

  和

  offsetLeft

  替换为

  getBoundingClientRect（）。顶部为
  和
  getBoundingClientRect（）。左侧为
  connectElements（）

• 调整了svgContainer的样式，使其具有正的z索引，以便在其他元素上绘制svg
• 添加

  指针事件：无编码到svgContainer，以便您仍然可以与它后面的元素进行交互

---

以下是更新的。

元素的

高度属性为0。增加高度会使其出现。

#svgContainer

元素的z索引为-10，它将它拖在其他元素的后面。@AlexK我现在来看看。JS应该根据元素的坐标计算高度和宽度值，并相应地调整值。我已经将问题回滚到回答时的位置，以便答案有意义。如果还有更多问题，最好再问一个问题。offsetTop似乎返回了0，这导致svg的计算高度为0。谢谢，我们现在就接受这个问题。对更新后的问题（新一期）有什么想法？简单地尝试动态添加路径，它做了一些奇怪的事情..您是否在CSS中的某个地方指定了

路径{fill:none；}

？是的，除了删除硬编码路径以支持动态添加之外，我们没有改变任何东西。明白了：/-必须是一个角度的东西。因为它是动态添加元素的，所以它没有遵循它生成该元素的组件中的样式。我将

路径

css移动到全局样式表中，它似乎工作正常。