Search code examples
htmltwitter-bootstrapsvgpath

How to flip a svg path in html?


I'd like to use an icon from bootstrap, but I need it flipped vertically:

https://icons.getbootstrap.com/icons/arrow-left-right/

What I'd rather need is a arrow-right-left, so that the upper arrow points to the right.

I tried to transform with transform="scale(-1 1) translate(-1260 0)", but that did not work:

https://jsfiddle.net/j63zpwqr/

So how could I flip a path on the Y-axis?


Solution

  • I changed path info from 3 paths into 1 because Bootstrap icons are bloated,
    using https://yqnn.github.io/svg-path-editor/

    That also changed the SVG from Absolute positioning to Relative

    a transform="scale(-1 1) flips the image

    <svg xmlns="http://www.w3.org/2000/svg" width="160" height="160" fill="red" 
         class="bi bi-arrow-left-right" 
         viewBox="0 0 16 16" 
         transform="scale(-1 1)">
      <path d="m10.15 7.65a.5.5 0 01.71 0l3 3a.5.5 0 010 .71l-3 3a.5.5 0 01-.71-.71l2.65-2.65l-2.65-2.65a.5.5 0 010-.71zm-8.15 3.35a.5.5 0 01.5-.5h10.5a.5.5 0 010 1h-10.5a.5.5 0 01-.5-.5zm3.85-9.35a.5.5 0 010 .71l-2.65 2.65l2.65 2.65a.5.5 0 11-.71.71l-3-3a.5.5 0 010-.71l3-3a.5.5 0 01.71 0zm-3.35 3.35a.5.5 0 01.5-.5h10.5a.5.5 0 010 1h-10.5a.5.5 0 01-.5-.5z" />
    </svg>