Javascript 使用jQuery时的线条动画

我的客户要求将文本（基本p标签）与图像中的按钮连接起来（请参见附图），我很难找到如何做到这一点并确保其响应性

关于如何实现这一点，我有两个想法：

导入线条图像（客户端给了我一个png文件）并使用CSS使线条正确地适合图像。问题是一旦我缩小屏幕尺寸，它就会丢失正确的位置。我在codepen上有我的代码，除了那些该死的行之外，我从上面的图片中看到了所有的东西：

我还考虑了SVG动画，但我不确定如何将其与用于按钮的jQuery结合起来。我用它在两个按钮和侧箭头按钮之间来回移动，还有渐变效果

如果有人能为我指出如何实现这一目标的正确方向（文章、视频、最佳方法），我将不胜感激
致以最良好的祝愿

   <div class="container-fluid jumbo_features">
    <div class="row">
     <div class="col-md-6">
      <img src="https://image.ibb.co/ijvTfU/feature_meeting.png" class="meeting_img">

      <img src="https://image.ibb.co/hZNxPp/feature_tasks.png" class="tasks_img"></div>

     <div class="col-md-6">
      <button type="button"  class="btn active" aria-pressed="true" id="meeting_button">Meeting</button>
      <button type="button" class="btn" aria-pressed="true" id="tasks_button">Tasks</button>

       <br>
     <p class="meeting_info"><b>Attends Meetings:</b><br>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p><br>
     <p class="meeting_info "><b>Takes meeting notes:</b><br>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p>
      <!--Tasks-->
       <p class="tasks_info"><b>Example One</b><br>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p><br>
              <p class="tasks_info"><b>Example Two</b><br>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p><br>
              <p class="tasks_info"><b>Example Three</b><br>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p><br>

         </div>
          </div>
       </div>

      <br>
       </div>
      </div>  
    </div>

</div>
</div>
       <div class ="meeting_info">
<img src="https://thumb.ibb.co/c4yUFU/line1.png" id="line">

会合
任务


参加会议：
Lorem ipsum是图形、打印和出版行业中常用的占位符文本，用于预览版面和视觉模型。


记录会议笔记：
Lorem ipsum是图形、打印和出版行业中常用的占位符文本，用于预览版面和可视化实体模型
示例一Lorem ipsum是图形、打印和出版行业中常用的占位符文本，用于预览布局和视觉模型。


示例二Lorem ipsum是图形、打印和出版行业中常用的占位符文本，用于预览布局和视觉模型。


示例三Lorem ipsum是图形、打印和出版行业常用的占位符文本，用于预览布局和视觉模型。

虽然我不清楚jQuery可能会干扰行的使用的确切原因，但下面是一个简单的SVG示例，它将随着窗口大小的改变而扩展。要使其缩放，您所要做的就是使用百分比值，而不是文字像素值

如果随着屏幕大小的变化，您有一些成比例的变化，那么您可能必须以编程方式更改此代码。如果您提供了更多关于为什么担心与jQuery交互的信息，请与我们分享，我将更新我的答案

编辑：我更新了我的示例，让您大致了解我认为您在寻找的内容（例如，消息并不总是正确排列）。如果我对你的理解正确，你可以从那里改进它。此外，您可能希望使用不同大小的屏幕更改百分比。如果是这样，请在CSS中使用

@media

查询

div{
显示：内联块；
垂直对齐：顶部；
宽度：32%；
}
#我的{
宽度：100%；
}
#mySVG{
利润率最高：20%；
左边缘：-10%；
}
#味精{
利润率最高：28.5%；
左侧填充：10px；
}

你的留言在这里

对于线条动画部分，除了svg自己的动画功能外，不需要使用任何其他功能：

我个人会使用SVG。你试过用它吗？您可以使用所有值的百分比而不是像素位置来缩放线条。嗨，鲍勃！我最近一直在研究SVG，但从未使用过它。您是否建议我通过SVG创建线条，或者使用保存为SVG文件的图像，然后使用CSS设置样式？我在我的代码笔中对此进行了测试，但在如何使用jQuery合并它方面遇到了问题。你能让我知道SVG中的这个特性叫什么吗？我只是画几行。我将在回答中举例说明。你也可以和我一起玩。非常感谢鲍勃。问题，我如何使这个SVG与左边的图像按钮完美地对齐？这会是一个在CSS中固定边距的问题吗？@Alexandra Yes和no。我会将SVG放在一个div中，并使用CSS调整div的大小和对齐（是的，可能是使用边距而不是填充，因为您似乎希望线条在某种程度上与图像重叠）因为您希望它与您的图形手机图像相关。@Alexandra我在回答中添加了一个粗略的示例。@Alexandra非常欢迎您。“希望你一切顺利。”亚历山德拉：好的，我看了一下。我不知道引导，但是为什么不在引导容器中也包含SVG呢？（我认为这是容器流体

类的主要div。）换句话说，你为什么不使用我这里的
div
布局，将整个东西封装在引导容器中？谢谢！动画部分是我的客户的一个重要功能。我来检查一下。
点
以
x1，y1 x2，y2 x3，y3…
格式表示坐标。我更改了示例中的要点。