如何使用CSS翻转svg图像

Question

我将这个svg作为使用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>");
}

这在我的下拉列表上呈现了一个漂亮的小箭头：

​

我的问题是，我如何翻转这个箭头是朝上的？我知道这与d="..."属性有关，但我似乎无法自己解决这个问题。任何帮助都是非常感谢的！

Answer 1

您可以将transform='scale(1,-1)'和transform-origin='center'属性添加到path标记中来翻转它。这也可以直接应用于<svg>。

​

.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>

​