SVG Transformation - Flip Horizontally

Question

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!

Solution 1

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>

Solution 2

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>

Comments

[manuel-84]

missing % in translate(0, -100%)

[Robert Longson]

@manuel-84 incorrect you can only use units with CSS transforms

[Saro Verhees]

This flips vertical, not horizontal

[kjones]

thank you, this worked great to flip an svg declared inline in a css stylesheet via url("data:image/svg+xml

[Eamon]

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.