Анимированная стрелка в формате SVG

334

03 мая 2017, 08:11

Это мой первый опыт использования SVG, и я хочу узнать, возможно ли создать анимированный линейный график со стрелкой.

Я нашел несколько примеров анимированных линейных графиков без стрелок, графиков без анимации со стрелками и анимированных прямых линий со стрелками.

Но это не совсем то, что я ищу. Я прикрепил ниже несколько примеров кода, о которых я говорил.
Кто-нибудь знает, это возможно, есть ли решение?

Анимированная линия, отсутствует стрелка : codepen

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;
}

Анимированная линия (должна останавливаться в нескольких точках пути)

http://codepen.io/alexandraleigh/pen/aBVdVY

Я попытался добавить path descriptions от # 1 до # 2, и у него есть нужный конечный граф, без анимации:

http://codepen.io/alexandraleigh/pen/pNdgWR

Я также попытался добавить маркер стрелки с # 2 на # 1, но стрелка не поддается анимации:
http://codepen.io/alexandraleigh/pen/aBVdVY

Я также пробовал использовать snapsvg.io, но не увидел никаких рабочих примеров, которые помогли бы в моей ситуации.

Перевод вопроса: SVG Animated Graph Arrow @alexandraleigh

Answer 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 скоро не будет поддерживаться 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 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>