title: SVG. Reverse image using css. Keep image at the same place
body: <p>Here is a codepen example <a href="https://codepen.io/yury-leonov/pen/rZxxQE" rel="nofollow noreferrer">https://codepen.io/yury-leonov/pen/rZxxQE</a></p>
  <h3>Code from example:</h3>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(".example").on("click", function(e){
    $(e.target).toggleClass("reverse");
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.reverse{
      transform: scaleX(-1);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;div style="width: 700px;height: 700px;margin-left: 100px"&gt;
      &lt;svg viewBox="-200 0 700 700"&gt;
          &lt;image class="example" href="https://i.pinimg.com/originals/6f/3d/6a/6f3d6aab605e25af947d804c4a2cb558.jpg" width="150px" height="150px" x="50", y="50"/&gt;
          &lt;image class="example" href="https://i.pinimg.com/originals/6f/3d/6a/6f3d6aab605e25af947d804c4a2cb558.jpg" width="150px" height="100px" x="100", y="0"/&gt;
        &lt;!--x value can be changed during time--&gt;
      &lt;/svg&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <h3>Issue:</h3>
  <p>Arrow moves from its position</p>
  <h3>Expected:</h3>
  <p>Arrow is reversed. Stay at same place. Do it only based on css (without js calculating  final x-value and setting it up)</p>
  <h3>PS:</h3>
  <p>hardcode for translateX(-???px) is not an option, because there could be many objects which should be reversed.</p>