Это мой первый раз, когда я использую SVG, и я хочу знать, можно ли создать анимированный линейный график со стрелкой. Я нашел несколько примеров анимированных линейных графиков без стрелок, неанимированных линейных графиков со стрелками и анимированных прямых линий со стрелками, но не совсем то, что я ищу. Я прикрепил некоторые примеры кода, с которыми я играл ниже. Кто-нибудь знает, возможно ли это/иметь решение? Было бы очень благодарно!SVG Animated Graph Arrow
Animated линия отсутствует стрелка (потребности стрелка): 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; }
Animated прямая линия со стрелкой (необходимо, чтобы остановить в нескольких точках на пути): http://codepen.io/alexandraleigh/pen/yVPYrY
I попытался добавить описания путей от # 1 до # 2, и у него есть желаемый окончательный график, просто нет анимаций: http://codepen.io/alexandraleigh/pen/pNdgWR
Я также попытался добавить стрелку маркера от # 2 до # 1, но стрела не анимировать: http://codepen.io/alexandraleigh/pen/aBVdVY
Я также открыт для использования плагина, таких как http://snapsvg.io/, но не видели рабочих примеров, которые помогают моей ситуации.
Это выглядит как дубликат http://stackoverflow.com/questions/40864442/svg-progressbar- animation-with-start-circle/40865930 больше или меньше. Кроме того, вы хотите использовать треугольник вместо круга. –