沿x轴翻转svg，使其上下颠倒

Question

我正在尝试翻转在此找到的SVG，以使空格位于底部，波浪位于顶部，但是我不知道该怎么做。有什么建议么？

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>

Answer 1

您可以使用比例变换并调整视图框，如下所示：

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>

Answer 2

最简单的方法可能是使用CSS变换旋转 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>