使用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) https://stackoverflow.com/questions/34890748/how-can-i-get-length-of-svg-polyline-element，但是对于有限的行，可以手动计算它。