我使用 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='#000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/></svg>");
}
這會在我的下拉串列中呈現一個漂亮的小箭頭：
我的問題是，我如何翻轉它以使箭頭指向上方？我知道這與d="..."財產有關，但我自己似乎無法弄清楚。任何幫助是極大的贊賞！
uj5u.com熱心網友回復：
您可以向標簽添加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='#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='%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>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/445179.html
上一篇：將tex與圖示的高度對齊