CODEWITHSUNDEEP
htmlcsssvg
pdoubl3p
pdoubl3p

Reputation: 25

Invert svg from right to left

I need to invert svg but I'm not understanding how to do that. Currently it appear from right to left, I've to do the same thing but from left to right Someone could please explain it? Here is the code:

 <svg class="separator__svg" width="100%" height="400" viewBox="0 0 100 100" preserveAspectRatio="none" fill="#fff" version="1.1" xmlns="http://www.w3.org/2000/svg">
                <path d="M 100 100 V 10 L 0 100" />
                <path d="M 30 73 L 100 18 V 10 Z" width="100%" height="100%" fill="#01f7b6" stroke-width="0" />
            </svg>

Thanks PP

Upvotes: 0

Views: 1137

Answers (1)

Omkar76
Omkar76

Reputation: 1638

Use the transform attribute with value scale(-1 1).

<svg class="separator__svg" width="100%" height="400" viewBox="0 0 100 100" preserveAspectRatio="none" fill="#fff" version="1.1" xmlns="http://www.w3.org/2000/svg">
     <path d="M 100 100 V 10 L 0 100" />
     <path d="M 30 73 L 100 18 V 10 Z" width="100%" height="100%" fill="#01f7b6" stroke-width="0" />
</svg>

<hr/>
<svg class="separator__svg" width="100%" height="400" viewBox="0 0 100 100" preserveAspectRatio="none" fill="#fff" version="1.1" xmlns="http://www.w3.org/2000/svg" 
     transform="scale(-1 1)">
     <path d="M 100 100 V 10 L 0 100" />
     <path d="M 30 73 L 100 18 V 10 Z" width="100%" height="100%" fill="#01f7b6" stroke-width="0" />
</svg>

Upvotes: 4

Related Questions