Как разместить встроенный SVG в качестве фонового изображения в элементе ввода? - PullRequest
Новая
       35

Как разместить встроенный SVG в качестве фонового изображения в элементе ввода?

0 голосов
/ 11 мая 2018

Я использую встроенный 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>

1 Ответ

0 голосов
/ 11 мая 2018

Избавиться от: 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>
...