时间戳

首页 > 解决方案 > SVG文本翻转/镜像

svg - SVG文本翻转/镜像

问题描述

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>

标签： svgtexttransformflipmirror

解决方案

它不在 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>

推荐阅读