CODEWITHSUNDEEP
javascriptcssangularjssvg
metalaureate
metalaureate

Reputation: 7732

Can't set duplicate attributes in CSS call to jQueryLite

How to set duplicate attributes in a single CSS call to jQueryLite? In angular, I want to do something like this on an SVG image:

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

This sets both the rotation and the scale of an SVG image. However, the result is that the last 'transform' attribute overwrites any previous ones. I.e., I can set the scale or the rotation but not both.

In this example, the expected css would look like:

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

Upvotes: 0

Views: 20

Answers (3)

C3roe
C3roe

Reputation: 96382

This has nothing to do with JavaScript or jQueryLite – in a stylesheet, multiple declarations for the same property would overwrite each other as well.

The correct syntax to specify multiple transformations is 

transform: rotate(360deg) scale(1)

Upvotes: 1

ErTR
ErTR

Reputation: 905

Why not merging those by:

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

Upvotes: 1

Quentin
Quentin

Reputation: 944113

You can't set a CSS property to two completely different values at the same time.

If you wrote:

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

then the second value would overwrite the first one and it would end up being the same as

transform: scale(1)

The transform property takes a space separated list of values. You would need to write:

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

and, in theory, you do exactly the same in your JS:

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

Upvotes: 2

Related Questions