Search code examples
svgtexttransformflipmirror

SVG Text Flip / Mirror

I simply want to flip an SVG text element either horizontally or vertically but adding the transform="scale(-1, 1)" attribute results in a blank result.

<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>

Solution

  • It's off the SVG canvas. The x of 100 becomes -100 because that is scaled too. I've just negated the x value to make it visible again.

    <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>