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?!
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>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments