Flipping an SVG-CodePudding

I have a SVG But for some reason it is upside down . This SVG has some styling applied but it doesn't suppose to flip it . The styling i have applied on the SVG :

" transform=scale(0.00800);
fill="#404952" ;
stroke="#fff" ;
stroke-width='20' ;
transform-origin: center;
transform-box: fill-box;
transition: linear;
transition-duration: 1000ms;
"

I did a quick search and found out that the solution is supposed to be as simple as adding

"transform= rotate(0.5turn)"

( or 'deg' units ) or in my case since i already use transform -

transform= scale(0.00800) rotate(0.5turn)

but unfortunately not only it doesn't work for me , it also canceled the effect of the 'scale' .

i'm not sure why this is happening , but if you have any suggestions / solutions i will be glad to try them out .

edit : Sorry , I know the way I have typed the styling might be confusing or wrong . Let me explain : I am using 'styled Components' for the tranistion & transform stuff (execpt scale). The other props i pass at the jsx element itself so it kinda looks like this : <svg > <g fill="someColor"> ....</g></svg> , thats why the syntax at my post is kinda mixed up .

CodePudding user response：

In case of css

transform-style: preserve-3d;
transform:rotateX(180deg); 180 or - 180 // if not working add 
perspective:800px; //change this 800px

CodePudding user response：

If this is under <style>...</style>, try using property: value instead of property = value

So your transform CSS should be like so instead:

transform: scale(0.00800) rotate(0.5turn);

If this is under an inline SVG attribute, try add a quote around it like so:

<svg>
<g transform="scale(0.00800) rotate(0.5turn)">...</g>
</svg>