yaparoff

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

Recommended Posts

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

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

https://jsfiddle.net/ypqz5Lh6/

Edited by yaparoff

Share this post


Link to post
Share on other sites
25 минут назад, npofopr сказал:

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

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

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

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

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

 

Вот, кстати, про кеширование. 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>

 

Share this post


Link to post
Share on other sites

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

https://jsfiddle.net/ezjaw4Lc/

Edited by yaparoff

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites
24 минуты назад, npofopr сказал:

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

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

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

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

 

Edited by yaparoff

Share this post


Link to post
Share on other sites
13 минут назад, yaparoff сказал:

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

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

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

Share this post


Link to post
Share on other sites

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

Edited by yaparoff

Share this post


Link to post
Share on other sites
13 часов назад, npofopr сказал:

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

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

Share this post


Link to post
Share on other sites
15 часов назад, yaparoff сказал:

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

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

Share this post


Link to post
Share on other sites
1 час назад, yaparoff сказал:

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

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By ioprst
      Привет. Подскажите как правильно объявить svg объект, чтобы он занял все свободного пространство экрана и при этом не "вылезал" вниз. Например у меня есть svg (большой код, т.к. в ней просто 17 одинаковых элементов, которые расположены по главной горизонтали):
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xlink="http://www.w3.org/1999/xlink" baseProfile="full" height="1088px" style="background:#FFFFFF" version="1.1" width="1088px"> <defs> <style type="text/css"> .default_default { fill: #E4801B; stroke: #000000; stroke-width: 1.0px; } </style> </defs> <g id="root" transform="translate(0,0)"> <g id="Auto" class="default_default" transform=" translate(0,0) rotate(0,32,32)"> <g id="layer0"> <rect y="24" x="0" height="16" width="64" id="c0trumpet"/> <rect y="26" x="3" height="12" width="2" id="c0flow0" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> <rect y="26" x="11" height="12" width="2" id="c0flow1" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> <rect y="26" x="19" height="12" width="2" id="c0flow2" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> <rect y="26" x="27" height="12" width="2" id="c0flow3" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> <rect y="26" x="35" height="12" width="2" id="c0flow4" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> <rect y="26" x="43" height="12" width="2" id="c0flow5" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> <rect y="26" x="51" height="12" width="2" id="c0flow6" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> <rect y="26" x="59" height="12" width="2" id="c0flow7" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> </g> </g> <g id="Auto" class="default_default" transform=" translate(576,576) rotate(0,32,32)"> <g id="layer0"> <rect y="24" x="0" height="16" width="64" id="c1trumpet"/> <rect y="26" x="3" height="12" width="2" id="c1flow0" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> <rect y="26" x="11" height="12" width="2" id="c1flow1" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> <rect y="26" x="19" height="12" width="2" id="c1flow2" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> <rect y="26" x="27" height="12" width="2" id="c1flow3" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> <rect y="26" x="35" height="12" width="2" id="c1flow4" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> <rect y="26" x="43" height="12" width="2" id="c1flow5" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> <rect y="26" x="51" height="12" width="2" id="c1flow6" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> <rect y="26" x="59" height="12" width="2" id="c1flow7" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> </g> </g> <!-- тут еще 14 групп с id="Auto"--> <g id="Auto" class="default_default" transform=" translate(960,960) rotate(0,32,32)"> <g id="layer0"> <rect y="24" x="0" height="16" width="64" id="c15trumpet"/> <rect y="26" x="3" height="12" width="2" id="c15flow0" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> <rect y="26" x="11" height="12" width="2" id="c15flow1" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> <rect y="26" x="19" height="12" width="2" id="c15flow2" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> <rect y="26" x="27" height="12" width="2" id="c15flow3" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> <rect y="26" x="35" height="12" width="2" id="c15flow4" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> <rect y="26" x="43" height="12" width="2" id="c15flow5" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> <rect y="26" x="51" height="12" width="2" id="c15flow6" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> <rect y="26" x="59" height="12" width="2" id="c15flow7" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> </g> </g> </g> </svg> Auto.html выглядит следующим образом:
      <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>test</title> </head> <body> <div class="menu"> <a href="Auto.html">Untitled</a> <div> <object id="AutoId" type="image/svg+xml" data="Auto.svg"></object> </div> <script type="text/javascript" src="Auto.js"></script> </div> </body> </html> Таким образом я получаю страницу, которая представлена на рисунке 1.

      Как видно, не вся svg поместилась на страницу. А хотелось бы получить результат как на второй картинке, т.е. уместить всю svg в область под <a>Untitled</a> так, чтобы вниз страница не прокручивалась.

    • By ioprst
      Привет. Подскажите пожалуйста, что нужно настроить в конфиге apache24, чтобы локальная страничка могла обрабатывать данные с любого места жесткого диска. Сейчас проблема в том, что я пытаюсь на страничке вызвать изображение (указываю полный путь), которое расположено, например, на флешке, но всегда выводит белый фон.
    • By ioprst
      Привет. Подскажите, пожалуйста, как в svg файле (<defs>...</defs>) указать цвета и цвета строк, которые могут использоваться в документе. Например градиент указывается так:
      <defs> <linearGradient id="linearGradientDefault"> <stop offset="0" stop-color="#808080" stop-opacity="1"/> <stop offset="0.5" stop-color="#FFFFFF" stop-opacity="1"/> <stop offset="1" stop-color="#404040" stop-opacity="1"/> </linearGradient> <linearGradient y2="40" x2="0" y1="24" x1="0" gradientUnits="userSpaceOnUse" id="linearGradientPipe" xlink:href="#linearGradientDefault" inkscape:collect="always"/> </defs> И к нему можно обратиться следующим образом через url:
      <rect y="24" x="0" height="16" width="64" id="c0trumpet" style="fill:url(#linearGradientPipe);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.18708867"/> А вот как указать просто цвет или цвет строки информации не найду. Вариант "просто указать в элементе fill:#RRGGBB" не подходит.
  • Member Statistics

    46,303
    Total Members
    3,128
    Most Online
    xakerfsb
    Newest Member
    xakerfsb
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.