Kann doppelte Attribute in CSS-Aufruf zu jQueryLite nicht setzen

Question

Wie legen Sie doppelte Attribute in einem einzelnen CSS-Aufruf an jQueryLite fest? In Winkel, möchte ich so etwas wie dies auf einem SVG-Bild tun:

element.css({'transform': "rotate("+rot*360+"deg)",'transform': "scale("+scl+")"}); 

Dies sowohl die Rotation und die Skalierung eines SVG-Bild setzt. Das Ergebnis ist jedoch, dass das letzte Transformationsattribut alle vorherigen überschreibt. D.h., ich kann die Skala oder die Drehung einstellen, aber nicht beides.

In diesem Beispiel würde die erwartete CSS wie folgt aussehen:

transform: rotate(360deg); transform: scale(1) 

Answer 1

Das hat nichts mit JavaScript oder jQueryLite zu tun - in einem Stylesheet würden sich mehrere Deklarationen für dieselbe Eigenschaft gegenseitig überschreiben.

Die korrekte Syntax mehrere Transformationen angeben, ist

transform: rotate(360deg) scale(1) 

Answer 2

Sie keine CSS-Eigenschaft auf zwei völlig unterschiedliche Werte zur gleichen Zeit eingestellt werden.

Wenn Sie schrieb:

transform: rotate(360deg); transform: scale(1) 

dann der zweite Wert die erste überschreiben würde und es wäre das gleiche wie

transform: scale(1) 

Die Transformations Eigenschaft am Ende als nimmt eine durch Leerzeichen getrennte Liste von Werten . Sie würden schreiben müssen:

transform: rotate(360deg) scale(1); 

und in der Theorie, die Sie tun genau das gleiche in Ihrem JS:

element.css({'transform': "rotate("+rot*360+"deg) scale("+scl+")"}); 

Answer 3

Warum nicht die, durch die Zusammenlegung:

element.css({'transform': "rotate("+rot*360+"deg) scale("+scl+")"});