Это мой первый опыт использования 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