我正在尝试翻转这个 SVG that I found on here这样空白在底部,波浪在顶部,但我不知道该怎么做。有什么建议吗?
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>
最佳答案
最简单的可能是使用 CSS 转换为 rotate 180 度。由于初始值为 transform-origin
是 50% 50% 0
旋转发生在中心周围。这避免了实际修改 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>
请注意,这实际上并不是“翻转”,而是旋转。如果翻转更合适,scaleY也可以使用值为 -1
的值。它也沿着 transform-origin
扩展,所以上面的内容也适用于此。
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>
关于css - 沿 x 轴翻转 svg,使其上下颠倒,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48602270/