javascript — Белый фон и границы для svg-картинки
Вопрос задан
Изменён 1 год 3 месяца назад
Просмотрен 381 раз
Есть кнопка с лупой (рядом с полем ввода Поиск по товарам) как на
Привожу код
.close {
margin-top: -14px;
padding-top: 5px;
padding-left: 5px;
padding-right: 5px;
font-size: 24px;
cursor: pointer;
display: inline-block;
}
#SearchBlock {
padding-top: 5px;
padding-left: 25px;
padding-right: 50px;
display: flex;
}
#SearchBlock input {
height: 100%;
}
#SearchBlock #SearchButton {
height: 100%;
} <div>
<div>
<div>×</div>
</div>
<div>
<span>
<span>
<input type="search" placeholder="Поиск по товарам">
</span>
<span>
<button><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.
w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.22703 5.22703C7.86307 2.591 12.1369 2.591 14.773 5.22703C17.2298 7.68382 17.3968 11.5632 15.2742 14.2135L19.0607 18L18 19.0607L14.2135 15.2742C11.5632 17.3968 7.68381 17.2298 5.22703 14.773C2.59099 12.1369 2.59099 7.86307 5.22703 5.22703ZM13.7123 6.28769C11.6621 4.23744 8.33794 4.23744 6.28769 6.28769C4.23744 8.33795 4.23744 11.6621 6.28769 13.7123C8.33794 15.7626 11.6621 15.7626 13.7123 13.7123C15.7626 11.6621 15.7626 8.33795 13.7123 6.28769Z"></path></svg></button>
</span>
</span>
</div>
<div>
</div>
</div>
Подскажите как добиться вида кнопки с лупой как на скриншоте (с белым фоном и границами).
Подскажите как добиться оранжевого подсвечивания кнопки с лупой при наведении курсора мыши.
- javascript
- html
- css
- svg
- изображения
У вас в вашем коде написано то что бы не отображалась заливка SVG а конкретно написано это так fill=»none» внутри кнопки в теге svg сразу после viewBox
fill выполняет туже роль что и background в css
<button><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.
w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.22703 5.22703C7.86307 2.591 12.1369 2.591 14.773 5.22703C17.2298 7.68382 17.3968 11.5632 15.2742 14.2135L19.0607 18L18 19.0607L14.2135 15.2742C11.5632 17.3968 7.68381 17.2298 5.22703 14.773C2.59099 12.1369 2.59099 7.86307 5.22703 5.22703ZM13.7123 6.28769C11.6621 4.23744 8.33794 4.23744 6.28769 6.28769C4.23744 8.33795 4.23744 11.6621 6.28769 13.7123C8.33794 15.7626 11.6621 15.7626 13.7123 13.7123C15.7626 11.6621 15.7626 8.33795 13.7123 6.28769Z"></path></svg></button>
Что бы вам добиться желаемого результата нужно убрать фон у кнопки и так же чуть чуть стилизовать svg_ху => смотрим результат
#SearchButton {
outline: none;
border: none;
background: transparent;
cursor: pointer;
}
#SearchButton:active {
outline: 1px solid blue;
}<button type="button"><svg viewBox="0 0 24 24" fill="" xmlns="http://www.w3.org/2000/svg"><path d="M5.22703 5.22703C7.86307 2.591 12.1369 2.591 14.773 5.22703C17.2298 7.68382 17.3968 11.5632 15.2742 14.2135L19.0607 18L18 19.0607L14.2135 15.2742C11.5632 17.3968 7.68381 17.2298 5.22703 14.773C2.59099 12.1369 2.59099 7.86307 5.22703 5.22703ZM13.7123 6.28769C11.6621 4.23744 8.33794 4.23744 6.28769 6.28769C4.23744 8.33795 4.23744 11.6621 6.28769 13.7123C8.33794 15.7626 11.6621 15.7626 13.7123 13.7123C15.7626 11.6621 15.7626 8.33795 13.7123 6.28769Z"></path></svg></button>
Я добавил на псевдокласс :active outline который вы уберёте
2
Зарегистрируйтесь или войдите
Регистрация через Google
Регистрация через Facebook
Регистрация через почту
Отправить без регистрации
Почта
Необходима, но никому не показывается
Отправить без регистрации
Необходима, но никому не показывается
Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки
Заливка и обводка — SVG
- « Предыдущая статья
- Следующая статья »
Есть несколько способов раскрасить фигуры SVG (в т.
Раскраска (Painting)
Основная раскраска может быть сделана установкой двух свойств на ноде — fill и stroke. Fill — устанавливает цвет внутри объекта, а stroke задаёт цвет линии, которая рисуется вокруг объекта. Вы можете использовать CSS-наименования цветов, что и в HTML — названия цветов (например, red), rgb-значения, hex-значения, rgba-значения и т.д.
<rect x="10" y="10" stroke="blue" fill="purple"
fill-opacity="0.5" stroke-opacity="0.8"/>
Кроме того, вы можете задать прозрачность заливке и обводке по отдельности в SVG. Их прозрачность управляется атрибутами fill-opacity, stroke-opacity.
Примечание: Замечание: в Firefox 3+ допустимы rgba-значения и это даёт такой же эффект прозрачности, но для совместимости с другими просмотрщиками часто лучше определить прозрачность обводки/заливки отдельно.
Если вы укажете и rgba-значение и значение fill-opacity/stroke-opacity — будут применены оба.
Обводка (Stroke)
Кроме цветовых свойств обводки, есть несколько атрибутов, управляющих способом обводки.
<?xml version="1.0" standalone="no"?> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <line x1="40" x2="120" y1="20" y2="20" stroke="black" stroke-width="20" stroke-linecap="butt"/> <line x1="40" x2="120" y1="60" y2="60" stroke="black" stroke-width="20" stroke-linecap="square"/> <line x1="40" x2="120" y1="100" y2="100" stroke="black" stroke-width="20" stroke-linecap="round"/> </svg>
Свойство stroke-width определяет ширину обводки. Штрихи обводки рисуются вокруг пути. В примере выше путь изображён розовым, а обводка — черным.
Есть три возможных значения для stroke-linecap:
buttобрывает линию под прямым углом к направлению обводки и делает это сразу по окончании линии.squareв основном действует также, но немного растягивает обводку по краям пути. Длина, на которую продлевается обводка — это половина заданного значения stroke-width.roundзадаёт закруглённые углы по краям обводки. Радиус этих кривых также управляется параметромstroke-width.
Используйте stroke-linejoin, чтобы определить, как соединять обводку двух сегментов линии.
<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<polyline points="40 60 80 20 120 60" stroke="black" stroke-width="20"
stroke-linecap="butt" fill="none" stroke-linejoin="miter"/>
<polyline points="40 140 80 100 120 140" stroke="black" stroke-width="20"
stroke-linecap="round" fill="none" stroke-linejoin="round"/>
<polyline points="40 220 80 180 120 220" stroke="black" stroke-width="20"
stroke-linecap="square" fill="none" stroke-linejoin="bevel"/>
</svg>
Каждая из этих полилиний имеет два сегмента.
Соединение, где они встречаются, управляется атрибутом stroke-linejoin. Есть три возможных значения для этого атрибута:
miterпродолжает линию обводки дальше её обычной ширины, чтобы создать единственный квадратный угол.roundсоздаёт закруглённый сегмент линииbevelсоздаёт новый угол для помощи в переходе между двумя сегментами
Наконец, вы можете использовать пунктирные линии в обводке, определив атрибут stroke-dasharray.
<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<path d="M 10 75 Q 50 10 100 75 T 190 75" stroke="black"
stroke-linecap="round" stroke-dasharray="5,10,5" fill="none"/>
<path d="M 10 75 L 190 75" stroke="red"
stroke-linecap="round" stroke-width="1" stroke-dasharray="5,5" fill="none"/>
</svg>
В качестве аргумента атрибут stroke-dasharray принимает последовательность чисел, разделённых запятой.
Примечание: Замечание: в отличие от путей, эти числа ДОЛЖНЫ быть разделены запятыми (пробелы игнорируются).
Первое число определяет длину штриха, второе — длину между штрихами. В примере выше, второй путь чередует заливку штрихом в 5 пикселей, затем 5 пустых пикселей перед следующим штрихом в 5 пикселей. Вы можете задать больше чисел, если хотите более сложную систему штрихов. В первом примере задано 3 числа и в этом случае рендер берёт эти числа дважды, чтобы создать чётный паттерн. Т.о. первый путь отображается 5 закрашенными, 10 пустыми, 5 закрашенными и затем ещё раз 5 пустыми, 10 закрашенными, 5 пустыми «пикселями». Затем паттерн повторяется.
Также есть дополнительные stroke и fill свойства: fill-rule, которое определяет как будут заливаться сложные фигуры, которые имеют пересечения внутри себя; stroke-miterlimit, which determines if a stroke should draw miters и stroke-dashoffset, который указывает где начинается dash-array в линии (позволяет задать смещение пунктирной обводки относительно первоначального положения)
В дополнение к установке атрибутов объектов, вы также можете использовать CSS для стилизации заливки и обводки.
Не все атрибуты могут быть установлены через CSS. Но атрибуты взаимодействия с раскраской и заливкой обычно доступны, так что fill, stroke, stroke-dasharray и т.д. могут быть заданы этим способом, также как и градиенты, и паттерны, что показано ниже. Атрибуты вроде width, height или команд для путей SVG не могут быть установлены через CSS. Проще всего просто протестировать и узнать, что доступно, а что нет.
Примечание: Спецификация SVG строго разделяет атрибуты на свойства и другие атрибуты. Первые могут быть изменены через CSS, а вторые — нет.
CSS может использоваться инлайн через атрибут style:
<rect x="10" y="10"/>
или может быть помещён в специальную стилевую секцию, которую вы включите. Вместо отображения такой секции в разделе <head>, как это делается в HTML, она включается в зону <defs>, предназначенную для определений.
Здесь можно создавать элементы, которые не появятся сами в SVG, но будут использованы другими элементами.
<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<style type="text/css"><![CDATA[
#MyRect {
stroke: black;
fill: red;
}
]]></style>
</defs>
<rect x="10" y="10"/>
</svg>
Перемещение стилей в отдельную зону может сделать проще применение свойств к большим группам элементов. Вы также можете использовать вещи типа псевдоклассов наведения для создания эффектов переворачивания:
#MyRect:hover {
stroke: black;
fill: blue;
}
Также можно определить отдельный файл стилей для ваших CSS-правил через обычный XML-stylesheet синтаксис:
<?xml version="1.0" standalone="no"?> <?xml-stylesheet type="text/css" href="style.css"?> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <rect/> </svg>
где style.
css выглядит примерно так
#MyRect {
fill: red;
stroke: black;
}
- « Предыдущая статья
- Следующая статья »
Last modified: , by MDN contributors
Быстрая настройка и применение фонов
Жидкий сыр
Бесплатно с указанием авторства
КОПИРОВАТЬ И ВСТАВИТЬ
СКАЧАТЬ
Как атрибутировать
Вы можете указать SVG Backgrounds, поделившись SVGBackgrounds на своем веб-сайте или в социальных сетях.
При неограниченной подписке указание авторства не требуется.
Подписывайся Способы атрибутирования
Разблокировать более 200 фонов
» Использовать неограниченное количество фонов
» В неограниченных проектах
» Для 1 дизайнера
» Атрибуция не требуется
Unlock Proпосмотреть цены
Легко создавайте потрясающие веб-сайты с полноэкранной графикой
размером менее 5 КБ
Попробуйте наши бесплатные фоны SVG
Щелкните фон, чтобы начать настройку цветов и других атрибутов, таких как непрозрачность, масштаб и обводка.
Выберите фон
СМЕШИВАНИЕ
РЕЖИМ LCH
РАЗНООБРАЗИЕ
ИЗМЕНИТЬ
ВЕСЫ
ВЕСЫ
ВЕСЫ
ВЕСЫ
МАСШТАБ
Обновите рабочий процесс проектирования
Итерация одним щелчком мыши
Простой стиль
Развертывание за секунды
Экспорт фонов SVG
в ваши любимые инструменты
Нажмите на логотип, чтобы узнать, как
HTML
УСБ
Иллюстратор
WordPress
Элементор
Веб-поток
Канва
Стоковая графика без хлама
Мы отказались от худших аспектов покупки стоковой графики, угождая профессионалам, разрабатывающим веб-сайты.
- Без почтовых индексов
- Нет беспорядка в файлах
- Нет одноразовой лицензии
- Программное обеспечение не требуется
- Без водяных знаков
Оптимизировано для Интернета
Нет громоздкого кода
Разработано с учетом размера файла, чтобы по возможности сократить количество байтов быть настроенным перед экспортом
Проект готов
Экспорт графики прямо в HTML или CSS (файлы не требуются)
«Только что наткнулся на эту жемчужину.
Отличный новый инструмент для нашего рабочего процесса проектирования»
Lytbox Co.
@lytbox_co
«Я был в восторге, увидев, что сайт SVG Backgrounds недавно получил обновление. было похоже на ДА, я делаю это».
Chris Coyier
@chriscoyier
«Безумно полезный инструмент для веб-разработчиков/дизайнеров… Я постоянно использую его для пользовательских фонов SVG»
Jarod Peachey
@jarodpeachey
Раскройте свои сверхспособности SVG
Бесплатные фоны SVG
Наслаждайтесь нашей коллекцией из 48 бесплатных фонов SVG и почувствуйте мощь наших инструментов SVG наша премиальная графическая библиотека и набор инструментов, которые помогут вам быстрее создавать лучшие веб-сайты
Unlock ProBackground Svg — Etsy.de
Etsy больше не поддерживает старые версии вашего веб-браузера, чтобы обеспечить безопасность пользовательских данных. Пожалуйста, обновите до последней версии.
Воспользуйтесь всеми преимуществами нашего сайта, включив JavaScript.
