SVG 文本翻转/镜像

标签 svg text transform flip mirror

我只想水平或垂直翻转 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 Canvas 。 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>

关于SVG 文本翻转/镜像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61065385/

相关文章:

javascript - 在 SVG 线性渐变停止偏移中绑定(bind) Angular2 值?

regex - 在正则表达式匹配时打印匹配的行和行±1(1行)

python - 在Python中,我将如何为文本冒险创建一个保存系统?

c++ - boost::transform 与 std::transform

xml - 使用 XSL 将所有元素名称转换为小写?

javascript - 使用 JQuery 动画旋转 SVG 元素

svg - 如何防止 SVG 标记(箭头)继承路径的笔画宽度?

html - ios8 Webview svg 嵌入 html 不显示

file - 文本文件和二进制文件有什么区别。您如何决定何时使用什么?

javascript - 有人可以向我解释如何设置滚动功能可以向下/向上滚动以使用 jquery 的像素数量吗?