SVG Animated Graph Arrow

Dies ist mein erstes Mal mit SVG und ich möchte wissen, ob es möglich ist, ein animiertes Liniendiagramm mit einem Pfeil zu erstellen. Ich habe mehrere Beispiele für animierte Liniendiagramme ohne Pfeile, nicht animierte Liniendiagramme mit Pfeilen und animierte Geraden mit Pfeilen gefunden, aber nicht genau das, wonach ich suche. Ich habe einige Codepen-Beispiele angehängt, mit denen ich unten gespielt habe. Weiß jemand, ob das möglich ist/habe eine Lösung? Es würde sehr geschätzt werden!SVG Animated Graph Arrow

Animated Linie fehlt Pfeil (Bedürfnisse Pfeil): 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; 
}

Animation mit Pfeil geraden Linie (muss an mehreren Stellen auf dem Weg zu stoppen): http://codepen.io/alexandraleigh/pen/yVPYrY
I versucht, die Pfadbeschreibungen von # 1 bis # 2 hinzuzufügen und es hat die gewünschte endgültige Grafik, nur keine Animationen: http://codepen.io/alexandraleigh/pen/pNdgWR
Ich versuchte auch das Hinzufügen auf den Pfeil Markierung von # 2 bis # 1, aber der Pfeil animiert nicht: http://codepen.io/alexandraleigh/pen/aBVdVY

Ich bin auch offen ein Plugin wie http://snapsvg.io/ zu verwenden, aber habe keine Arbeitsbeispiele gesehen, die meiner Situation helfen.

Quelle

2016-11-30 alexandraleigh

Dies scheint ein Duplikat http://stackoverflow.com/questions/40864442/svg-progressbar- animation-with-start-circle/40865930 mehr oder weniger, außer dass Sie ein Dreieck anstelle eines Kreises verwenden möchten. –

können Sie dies mit offset-motion tun (alte Syntax: motion-path). Beachten Sie, dass dies eine sehr experimentelle Funktion ist. Derzeit funktioniert es nur in Chrome. Mehr zu dem Punkt i die „alte“ Syntax verwenden hier als das ist, was zur Zeit in Chrom funktioniert, aber es wird bald auf die neue SysTax wechseln ...

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

Sie auch tun können, dies mit animateMotion, aber Svg-Animationen sind bald zu entziehen. Sie müssen Ihren Code in irgendeiner Weise neu zu schreiben, früher oder später :-(

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

Quelle

2016-12-02 05:42:01

SVG Animated Graph Arrow

Antwort

Verwandte Themen