JSFiddle - React, Tailwind, and code Playground

HTML

<svg id="petaldoc" width="1000" height="500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

<image id="flip" href="http://www.cpl.uh.edu/users/dinesh/apple_appstore.png" width=100>
</image>

</svg>

JavaScript

var img = document.getElementById("flip");
var xCord = 100;
var yCord = 100;
var imageSize = 100;
var flipLocation = (xCord*2 + imageSize);

img.setAttributeNS(null, 'x', xCord);
img.setAttributeNS(null, 'y', yCord);

img.setAttributeNS(null, 'transform', 'translate('+flipLocation+',0) scale(-1,1)');