SVG 转换 - 水平翻转答案

【问题标题】：SVG Transformation - Flip HorizontallySVG 转换 - 水平翻转
【发布时间】：2017-09-21 10:10:42
【问题描述】：

我需要水平翻转这个 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>

任何帮助表示赞赏，干杯！

【问题讨论】：

标签： html css web svg css-transforms

【解决方案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>

【讨论】：

翻译中缺少 %(0, -100%)
@manuel-84 不正确，您只能使用带有 CSS 转换的单位
这会垂直翻转，而不是水平翻转
是的，它是一个垂直翻转，同样的想法，但比例负值需要是第一个（x 轴）参数，如 scale(-1, 1)。它也不会围绕中心旋转，因此翻译部分只是将其移回画布上，您可能需要根据您正在使用的尺寸调整此数字。

【解决方案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>

【讨论】：

谢谢，这非常适合通过url("data:image/svg+xml翻转在css样式表中内联声明的svg