htmlcsswebsvgcss-transforms

SVG Transformation - Flip Horizontally

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

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