Сообщения

Показаны сообщения с ярлыком "svg"

Добавить hover-эффект svg background

Изображение
Демо: https://codepen.io/irinainina/full/gXpRZB/ Код: https://codepen.io/irinainina/pen/gXpRZB Как изменить цвет svg-изображения при наведении, если svg добавлено в качестве фона через background-image. Все известные мне источники утверждают, что это невозможно. Ни одного решения данного вопроса (а задают его достаточно часто, например: Как заменить заливку svg при hover? SVG игнорирует hover, как его заставить работать? ) найти не удалось. Все предложенные решения Css SVG hover color ; How do I make an SVG image change color when hover предлагают или вставлять svg в html, что выглядит не очень хорошо с точки зрения понятности, читаемости, лаконичности html-кода, или использовать два svg с разным цветом для разных состояний элемента, но это лишние файлы и при наведении иконки меняются не мгновенно, может быть заметная задержка, когда изображение исчезает, а потом появляется другого цвета, а это, очевидно, не тот эффект, на который мы рассчитываем. Тем не менее, решение ес...

Подключение SVG-спрайта

Способ предлагает Osvaldas Valutis 1. Копируем код; ;( function ( window, document ) {      'use strict' ;        var file     = 'img/sprite.svg' ,          revision = 1;        if ( !document.createElementNS || !document.createElementNS( ' http://www.w3.org/2000/svg ' , 'svg' ).createSVGRect )          return true ;        var isLocalStorage = 'localStorage' in window && window[ 'localStorage' ] !== null ,          request,          data,          insertIT = function ()          {              document.body.insertAdjacentHTML( ...

Стилизуем svg

 О том, как создать svg-спрайт шла речь в предыдушей теме . Но когда понадобится стилизовать иконку, может появиться проблема: размеры иконки меняются без проблем, а цвет - нет. Цвет иконки определяет свойство  fill : #ffb600 ; . icon { width : 15px ; height : 16px ; fill : #ffb600 ; }   Если иконка имеет свой собственный цвет (например, экспортирована из графического редактора), он имеет приоритет перед цветом, задаваемым в css. Решение будет следующим: 1. Применить svg patch svg path { fill : inherit ; }      2. Стилизовать не svg а use <svg>     <use class="icon" xlink:href="#icon-icon-feature-2"> </svg> use.icon {       width: 3em;       height: 3em;       fill: red; } Демо Источник  

Svg спрайты онлайн

Изображение
Проходим по ссылке: https://icomoon.io/app/#/select Нажимаем вверху кнопку "Import icons" Выбираем svg-иконки у себя на компьютере. Затем кликаем по каждой загруженной иконке - она выделяется, вокруг неё появляется желтая рамочка. Внизу нажимаем на кнопку "Generate svg" а затем "Download" Скачивается архив. Файл symbol-defs.svg этого архива является спрайтом с иконками. Добавляем содержимое этого файла в html-разметку, и затем обращаемся к иконкам используя код <svg>     <use xlink:href="#icon-feature-1"> </svg> Демо Источник

Смена цвета у svg иконки при наведении

html <img width = 200 src = "https://upload.wikimedia.org/wikipedia/commons/0/02/SVG_logo.svg" >   css    img:not(:hover) { transition: 2s; filter: saturate(0%); -webkit-filter: saturate(0%); } img:hover { transition: 1s; } Демо Источник