Wie skaliere ich ein SVG-Element mit animiert?

Question

ähnliche Fragen erscheinen vor gefragt worden zu sein, aber keine der Lösungen für mich zu arbeiten scheint, so ist hier mein Code:

this.animate({scale(2, 2, vinerBBoxX, vinerBBoxY)}, 100, mina.easeinout); 

vinerBBoxX ist das x-Zentrum des Elements und vinerBBoxY ist das Zentrum y, die beide hat beim Skalieren ohne Animation gut funktioniert.

Ich hatte Probleme mit der Skalierung im Allgemeinen und es gibt so viele Lösungen im Internet, die ich völlig undurchdringlich fand. Bitte helfen Sie!

Answer 1

Snap verwendet ein eigenes String-Format für Transformationen. s steht für scale und standardmäßig wird es um sein Zentrum skaliert. Das zu animierende Attribut ist 'transform', da es der Skalierung entgegengesetzt ist (die Transformation kann die Skalierung als Teil einer Zeichenkette nehmen, wenn sie gesetzt ist, zB transform: 'scale (2,2)'), aber dies würde nicht als funktionieren Animation, wie es ist.

Die einfachste Art und Weise, wie das ist ...

g.animate({ transform: 's2,4'}, 2000) 

Sie kombinieren Elemente als auch transformieren, wie

g.animate({ transform: 't200,200s2,4'}, 2000) 

um 't' 200.200 followe zu übersetzen d von scalex, y 's' 2,4

jsfiddle