Jump to content
  • 0

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


yaparoff
 Share

Question

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

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

https://jsfiddle.net/ypqz5Lh6/

Edited by yaparoff
Link to comment
Share on other sites

13 answers to this question

Recommended Posts

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

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

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

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

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

Link to comment
Share on other sites

  • 0

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

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

Link to comment
Share on other sites

  • 0

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

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

 

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

 

Link to comment
Share on other sites

  • 0

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

https://jsfiddle.net/ezjaw4Lc/

Edited by yaparoff
Link to comment
Share on other sites

  • 0
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
Link to comment
Share on other sites

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

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

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

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

Link to comment
Share on other sites

  • 0

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

Edited by yaparoff
Link to comment
Share on other sites

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

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

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

Link to comment
Share on other sites

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

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

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

Link to comment
Share on other sites

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

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

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By Alex_st22
      Здравствуйте, пытаюсь сделать небольшой редактор. Сначала нажимается кнопка на html-странице, потом заполняется форма с параметрами графоэлемента (иконы), эти параметры считывает скрипт, передаёт их в другую функцию. Та формирует код HTML с тегом svg и вставляет в блок draw. В этом деле вообще начинающий, ещё в голове путаница с расположением элементов, паддингами и т.п. А проблема, что после исполнения скрипта ничего не происходит, иногда на секунду мелькает что-то похожее, но в целом результата нет.
       
      Код
      HTML:
      <!DOCTYPE html>
      <html lang="ru">
        <head>
          <meta charset="utf-8">
          <title>Иконы</title>
          <link rel="stylesheet" href="style.css">
        </head>
        <body>      
            <div class="open-button">
                <button onclick="openForm()">Открыть форму</button>
          </div>
          <div class="form-popup" id="IconForm">
                <form class="form-container">
                     <h1>Параметры иконы</h1>
                  <label for="bordercolor"><b>Цвет границы</b></label>
                  <select id='select_bc' size='1'>
                      <option value='#000'>Чёрный</option>
                      <option value='#00f'>Синий</option>
                      <option value='#f00'>Красный</option>
                      <option value='#0f0'>Зелёный</option>
                  </select>
                  <p></p>
                  <label for="background"><b>Цвет фигуры</b></label>
                  <select id='select_bg' size='1'>
                      <option value='#fff'>Белый</option>
                      <option value='#bbf'>Синий</option>
                      <option value='#fbb'>Красный</option>
                      <option value='#bfb'>Зелёный</option>
                  </select>
                  <p></p>
                  <label for="fontcolor"><b>Цвет текста</b></label>
                  <select id='select_fc' size='1'>
                      <option value='#000'>Чёрный</option>
                      <option value='#00f'>Синий</option>
                      <option value='#f00'>Красный</option>
                      <option value='#0f0'>Зелёный</option>
                  </select>
                  <p></p>
                  <label for="text"><b>Содержание фигуры</b></label>
                  <textarea id="text_in" cols="20" rows="3"></textarea>
                  <button type="submit" class="btn" onclick="return acceptArgs()">Принять</button>
                  <button type="submit" class="btn cancel" onclick="return closeForm()">Закрыть</button>
                </form>
          </div>
          <div id="Draw"></div>
          
          <script type="text/javascript" src="script.js"></script>
        </body>
      </html>
      CSS:
      {box-sizing: border-box;}
      /* Кнопка, используемая для открытия формы */
      .open-button {
        background-color: #555;
        color: white;
        padding: 16px 20px;
        border: none;
        cursor: pointer;
        opacity: 0.8;
        position: fixed;
        width: 280px;
      }
      /* Всплывающая форма-скрыта по умолчанию */
      .form-popup {
        display: none;
        position: fixed;
        border: 3px solid #f1f1f1;
        z-index: 9;
      }
      /* Добавить стили для контейнера формы */
      .form-container {
        max-width: 300px;
        padding: 10px;
        background-color: white;
      }
      /* Поля ввода полной ширины */
      .form-container input[type=text], .form-container input[type=password] {
        width: 100%;
        padding: 15px;
        margin: 5px 0 22px 0;
        border: none;
        background: #f1f1f1;
      }
      /* Когда входы получают фокус, сделайте что-нибудь */
      .form-container input[type=text]:focus, .form-container input[type=password]:focus {
        background-color: #ddd;
        outline: none;
      }
      /* Стиль для кнопок */
      .form-container .btn {
        background-color: green;
        color: white;
        padding: 16px 20px;
        border: none;
        cursor: pointer;
        width: 100%;
        margin-bottom:10px;
        opacity: 0.85;
      }
      /* Красный цвет фона для кнопки "Отмена" */
      .form-container .cancel {
        background-color: red;
      }
      /* Добавить некоторые эффекты наведения на кнопки */
      .form-container .btn:hover, .open-button:hover {
        opacity: 1;
      }
       
      JS:
      function openForm() {
        document.getElementById("IconForm").style.display = "block";
      }
      function closeForm() {
        document.getElementById("IconForm").style.display = "none";
        return false;
      }
      function drawIcon(bc, bg, fc, text) {
        var svg = '<svg> <rect rx="32.8" ry="18.3" x="500" y="500" height="55" width="99" ';
        svg += 'fill="'+ bg + '" stroke="'+ bc +'" stroke-width="2px" />';
        svg += '<text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" fill='+fc+";'>";   
        svg += text + "</text></svg>";
        alert(svg);
        document.getElementById('Dragon').innerHTML += svg;
        return true;
      }
      function acceptArgs() {
        var bc = document.getElementById("select_bc");
        bc = bc.options[bc.selectedIndex].value;
        var bg = document.getElementById("select_bg");
        bg = bg.options[bg.selectedIndex].value;
        var fc = document.getElementById("select_fc");
        fc = fc.options[fc.selectedIndex].value;
        var text = document.getElementById("text_in").value;
        closeForm();
        drawIcon(bc, bg, fc, text);
        
      }
    • By yaparoff
      делаю звездный рейтинг на svg на чистом css
      проблема в том что checked, svg почему то не закрашивается в нужный цвет
      Как решить эту проблему? 
      https://codepen.io/anon/pen/zVNVRV?editors=1010
    • 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" не подходит.
  • Обсуждения

    • Вот тут есть актуальный список бесплатных тестов с сертификацией https://www.classcentral.com/report/free-certificates/ Обратите внимание на HackerRank, там есть тест с сертификацией непосредственно по CSS
    • Нужно сверстать по картинке меню-бар. Не получается сделать вот это поле поиска <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Document</title>     <style> .nav {     display: flex;     list-style-type: none;     padding-left: 0;     font-size: 17px;     text-transform: uppercase; } .nav > li > a {     color: #fff;     text-decoration: none; } .nav > li {     padding-left: 29px;     margin-left: 30px; } .header {     display: flex;     background-color: #31485b;     justify-content: space-between;     align-items: center; }   .sidebar {     width: 410px;     display: block;     padding-right: 20px;     margin: auto;     margin-left: 250px; }   ul.nav li a:hover {     background-color: #687c8d;     padding: 17.2px 35px; }   input[type="text"], input[type="search"] {   background-color: #687c8d;   width: 60%;   padding: 8px;   margin: 0 50px }   input[type="search"] {     color: #31485b;     font-style: italic; }     </style> </head> <body>     <div class="header">                 <ul class="nav">                     <li class="s1"><a href="#">Главная</a></li>                     <li><a href="#">Блог</a></li>                     <li><a href="#">Сервисы</a></li>                     <li><a href="#">Онлайн-профессии</a></li>                     <li><a href="#">О сайте</a></li>                 </ul>                                 <div class="sidebar">                     <form method="post" action="#" id="search_form" >                       <input type="search" name="search_field" placeholder="Поиск" />                     </form>                   </div>     </div> </body> </html>  
    • ЭЭ, а почему оно должно удалять? Может стоило повесить событие на эту кнопку и указать, что при это должно происходить?
    • например -R не будет качать указанные файлы если вы знаете список нужных вам файлов, проще их указать или можно написать парсер
    • выкладывайте код в песочнице, так будет проще У вас media подключается до blocks/header, по этому правила из blocks/header перекрывают media сверху вниз в css пишите tag .class ... @media и не будет у вас подобных проблем  
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy