SVG Анимированный график Arrow

Я впервые использую 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/, но не видел ни одного рабочего примера, который помог бы моей ситуации.

Источник

1 ответ

Решение

Вы можете сделать это с помощью offset-motion(старый синтаксис: motion-path). Имейте в виду, что это очень экспериментальная функция. в настоящее время он работает только в Chrome. Более того, я использую здесь "старый" синтаксис, поскольку это то, что в настоящее время работает в Chrome, но вскоре он переключится на новый системный синтаксис...

* {
  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>

Источник
Другие вопросы по тегам