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