title: How To Flip SVG Horizontally?
body: <p>I am trying to flip the following SVG horizontally:</p>
  
  <pre><code>&lt;svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 36.1 25.8" enable-background="new 0 0 36.1 25.8" xml:space="preserve"&gt;
      &lt;g&gt;
          &lt;line fill="none" stroke="#FFFFFF" stroke-width="3" stroke-miterlimit="10" x1="0" y1="12.9" x2="34" y2="12.9"&gt;&lt;/line&gt;
          &lt;polyline fill="none" stroke="#FFFFFF" stroke-width="3" stroke-miterlimit="10" points="22.2,1.1 34,12.9 22.2,24.7   "&gt;&lt;/polyline&gt;
      &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>I have tried <code>transform="scale(1, -1) translate(0, -100)"</code> among other variations of this, and all it does is delete the vector. I also have a CodePen here: <a href="https://codepen.io/bick/pen/eYNQaqX" rel="nofollow noreferrer">https://codepen.io/bick/pen/eYNQaqX</a></p>
  
  <p>Thanks!</p>