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>