SVG文本翻转/镜像

【问题标题】：SVG Text Flip / MirrorSVG文本翻转/镜像
【发布时间】：2020-07-18 18:44:31
【问题描述】：

SVG 菜鸟在这里。我只是想水平或垂直翻转 SVG 文本元素，但添加 transform="scale(-1, 1)" 属性会导致空白结果。

<html>
<body>
    <svg xmlns="http://www.w3.org/2000/svg"
         xmlns:xlink="http://www.w3.org/1999/xlink"
         width="200"
         height="200">

        <text x="100"
              y="100"
              transform="scale(-1, 1)">SVG test text</text>
    </svg>
</body>
</html>

【问题讨论】：

标签： svg text transform flip mirror

【解决方案1】：

它不在 SVG 画布上。 100 的 x 变为 -100，因为它也被缩放了。我刚刚否定了 x 值以使其再次可见。

<html>
<body>
    <svg xmlns="http://www.w3.org/2000/svg"
         xmlns:xlink="http://www.w3.org/1999/xlink"
         width="200"
         height="200">

        <text x="-100"
              y="100"
              transform="scale(-1, 1)">SVG test text</text>
    </svg>
</body>
</html>

【讨论】：