如何使用 CSS 翻转 svg 图像

Question

我使用 CSS:

将此 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>");
}

这在我的下拉菜单中呈现了一个漂亮的小箭头：

我的问题是，如何翻转它以使箭头指向上方？我知道这与 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>

如何使用 CSS 翻转 svg 图像

How to flip an svg image using CSS

css

svg