2

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

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

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

  1. Анимированная линия, отсутствует стрелка : 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;
}    
  1. Анимированная линия (должна останавливаться в нескольких точках пути)

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

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

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

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

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

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

1

1 ответ 1

2

Вы можете сделать это с помощью 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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.