Svg фон: Как svg изображению задать фон? Как применить z-index к ::before и ::after? — Хабр Q&A

Разное 

Содержание

javascript — Белый фон и границы для svg-картинки

Есть кнопка с лупой (рядом с полем ввода Поиск по товарам) как на

Привожу код

.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>&times;</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>

  1. Подскажите как добиться вида кнопки с лупой как на скриншоте (с белым фоном и границами).

  2. Подскажите как добиться оранжевого подсвечивания кнопки с лупой при наведении курсора мыши.

  • 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

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Заливка и обводка — SVG

  • « Предыдущая статья
  • Следующая статья »

Есть несколько способов раскрасить фигуры SVG (в т.ч. с указанием атрибутов объекта), используя инлайн-CSS, встроенную CSS-секцию, или внешний файл CSS. Большая часть SVG, которую вы встретите в интернете, использует встроенный CSS, однако преимущества и недостатки есть у каждого типа.

Раскраска (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. Демонстрируется выше. Свойство управляет отображением концов линий.

Есть три возможных значения для 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;
}
  • « Предыдущая статья
  • Следующая статья »

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.
Want to get more involved?

Learn how to contribute.

This page was last modified on by MDN contributors.

Подписаться | Фоны SVG

Получите доступ к более чем 250 фонам веб-сайтов
и сотням другой графики

$15

ЕЖЕМЕСЯЧНО

Подписка

Неограниченное количество фонов

Неограниченное количество проектов 900 04

1 Дизайнер

Ссылка не требуется

СОХРАНИТЬ $81

$99

ЕЖЕГОДНО

Подписаться

Неограниченное количество фонов

Неограниченное количество проектов

1 Дизайнер

Атрибуция не требуется

Зафиксируйте свою ставку до следующего повышения цен.

«Только что наткнулся на эту жемчужину. Отличный новый инструмент для нашего рабочего процесса проектирования»

Lytbox Co.

@lytbox_co

«Я был в восторге, увидев, что сайт SVG Backgrounds недавно получил обновление. было похоже на ДА, я делаю это».

Chris Coyier

@chriscoyier

«Безумно полезный инструмент для веб-разработчиков/дизайнеров… Я постоянно использую его для пользовательских фонов SVG»

Джарод Пичи

@jarodpeachy

Обновите свой рабочий процесс проектирования

Работайте быстрее

Сосредоточьтесь на общей картине, используя наш широкий выбор профессиональной графики

Визуализируйте великолепие

Пробуйте вдохновляющие дизайны без водяных знаков и никогда не соглашайтесь снова скучно

Простая настройка

Интуитивно понятный пользовательский интерфейс поможет вам избежать многочасового просеивания SVG-кода

Развертывание за секунды

Скопируйте и вставьте SVG или CSS, не возясь с файлами изображений и загрузкой

Упакованные ценности

Непревзойденная коллекция

Разблокируйте нашу эксклюзивную библиотеку, загруженную двумя сотнями фонов и бесшовных узоров

Непревзойденная цена

Сэкономьте сотни, если не тысячи — вы переплатите в другом месте, пытаясь лицензировать сопоставимую библиотеку

Неограниченное использование

Используйте неограниченное количество фонов в неограниченных проектах, и ваши неограниченные клиенты будут в восторге

Краткий обзор графики

Посмотреть версию с более высоким разрешением (2 МБ)

Общие вопросы


Почему SVGBackgrounds.

com?

SVGBackgrounds облегчает жизнь разработчикам и дизайнерам, а также тем, у кого нет профессиональных творческих навыков. Наш простой в использовании фоновый инструмент позволяет вам настраивать визуально потрясающие фоны с молниеносным развертыванием в ваших проектах, чтобы вы могли лучше проводить время, например, отдыхая на пляже.

Зачем мне использовать SVG?

Современные веб-сайты очень наглядны, но большинство форматов изображений громоздки, что замедляет загрузку веб-сайтов. Вот где сияют SVG! SVG масштабируемы, имеют небольшой размер файла, высокое разрешение, хорошо поддерживаются и являются идеальным способом выделиться среди конкурентов.

Что входит в платные планы?

Платные планы включают доступ к нашим премиальным коллекциям фонов и лицензию на использование фонов без указания авторства. Годовые подписчики получают полный доступ мгновенно, а ежемесячные подписчики выбирают две новые коллекции для добавления в свою библиотеку при каждом платежном цикле.

Есть ли ограничения на количество используемых фонов?

Нет ограничений на количество создаваемых, загружаемых и используемых вами фонов при условии, что вы соблюдаете условия нашей лицензии.

Где можно использовать фон?

Наши фоны можно использовать в качестве фонов где угодно, включая веб-сайты, блоги, графику в социальных сетях, листовки, брошюры и в других местах, если наша графика не распространяется повторно. Например, вы не можете включать наши фоны в качестве загрузки на веб-сайты, предлагающие бесплатные или платные стоковые фотографии. Полную лицензию можно посмотреть здесь. Пожалуйста, не стесняйтесь обращаться к нам, чтобы запросить разъяснения по конкретным проектам.

Могу ли я использовать фон после окончания подписки?

Пока у вас есть активная подписка, вы можете добавлять новые фоны в новые проекты. Когда ваша подписка закончится, вы сможете сохранить все эти фоны в этих проектах, однако вы больше не сможете добавлять новые фоны в проекты. Это означает, что вы не можете загружать или сохранять фоны для использования в будущем.

Разблокировать более 250 фонов веб-сайтов

Обновите рабочий процесс проектирования

Подписаться за 99 долларов в год

Background Svg — Etsy Turkey

Etsy больше не поддерживает старые версии вашего веб-браузера, чтобы обеспечить безопасность пользовательских данных. Пожалуйста, обновите до последней версии.

Воспользуйтесь всеми преимуществами нашего сайта, включив JavaScript.

Найдите что-нибудь памятное, присоединяйтесь к сообществу, делающему добро.

( 1000+ релевантных результатов, с рекламой Продавцы, желающие расширить свой бизнес и привлечь больше заинтересованных покупателей, могут использовать рекламную платформу Etsy для продвижения своих товаров. Вы увидите результаты объявлений, основанные на таких факторах, как релевантность и сумма, которую продавцы платят за клик.

No related posts.

Автор записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *