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>

SVG 转换 - 水平翻转

SVG Transformation - Flip Horizontally

html

css

svg

css-transforms

web