три состояния у SVG: закрасить svg (свойство fill не помогает)

[yaparoff]

у svg должно быть три состояния обычное, при наведении, при нажатии
думаю как это сделать
Vне бы хотелось его вставить в html разметку, а не просто с помощью bsckground-position. Т.к. я хочу анимации при наведении (transition).
И я могу менять цвет обводки с помощью css-свойства fill.
Но есть еще одно состояние когда картинка полностью закрашена. Как сделать чтобы то же свг закрашивалось полностью (например при добавлении класса)?
У меня не получается просто добавить  css свойство для этого

Какие есть еще идеи?

https://jsfiddle.net/ypqz5Lh6/

Edited April 2, 2019 by yaparoff

[npofopr]

Посмотрите реализации, куча их
https://codepen.io/robeen/pen/PbvJjy
https://codepen.io/o_OmarZeidan/pen/Gqbpjo

не получится, будем дальше помогать 🙂 

[yaparoff]

25 минут назад, npofopr сказал:

Посмотрите реализации, куча их
https://codepen.io/robeen/pen/PbvJjy
https://codepen.io/o_OmarZeidan/pen/Gqbpjo

не получится, будем дальше помогать 🙂 

спасибо! Пошел разбираться. 
Скажите есть смысл делать на проекте svg-спрайт (в моем случае) и оттуда тянуть эти иконки?
До этого на проекте не было свг, как я понял, и иконки брались из png файлов и png-спрайтов
Просто я почиатл как вставлять свг-спрайт - там надо что то с сервером делать и т.п. А дергать прогеров как то не хочется

Или можно просто вставить в разметку и все?

[klierik]

Для иконок (одноцветных) проще использовать шрифты.

Для полноценных картинок целесообразно внедрять в страницу SVG. Если он в конечно итоге большой то можно тянуть через AJAX + кешировать в localstorage

[npofopr]

Можно просто и в разметку вставлять.
Если анимаций нет, то не обязательно же инлайном вставлять. 

Достаточно просто ссылкой на спрайт и нужную иконку указывать.

 

Вот, кстати, про кеширование. https://nicothin.pro/page/svg-sprites

<script>
// Load sprite SVG-icons
  ;( function( window, document ) {
    'use strict';

    var file     = '/img/svg-sprite.svg', // URL файла относительно страницы, на которой он используется (можно — абсолютный)
        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( 'afterbegin', data );
      },
      insert = function() {
        if( document.body ) insertIT();
        else document.addEventListener( 'DOMContentLoaded', insertIT );
      };

    if( isLocalStorage && localStorage.getItem( 'inlineSVGrev' ) == revision ) {
      data = localStorage.getItem( 'inlineSVGdata' );
      if( data ) {
        insert();
        return true;
      }
    }

    try {
      request = new XMLHttpRequest();
      request.open( 'GET', file, true );
      request.onload = function()
      {
        if( request.status >= 200 && request.status < 400 ) {
          data = request.responseText;
          insert();
          if( isLocalStorage ) {
            localStorage.setItem( 'inlineSVGdata',  data );
            localStorage.setItem( 'inlineSVGrev',   revision );
          }
        }
      }
      request.send();
    }
    catch( e ){}

  }( window, document ) );
</script>

 

[yaparoff]

вроде работает нормально. Но теперь почему то при наведении закрашивание не срабатывает если я ссылкаюсь на спрайт.
А если без спрайта вызываю иконку - то все ок.
Почему такое может происходить?

https://jsfiddle.net/ezjaw4Lc/

Edited April 2, 2019 by yaparoff

[npofopr]

Дак у вас нигде клик и не прописан. 
На примерах, что выше, они это делали с помощью :checked 

Ну или можно через js клик сделать.

[yaparoff]

24 минуты назад, npofopr сказал:

Дак у вас нигде клик и не прописан. 
На примерах, что выше, они это делали с помощью :checked 

Ну или можно через js клик сделать.

не не
клик не надо
мне нужно чтобы при наведении svg становился вот такой 
я при hover написал что у него свойство fill меняется
но когда из спрайта вызываешь, этот hover почему то  не срабатывает

.like-icon:hover .like-icon__stroke {
  fill: #499DDE;
  transition: fill 0.2s ease-out;
}

 

Edited April 2, 2019 by yaparoff

[npofopr]

13 минут назад, yaparoff сказал:

но когда из спрайта вызываешь

Спрайт потому что это просто картинка. Если хотите "эффектов", то только через инлайновую вставку.

Если конечно я чего не путаю сам))

[yaparoff]

тогда придется по старинке делать через png ))
мне интересно а можно как то добиться того чтобы такая иконка  превращалась в такую но при этом происходило это плавно, как подсвечивание? Не так важно через что это делать 

Edited April 2, 2019 by yaparoff

[npofopr]

Плавно color меняешь и всё. Нет?) 

[yaparoff]

13 часов назад, npofopr сказал:

Плавно color меняешь и всё. Нет?) 

То же самое происходит
В html вставляю иконку -  эффект с hover работает
Из спрайта вызываешь ту же иконку - эффект с hover уже не работает

[klierik]

15 часов назад, yaparoff сказал:

мне интересно а можно как то добиться того чтобы такая иконка  превращалась в такую 

Можно. Это проще осуществить через шрифты иконок. Пример:

[npofopr]

1 час назад, yaparoff сказал:

Из спрайта вызываешь ту же иконку - эффект с hover уже не работает

дак и не сработает. я же писал. это как картинка получается. как обычный png