SVG 动画图形箭头

Question

这是我第一次使用 SVG，我想知道是否可以创建带箭头的动画线图。我发现了多个不带箭头的动画线图、带箭头的非动画线图和带箭头的动画直线的多个示例，但不完全是我要找的。我在下面附上了一些我一直在玩的代码笔示例。有谁知道这是否可能/有解决方案？将不胜感激!

1. 动画线缺少箭头(需要箭头): http://codepen.io/alexandraleigh/pen/jVaObd

   # HTML
   <div class="graph__wrapper">
     <svg width="315px" height="107px" viewBox="0 0 315 107" version="1.1">
       <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
         <path d="M2.10546875,95.75 L40.5546875,68.3476562 L55.2109375,81.1796875 L65.2148437,76.3945312 L96.1835937,86.8320312 L131.023438,19.9414062 L142.15625,23.7226562 L183.605469,2.1953125 L211.007812,22.3320312 L234.320312,71.5664062 L234.667969,83.0039062 L244.019531,83.0039062 L247.105469,88.8320312 L312.695312,104.839844" id="Path-1" stroke="white" stroke-width="4" sketch:type="MSShapeGroup" class="path"></path>
       </g>
     </svg>
   </div> 
   
   
   # CSS(Less)
   
   @import "lesshat";
   
   @darkgrey:          #303030;
   
   *{
     box-sizing: border-box;
   }
   
   body{
     background: @darkgrey;
   }
   
   .graph__wrapper{
     width: 400px;
     margin: 30px auto;
     position: relative;
   
     svg{
       position: absolute;
       margin: 36px 0px 0px 15px;
     }
   }
   
   .path {
     stroke-dasharray: 1000;
     stroke-dashoffset: 1000;
     animation: dash 3s ease-in forwards;
     animation-iteration-count: 1;
     animation-delay: 1s;
   }
   
   @keyframes dash {
     to {
       stroke-dashoffset: 0;
     }
   }
   
   .description{
     font-family: "Roboto";
     color:lighten(@darkgrey, 50%);
     text-align: center;
     margin: 40px 0px;
   } 
   

2. 带箭头的动画直线(需要在路径上的多个点处停止): http://codepen.io/alexandraleigh/pen/yVPYrY

3. 我尝试添加从 #1 到 #2 的路径描述，它具有所需的最终图形，只是没有动画: http://codepen.io/alexandraleigh/pen/pNdgWR

4. 我还尝试将箭头标记从 #2 添加到 #1，但箭头没有动画: http://codepen.io/alexandraleigh/pen/aBVdVY

我也愿意使用插件，例如 http://snapsvg.io/ ，但还没有看到任何有助于我的情况的工作示例。

Answer 1

您可以使用偏移运动(旧语法:运动路径)来做到这一点。请注意，这是一项高度实验性的功能。它目前仅适用于 Chrome。更重要的是，我在这里使用“旧”语法，因为这是目前在 chrome 中使用的语法，但它很快就会切换到新的 systax...

* {
  box-sizing: border-box;
}
body {
  background: #303030;
}
.graph__wrapper {
  width: 400px;
  margin: 30px auto;
  position: relative;
  svg {
    position: absolute;
    margin: 36px 0px 0px 15px;
  }
}
.path {
  stroke-dasharray: 428;
  stroke-dashoffset: 428;
  animation: dash 3s ease-in forwards;
  animation-iteration-count: 1;
  animation-delay: 1s;
}
@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes pm {
  from {
    motion-offset: 0%;
  }
  to {
    motion-offset: 100%
  }
}
#arrow {
  animation: pm 3s ease-in forwards;
  animation-iteration-count: 1;
  animation-delay: 1s;
  motion-path: path('M2.10546875,95.75 L40.5546875,68.3476562 L55.2109375,81.1796875 L65.2148437,76.3945312 L96.1835937,86.8320312 L131.023438,19.9414062 L142.15625,23.7226562 L183.605469,2.1953125 L211.007812,22.3320312 L234.320312,71.5664062 L234.667969,83.0039062 L244.019531,83.0039062 L247.105469,88.8320312 L312.695312,104.839844');
  motion-rotation: auto;
  motion-anchor: center;
}
.description {
  font-family: "Roboto";
  color: lighten(@darkgrey, 50%);
  text-align: center;
  margin: 40px 0px;
}

<div class="graph__wrapper">
  <svg width="315px" height="107px" viewBox="0 0 315 107" version="1.1" style="overflow:visible">
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
      <path d="M2.10546875,95.75 L40.5546875,68.3476562 L55.2109375,81.1796875 L65.2148437,76.3945312 L96.1835937,86.8320312 L131.023438,19.9414062 L142.15625,23.7226562 L183.605469,2.1953125 L211.007812,22.3320312 L234.320312,71.5664062 L234.667969,83.0039062 L244.019531,83.0039062 L247.105469,88.8320312 L312.695312,104.839844"
      id="Path-1" stroke="white" stroke-width="4" sketch:type="MSShapeGroup" class="path"></path>



      <polyline id="arrow" points="0,-5 10,0 0,5 1,0" fill="white" />

    </g>
  </svg>
</div>

您也可以使用 animateMotion 来做到这一点，但是 svg 动画很快就会被描述。你迟早会以任何方式重写你的代码:-(

* {
  box-sizing: border-box;
}
body {
  background: #303030;
}
.graph__wrapper {
  width: 400px;
  margin: 30px auto;
  position: relative;
  svg {
    position: absolute;
    margin: 36px 0px 0px 15px;
  }
}
.path {
  stroke-dasharray: 428;
  stroke-dashoffset: 428;
  animation: dash 3s linear forwards;
  animation-iteration-count: 1;
  animation-delay: 1s;
}
@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}
.description {
  font-family: "Roboto";
  color: lighten(@darkgrey, 50%);
  text-align: center;
  margin: 40px 0px;
}

<div class="graph__wrapper">
  <svg width="315px" height="107px" viewBox="0 0 315 107" version="1.1" style="overflow:visible">
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
      <path d="M2.10546875,95.75 L40.5546875,68.3476562 L55.2109375,81.1796875 L65.2148437,76.3945312 L96.1835937,86.8320312 L131.023438,19.9414062 L142.15625,23.7226562 L183.605469,2.1953125 L211.007812,22.3320312 L234.320312,71.5664062 L234.667969,83.0039062 L244.019531,83.0039062 L247.105469,88.8320312 L312.695312,104.839844"
      id="Path-1" stroke="white" stroke-width="4" sketch:type="MSShapeGroup" class="path"></path>



      <polyline id="arrow" points="0,-5 10,0 0,5 1,0" fill="white">
        <animateMotion rotate="auto" begin="1s" dur="3s" repeatCount="1" fill="freeze">
          <mpath xlink:href="#Path-1" />
        </animateMotion>
      </polyline>

    </g>
  </svg>
</div>