title: Flipping SVG arrow and make it point right?
body: <p>I have a path element combined with a marker element to create an arrow in SVG. However, the current arrow that I have points left, but I need mind to point right. I have played around quite a bit with the <code>d</code> attribute of the path, but I can't figure out how to flip it.</p>
  
  <p>So this is the HTML for the arrow:</p>
  
  <pre><code>&lt;defs&gt;
      &lt;marker id="arrow-5" orient="auto" markerWidth="10" markerHeight="10" refX="1" refY="4"&gt;
          &lt;path d="M0,0 L0,8 L8,4 z" fill="#5a5a5a"&gt;&lt;/path&gt;
      &lt;/marker&gt;
  &lt;/defs&gt;
  </code></pre>
  
  <p>And this draws an arrow like this:</p>
  
  <p><a href="https://i.stack.imgur.com/lKsj5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lKsj5.png" alt="Flipped arrow"></a></p>
  
  <p>So what would be the way to flip this arrow and make it point the other way?</p>