html - 尝试垂直翻转 <svg> 内的 <g>

标签 html css svg flip

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

<!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>

最佳答案

试试这个

<!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>

关于html - 尝试垂直翻转 <svg> 内的 <g>,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64046191/

相关文章:

javascript - 如何在div之间绘制响应线

css - 哪个浏览器返回 SVG 元素的 getBoundingClientRect 的正确结果?

javascript - 如何创建一个 html 输入文本区域,以便我可以在某些单词下划线或设置格式?

html - 防止 div 重叠为堆叠的 div 格式

reactjs - 在 react 应用程序中渲染 svg 图像时延迟

javascript - 如何让 <div> 中的两个元素调用不同的函数?

php - 关闭表中的多个垂直菜单

Python - 使用 DOM 获取 HTML

javascript - 如何使用 Javascript 将图像添加到我的调查问卷中?

javascript - 如何将 CSS 变量与 JavaScript 一起使用来更改图像?