Reputation: 25
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
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