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='#000' 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!
CodePudding user response:
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='#000' 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='#000' 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>