Jquery 设置svg行与表格单元格的动画

我试图创建一个水平事件时间线，在这里我可以显示一些悬停数据。这就是我到目前为止所做的：

HTML:

<div class="container">
  <div class="timeline">
    <table class="table table-responsive" style="border-color: transparent;">
      <tbody>
        <tr>
          <td>
            <div class="grow">
              <p style="font-size: 1.25em"><i class="fa fa-book"></i>
                <br>2007</p>
            </div>
          </td>
          <td>
            <div class="grow">
              <p style="font-size: 1.25em"><i class="fa fa-book"></i>
                <br>2009</p>
            </div>
          </td>
          <td>
            <div class="grow">
              <p style="font-size: 1.25em"><i class="fa fa-graduation-cap"></i>
                <br>2013</p>
            </div>
          </td>
          <td>
            <div class="grow">
              <p style="font-size: 1.25em"><i class="fa fa-suitcase"></i>
                <br>Present</p>
            </div>
          </td>
        </tr>
      </tbody>

    </table>
    <svg width="100%">
      <line x1="100%" y1="0" x2="0" y2="0" style="stroke:rgb(255,0,0);stroke-width:5" />
    </svg>
  </div>
</div>

timeline {
  padding-top: 50px;
}

.grow {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  transition: all 0.3s ease;
}

.grow:hover {
  -webkit-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2);
  transition: all 0.3s ease;
}

JS小提琴：

我正在尝试在本演示页面中实现以下时间线：

它位于主页中“我们的专家”选项卡的上方

---

请告诉我如何做到这一点。

我必须重新构造css、html和javascript，继续尝试，它的工作原理与示例完全相同

更新小提琴：

$（“[link assoc]”）。隐藏（）；
$（“[link]”）。悬停（函数（）{
$（“[link assoc=“+$（this）.attr（“link”）+”]））
.停止（对，对）
.slideToggle（）
.兄弟姐妹（）
.停止（对，对）
.slideUp（）；
});
时间线{
填充顶部：50px；
}
.集装箱{
高度：100px；
}
#内容{
位置：绝对位置；
底部：10px；
最小高度：5px；
宽度：100%；
颜色：白色；
背景：rgb（255,0,0）；
}
.集装箱{
高度：150像素；
位置：相对位置；
}
.成长{
-webkit转换：规模（1）；
-ms变换：尺度（1）；
变换：比例（1）；
过渡：所有0.3秒缓解；
}
.成长：盘旋{
-webkit转换：规模（1.2）；
-ms变换：比例（1.2）；
转换：比例（1.2）；
过渡：所有0.3秒缓解；
}



2007年


2009年


2013年


出席
测试1
测试2
测试3
测试4
我必须重新构造css、html和javascript，继续尝试，它的工作原理与示例完全相同

更新小提琴：


$（“[link assoc]”）。隐藏（）；
$（“[link]”）。悬停（函数（）{
$（“[link assoc=“+$（this）.attr（“link”）+”]））
.停止（对，对）
.slideToggle（）
.兄弟姐妹（）
.停止（对，对）
.slideUp（）；
});
时间线{
填充顶部：50px；
}
.集装箱{
高度：100px；
}
#内容{
位置：绝对位置；
底部：10px；
最小高度：5px；
宽度：100%；
颜色：白色；
背景：rgb（255,0,0）；
}
.集装箱{
高度：150像素；
位置：相对位置；
}
.成长{
-webkit转换：规模（1）；
-ms变换：尺度（1）；
变换：比例（1）；
过渡：所有0.3秒缓解；
}
.成长：盘旋{
-webkit转换：规模（1.2）；
-ms变换：比例（1.2）；
转换：比例（1.2）；
过渡：所有0.3秒缓解；
}



2007年


2009年


2013年


出席
测试1
测试2
测试3
测试4
要像在SVG中那样设置线条形状的动画，需要对路径的形状进行变形

下面是一个如何使用SVG的内置SMIL动画元素实现这一点的示例


要像在SVG中那样设置线条形状的动画，需要对路径的形状进行变形

下面是一个如何使用SVG的内置SMIL动画元素实现这一点的示例



您能提供一把小提琴吗？给您：。如果你能标记为解决方案并投票，那会有很大帮助。这不是我想要的。我希望svg行在悬停在表格单元格上时出现，如演示中所示。你能帮我一下吗？@v1shnu我花了一些时间在上面：。如果你能投票并将其标记为解决方案，这将非常有帮助。你能提供一把小提琴吗？给你：。如果你能标记为解决方案并投票，那会有很大帮助。这不是我想要的。我希望svg行在悬停在表格单元格上时出现，如演示中所示。你能帮我一下吗？@v1shnu我花了一些时间在上面：。如果你能投票并将其标记为解决方案，这会有很大帮助。很好的解决方案。您能否提供一个示例或教程，其中显示了如何根据光标在该行上的位置修改该行的路径？我实际上想到了使用jquery获取clientX值并基于该值修改行属性。但我似乎找不到这方面的教程或示例。所以你不想让它以列为基础，比如那个演示页面？你想让它沿着直线上升，无论指针在哪里？我计划修改上升，使其与表格单元格一致。这样，在那个区域，我的行和表格单元格都会增长。我正在查看animate.css库，看看它是否可以与这行一起使用。很好的解决方案。您能否提供一个示例或教程，其中显示了如何根据光标在该行上的位置修改该行的路径？我实际上想到了使用jquery获取clientX值并基于该值修改行属性。但我似乎找不到这方面的教程或示例。所以你不想让它以列为基础，比如那个演示页面？你想让它沿着直线上升，无论指针在哪里？我计划修改上升，使其与表格单元格一致。这样，在那个区域，我的行和表格单元格都会增长