How to flip an svg image using CSS

Question

I have this svg embedded as the background image for a dropdown box using CSS:

.dropdown {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/></svg>");
}

This renders a nice little arrow on my dropdown:

My question is, how do I flip this so the arrow is pointing upwards? I know it's something to do with the d="..." property, but I can't seem to figure it out on my own. Any help is greatly appreciated!

Answer 1

You can add transform='scale(1,-1)' and transform-origin='center' attributes to your path tag to flip it. This can also be applied to <svg> directly as well

.dropdown {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/></svg>");
  width: 100px;
  height: 100px
}

.dropdown-flip {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' style=' transform: scale(-1,1)'><path transform='scale(1,-1)' transform-origin='center' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/></svg>");
  width: 100px;
  height: 100px;
}

<div class='dropdown'></div>


<div class='dropdown-flip'></div>