Flip an svg along the x-axis so it's upside down
15,092
Solution 1
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.
body {
margin: 0;
}
footer {
position: absolute;
width: 100%;
height: 100px;
bottom: 0;
overflow: hidden;
transform: rotate(180deg);
}
<footer>
<svg viewBox="0 -20 700 110" width="100%" height="110" preserveAspectRatio="none">
<path transform="translate(0, -20)" d="M0,10 c80,-22 240,0 350,18 c90,17 260,7.5 350,-20 v50 h-700" fill="#CEB964" />
<path d="M0,10 c80,-18 230,-12 350,7 c80,13 260,17 350,-5 v100 h-700z" fill="#00273F" />
</svg>
</footer>
Note that this doesn't actually "flip", but rotate. If flipping is more appropriate, scaleY with a value of -1
can be used as well. It scales along the transform-origin
as well, so the above holds here as well.
body {
margin: 0;
}
footer {
position: absolute;
width: 100%;
height: 100px;
bottom: 0;
overflow: hidden;
transform: scaleY(-1);
}
<footer>
<svg viewBox="0 -20 700 110" width="100%" height="110" preserveAspectRatio="none">
<path transform="translate(0, -20)" d="M0,10 c80,-22 240,0 350,18 c90,17 260,7.5 350,-20 v50 h-700" fill="#CEB964" />
<path d="M0,10 c80,-18 230,-12 350,7 c80,13 260,17 350,-5 v100 h-700z" fill="#00273F" />
</svg>
</footer>
Solution 2
You may use scale transformation and adjust the viewbox like this:
body {
margin: 0;
}
footer {
position: absolute;
width: 100%;
height: 100px;
bottom: 0;
overflow: hidden;
}
<footer>
<svg viewBox="0 -70 700 110" width="100%" height="110" preserveAspectRatio="none">
<g transform="scale(1,-1)">
<path transform="translate(0, -20)" d="M0,10 c80,-22 240,0 350,18 c90,17 260,7.5 350,-20 v50 h-700" fill="#CEB964" />
<path d="M0,10 c80,-18 230,-12 350,7 c80,13 260,17 350,-5 v100 h-700z" fill="#00273F" />
</g>
</svg>
</footer>
Related videos on Youtube
Author by
dotwongdotcom
Updated on September 28, 2022Comments
-
dotwongdotcom over 1 year
I am trying to flip this SVG that I found on here so that the whitespace is on the bottom and the wave is on the top, but I can't figure out how to go about it. Any suggestions?
body { margin: 0; } footer { position: absolute; width: 100%; height: 100px; bottom: 0; overflow: hidden; }
<footer> <svg viewBox="0 -20 700 110" width="100%" height="110" preserveAspectRatio="none"> <path transform="translate(0, -20)" d="M0,10 c80,-22 240,0 350,18 c90,17 260,7.5 350,-20 v50 h-700" fill="#CEB964" /> <path d="M0,10 c80,-18 230,-12 350,7 c80,13 260,17 350,-5 v100 h-700z" fill="#00273F" /> </svg> </footer>
-
dotwongdotcom about 6 yearsYes! This is so simple and clean. Just what I was looking for. Thanks @mmlr :)
-
Temani Afif about 6 years@dotwongdotcom simply pay attention as this will rotate the footer and may affect any content you will have inside the footer
-
Eloi almost 3 yearsThank you, I couldn't find anywhere that: transform: scaleY(-1); is what I need it. I didn't know that you can use negatives values...