Menu
I have this SVG:
* { background: #e1e1e1; }<svg class="decor" height="100%" preserveaspectratio="none" version="1.1" viewbox="0 0 100 100" width="100%" xmlns="http://www.w3.org/2000/svg"> <path d="M0 0 L100 100 L0 100" stroke-width="0"></path> </svg>How to rotate it by 180 degree?!
DEMO
288
Just use the element type selector and add the transform: rotate(180deg) property to it like in the below snippet. Show activity on this post. Inline you would do it like this: x-axis flip : transform="scale(-1 1)"
The rotate(<a> [<x> <y>]) transform function specifies a rotation by a degrees about a given point. If optional parameters x and y are not supplied, the rotation is about the origin of the current user coordinate system. If optional parameters x and y are supplied, the rotation is about the point (x, y) .
The simplest would possibly be to use a CSS transform to rotate by 180 degrees. Since the initial value for transform-origin is 50% 50% 0 the rotation happens around the center. This avoids the need to actually modify the SVG. Note that this doesn't actually "flip", but rotate.
Just use the element type selector and add the transform: rotate(180deg) property to it like in the below snippet.
* { background: #e1e1e1; } svg { transform: rotate(180deg); }<svg class="decor" height="100%" preserveaspectratio="none" version="1.1" viewbox="0 0 100 100" width="100%" xmlns="http://www.w3.org/2000/svg"> <path d="M0 0 L100 100 L0 100" stroke-width="0"></path> </svg>Or, if you want to rotate only the path and not the svg itself, then include a transform-origin like in the below snippet:
* { background: #e1e1e1; } path { transform: rotate(180deg); transform-origin: 50% 50%; }<svg class="decor" height="100%" preserveaspectratio="none" version="1.1" viewbox="0 0 100 100" width="100%" xmlns="http://www.w3.org/2000/svg"> <path d="M0 0 L100 100 L0 100" stroke-width="0"></path> </svg>Inline you would do it like this:
eg. in your example:
<svg class="decor" transform="scale(-1 1)" height="100%" preserveaspectratio="none" version="1.1" viewbox="0 0 100 100" width="100%" xmlns="http://www.w3.org/2000/svg"> <path d="M0 0 L100 100 L0 100" stroke-width="0"></path> </svg> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
