将SVG沿x轴翻转，使其倒置。

Question

将SVG沿x轴翻转，使其倒置。

18

我正在尝试翻转这个在这里找到的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>

- dotwongdotcom

3个回答

6

您可以使用比例缩放变换，并调整视口框来实现如下效果：

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>

- Temani Afif

0

从2022年开始，您可以使用以下代码：

transform: rotateY(180deg)

和

transform: rotateX(180deg)

来沿着您想要的轴翻转。

- goodjobjohn

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- mmlr · Accepted Answer

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

请注意，此操作实际上是“旋转”，而不是“翻转”。如果需要翻转，则可以使用值为-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>