试图在 <svg> 中垂直翻转 <g>答案

【问题标题】：Trying to flip vertically a <g> inside a <svg>试图在 <svg> 中垂直翻转 <g>
【发布时间】：2023-03-17 10:25:01
【问题描述】：

我正在尝试垂直翻转 <g>，但它不起作用。实际上，我试图翻转的三角形显示出来了..

<!DOCTYPE html>
<html>
<body>

  <svg height="210" width="500">
    <g style="transform: scaleY(-1);"> <!-- THIS FLIPPING DOESN'T WORK-->
      <polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" />
    </g>
    <g>
      <polygon points="400,20 450,390 260,310" style="fill:lime;stroke:purple;stroke-width:1" />
    </g>
  </svg>

</body>
</html>

【问题讨论】：

这可能有助于developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform

标签： html css svg flip

【解决方案1】：

试试这个

<!DOCTYPE html>
<html>
  <body>
    <svg height="240" width="500">
      <g transform="scale(1, -1) translate(0, -250)">
        <polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" />
      </g>
      <g>
        <polygon points="400,20 450,390 260,310" style="fill:lime;stroke:purple;stroke-width:1" />
      </g>
      </svg>
  </body>
</html>

【讨论】：