38

I need to flip this SVG horizontally - can't find anything online. Here it is:

  <svg id="bigHalfCircle" style="display: block;" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none">
            <path d="M 0,100 C 40,0 60,0 100,100 Z"/>
        </svg>

Any help appreciated, cheers!

Alexandr_TT
  • 13,635
  • 3
  • 27
  • 54
Alex
  • 403
  • 1
  • 4
  • 4

3 Answers3

47

You can just set a transform to flip things and then move the shape (as it's flipped about the origin). 

<svg id="bigHalfCircle" style="display: block;" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none">
    <path transform="scale(1, -1) translate(0, -100)" d="M 0,100 C 40,0 60,0 100,100 Z"/>
</svg>
Lee Taylor
  • 7,761
  • 16
  • 33
  • 49
Robert Longson
  • 118,664
  • 26
  • 252
  • 242
  • 4
    missing % in translate(0, -100%) – manuel-84 Aug 28 '19 at 15:13
  • @manuel-84 incorrect you can only use units with CSS transforms – Robert Longson Aug 28 '19 at 15:21
  • 2
    This flips vertical, not horizontal – SaroGFX Sep 01 '20 at 10:27
  • 1
    yes, its a vertical flip, same idea but the scale negative value needs to be the first (x axis) param like scale(-1, 1). it doesn't rotate around the centre either so the translate portion just shifts it back on to the canvas, you may need to adjust this number based on the size you're working with. – Eamon Jul 23 '21 at 00:13
44

If you can use CSS (this does not work when imported into Inkscape as of today), you can also use a CSS scale transform, which has the advantage that it is based on the element's center by default: transform: scale(-1,1);

<svg id="bigHalfCircle" style="display: block; transform: scale(-1,1)" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none">
<path d="M 0,100 C 40,0 60,0 100,100 Z"/>
</svg>
ashleedawg
  • 20,365
  • 9
  • 72
  • 105
Chris K
  • 1,376
  • 1
  • 14
  • 18
  • thank you, this worked great to flip an svg declared inline in a css stylesheet via `url("data:image/svg+xml` – kjones Feb 24 '21 at 22:53
2

Another more simpler approach may be to use transform: rotate(180deg) wherever you want to flip an element.

blek__
  • 98
  • 1
  • 7