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

【问题标题】：Flip an svg along the x-axis so it's upside down沿 x 轴翻转 svg，使其上下颠倒
【发布时间】：2018-02-04 05:57:16
【问题描述】：

我正在尝试翻转这个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 svg

【解决方案1】：

最简单的方法可能是使用 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>

请注意，这实际上并不是“翻转”，而是旋转。如果翻转更合适，也可以使用值为-1 的scaleY。它也沿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>

【讨论】：

是的！这是如此简单和干净。正是我想要的。谢谢@mmlr :)
@dotwongdotcom 请注意，因为这会旋转页脚并可能影响页脚内的任何内容
谢谢，我找不到任何地方：transform: scaleY(-1);是我需要的。我不知道您可以使用负值...

【解决方案2】：

您可以像这样使用缩放变换和调整视图框：

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>

【讨论】：