使用 jQuery 时的线条动画

Question

我的客户要求将文本（基本 p 标签）与图像中的按钮连接起来（请参阅附图），我很难找出如何完成此操作并确保它具有响应性。

我对如何实现这一点有两个想法：

导入线条图像（客户给了我一个 png 文件）并使用 CSS 使线条正确适合图像。问题是一旦我缩小屏幕尺寸，它就会失去正确的位置。我在codepen上有我的代码，除了那些乱线之外，我可以从上面的图像中得到所有的东西： https://codepen.io/dec23rd1986/full/PdEoZa/

我也考虑过 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">

Answer 1

虽然我不清楚为什么您的 jQuery 可能会干扰您对线条的使用，但这里有一个简单的 SVG 示例，它会随着您更改窗口大小而缩放。要使其缩放，您所要做的就是使用百分比值而不是文字像素值。

如果您在屏幕尺寸变化时有一些比例变化，那么您可能需要以编程方式更改此代码。如果您提供更多关于您为何担心与 jQuery 交互的信息，请分享它们，我会更新我的答案。

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

div {
  display: inline-block;
  vertical-align: top;
  width: 32%;
}

#myImg img {
  width: 100%;
}

#mySVG {
  margin-top: 20%;
  margin-left: -10%;
}

#myMsg {
  margin-top: 28.5%;
  padding-left: 10px;
}

<div id="myImg">
  <img src="https://www.yotako.io/images/documentation/balsamiq/containers/android_balsamiq.png" />
</div>
<div id="mySVG">
  <svg height="100%" width="100%">
  <line x1="0" y1="0" x2="50%" y2="0" style="stroke:#000;stroke-width:2" />
  <line x1="50%" y1="0" x2="50%" y2="50%" style="stroke:#000;stroke-width:2" />
  <line x1="50%" y1="50%" x2="100%" y2="50%" style="stroke:#000;stroke-width:2" />
</svg>
</div>
<div id="myMsg">
  <p>Your message goes here</p>
</div>

Answer 2

线条动画部分，除了svg自带的动画功能，你不需要使用其他任何东西：

<svg height="120" width="120">
  <polyLine
    id="myLine"
    points="120,0 60,0 60,60 0,60"
    fill="none"
    stroke-width="2"
    stroke="red"
    stroke-dasharray="240"
    stroke-dashoffset="240"
  />

  <animate
    xlink:href="#myLine"
    attributeName="stroke-dashoffset"
    from="240"
    to="0"
    dur="3s"
    begin="1s"
    fill="freeze"
   />   
</svg>

PS：你可以得到总长度（240）with calculation，但是对于有限的行数可以手动计算。