CODEWITHSUNDEEP
htmlcsssvgflip
tirenweb
tirenweb

Reputation: 31709

Trying to flip vertically a <g> inside a <svg>

Iam trying to flip vertically a <g> but it doesn't work. Actually, the triangle which I'm trying to flip shows off..

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

Upvotes: 3

Views: 200

Answers (1)

Stephen Taylor
Stephen Taylor

Reputation: 868

Try this

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

Upvotes: 4

Related Questions