SVG转换 - 水平翻转

Question

我需要水平翻转这个SVG - 在网上找不到任何东西.这里是:

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

任何帮助赞赏,欢呼!

Answer 1

你可以设置一个变换来翻转东西,然后移动形状(因为它在原点上翻转).

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

Answer 2

如果您可以使用CSS（从今天起导入Inkscape时将不起作用），则还可以使用CSS缩放转换，其优点是默认情况下基于元素的中心： 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>