如何将内联 svg 定位为输入元素中的背景图像？

Question

我在搜索框中使用内联 svg 作为背景图片。

我认为在 viewBox 中将宽度和高度设置为相同是正确的，但是 ejrm 将其设置为低于 20，它会截断部分 svg。显示超过 20，但位置不正确。设置 svg 大小和定位的正确方法是什么？

.input__search {
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 22a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm6.321-1.096l5.386 5.39a1 1 0 1 1-1.414 1.413l-5.386-5.388a8 8 0 1 1 1.414-1.415z' fill='red' fill-rule='nonzero'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0 center;
  padding: 10px 40px;
  //background-size: 40px;
}

<div class="container input">
  <input type="text" placeholder="search" class="input__search">
</div>

Answer 1

去掉：background-position:0 center;

.input__search {
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 22a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm6.321-1.096l5.386 5.39a1 1 0 1 1-1.414 1.413l-5.386-5.388a8 8 0 1 1 1.414-1.415z' fill='red' fill-rule='nonzero'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  padding: 10px 40px;
  //background-size: 40px;
}

<div class="container input">
  <input type="text" placeholder="search" class="input__search">
</div>

如何将内联 svg 定位为输入元素中的背景图像？

How do I position an inline svg as a background-image in an input element?

css

svg

background-image