Wie zu animieren stroke-dasharray mit Druckknopf.svg

Ich versuche zu animieren stroke-dasharray mit Druckknopf.svg aber nicht, dass es funktioniert: nichts passiert. Das Ziel ist, zu animieren, eine gerade Linie in eine gestrichelte Linie.

SVG

<svg>
    <line fill="none" stroke="#008D36" stroke-width="2" stroke-miterlimit="10" x1="175" y1="153" x2="175" y2="21" id="Line"/>
</svg>

CSS

line {
    stroke-dasharray: 0,0;
}

Javascript

$(function() {
    var s = Snap('svg');
    var l = s.select('#Line');
    l.animate({'stroke-dasharray':'1,20'}, 500);
});

Sehen diese Geige: http://jsfiddle.net/u4pxW/5/

  • Vielleicht ist diese Frage könnten Ihnen helfen: Animate gepunktete Weg, einen Punkt nach dem anderen
  • Hmm, in der Tat möchte ich animieren, eine gerade Linie in eine gestrichelte Linie. Also ich hatte zum zeichnen von zwei Linien: eine gerade Linie und eine gestrichelte Linie, während die gerade Linie sollte shortener und die gestrichelte Linie mehr. Zu kompliziert/zu viel code/zu viel unnötigen SVG-code für einen einfachen Effekt. Es scheint, dass diese Art der animation ist nicht möglich?
InformationsquelleAutor Slevin | 2014-07-09
  1. 5

    Es hängt davon ab, welchen Effekt Sie für gehen, aber Sie sollten in der Lage sein zu animieren. Es gibt ein paar verschiedene Möglichkeiten, zu animieren, und vielleicht bei diesem speziellen Beispiel, ich würde versuchen, Snap.animieren...

    var s = Snap('svg');
var l = s.select('#Line');

Snap.animate(0,20, function( value ) {
    l.attr({ 'stroke-dasharray': '1,' + value});
}, 2000);

    jsfiddle

    • Danke! Funktioniert wie ein Charme 🙂
    • fand diese Antwort aus der Suche nach einem Grund, warum ich kann nicht übersetzen Snap.animtate zu element.animieren für strokeDashoffset. Können Sie bitte angeben, mehr detaillierte, warum snap.animieren, in diesem konkreten Fall der richtige Weg und warum-element.animate ist nicht dabei es wird erwartet job? Dank
    • Ich war der Annahme, dass es vielleicht nicht wissen, wie zu animieren eine dasharray string, so bauen die Zeichenfolge innerhalb der animation, würde die Arbeit machen. Es sieht so aus, strokeDasharray auch festgelegt wird, wie css, in der Erwägung, dass snap neigt zum animieren von svg-Attributen (die ich persönlich denke, ist möglicherweise ein bug).
    InformationsquelleAutor Ian
Schreibe einen Kommentar