БЛОГ НА HUSL


Стилизация svg иконки

Автор вопроса: Андрей Баев

Нужно получить доступ к управлению цветом svg-иконки чтобы ссылка меняла цвет при наведении

Я попробовал применить к ссылке следующие стили, но цвет иконки не меняется. В чем причина?

.social {
  display: flex;
  position: relative;
  @include listReset();
  &__item {
    width: 30px;
    height: 30px;
    &:not(:last-child) {
      margin-right: 20px;
    }
    a {
      color: red;
      &:hover {
        color: blue;
      }
    }
    a svg {
      fill: currentColor;
    }
  }
}
<ul class="social footer__social" aria-label="Соцсети">
  <li class="social__item">
    <a href="#" class="social__link" aria-label="Одноклассники">
      <svg viewBox="0 0 30 30">
                <use xlink:href="img/sprite.svg#ok"></use>
              </svg>
    </a>
  </li>
  <li class="social__item">
    <a href="#" class="social__link" aria-label="ВКонтакте">
      <svg viewBox="0 0 30 30">
                <use xlink:href="img/sprite.svg#vk"></use>
              </svg>

    </a>
  </li>
</ul>

<?xml version="1.0" encoding="utf-8"?><svg viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <style>
        :root>svg {
            display: none
        }

        :root>svg:target {
            display: block
        }

    </style><svg class="acalendar" fill="none" viewBox="0 0 14 14" id="calendar" xmlns="http://www.w3.org/2000/svg">
        <g clip-path="url(#aclip0_41399_393)">
            <path d="M11.667 1.75h-.584V.583H9.917V1.75H4.083V.583H2.917V1.75h-.584a1.17 1.17 0 00-1.166 1.167v9.333a1.17 1.17 0 001.166 1.167h9.334a1.17 1.17 0 001.166-1.167V2.917a1.17 1.17 0 00-1.166-1.167zm0 10.5H2.333V4.667h9.334v7.583z" fill="#999" />
        </g>
        <defs>
            <clipPath id="aclip0_41399_393">
                <path fill="#fff" d="M0 0h14v14H0z" />
            </clipPath>
        </defs>
    </svg><svg class="bcalendar-white" fill="none" viewBox="0 0 14 14" id="calendar-white" xmlns="http://www.w3.org/2000/svg">
        <g clip-path="url(#bclip0_41399_382)">
            <path d="M11.667 1.75h-.584V.583H9.917V1.75H4.083V.583H2.917V1.75h-.584a1.17 1.17 0 00-1.166 1.167v9.333a1.17 1.17 0 001.166 1.167h9.334a1.17 1.17 0 001.166-1.167V2.917a1.17 1.17 0 00-1.166-1.167zm0 10.5H2.333V4.667h9.334v7.583z" fill="#fff" />
        </g>
        <defs>
            <clipPath id="bclip0_41399_382">
                <path fill="#fff" d="M0 0h14v14H0z" />
            </clipPath>
        </defs>
    </svg><svg class="csocial-icon-ok" fill="none" viewBox="0 0 30 30" id="ok" xmlns="http://www.w3.org/2000/svg">
        <g clip-path="url(#cclip0_41399_288)" fill="#CACACA">
            <path d="M12.853 9.99a2.24 2.24 0 104.478 0 2.24 2.24 0 00-4.478 0z" />
            <path fill-rule="evenodd" clip-rule="evenodd" d="M15 30c8.284 0 15-6.716 15-15 0-8.284-6.716-15-15-15C6.716 0 0 6.716 0 15c0 8.284 6.716 15 15 15zM9.675 9.99a5.417 5.417 0 1110.834 0 5.417 5.417 0 01-10.834 0zm10.866 8.204c-.069.055-1.368 1.082-3.537 1.524l3.274 3.244a1.473 1.473 0 11-2.082 2.085l-3.178-3.095-2.886 3.075c-.29.3-.675.45-1.06.45a1.473 1.473 0 01-1.06-2.495l3.107-3.247c-2.23-.431-3.583-1.485-3.653-1.541a1.473 1.473 0 011.843-2.298c.014.01 1.429 1.074 3.71 1.075 2.28-.001 3.666-1.064 3.68-1.075a1.473 1.473 0 011.842 2.298z" />
        </g>
        <defs>
            <clipPath id="cclip0_41399_288">
                <path fill="#fff" transform="matrix(-1 0 0 1 30 0)" d="M0 0h30v30H0z" />
            </clipPath>
        </defs>
    </svg><svg class="dphone" fill="none" viewBox="0 0 20 20" id="phone" xmlns="http://www.w3.org/2000/svg">
        <path d="M16.675 12.817a9.536 9.536 0 01-2.942-.467.814.814 0 00-.841.2l-1.309 1.642c-2.358-1.125-4.566-3.25-5.741-5.692l1.625-1.383a.85.85 0 00.2-.85A9.294 9.294 0 017.2 3.325a.832.832 0 00-.825-.825H3.492c-.45 0-.992.2-.992.825C2.5 11.067 8.942 17.5 16.675 17.5c.592 0 .825-.525.825-.983v-2.875a.832.832 0 00-.825-.825z" fill="#FF6E30" />
    </svg><svg class="eclose-button-icon" fill="none" viewBox="0 0 20 20" id="round_button" xmlns="http://www.w3.org/2000/svg">
        <circle cx="10" cy="10" r="10" fill="#999" />
        <path fill="#fff" d="M6.207 5.5l8.485 8.485-.707.707L5.5 6.207z" />
        <path fill="#fff" d="M5.59 13.985L14.077 5.5l.707.707-8.485 8.486z" />
    </svg><svg class="fsearch-icon" fill="none" viewBox="0 0 25 25" id="search" xmlns="http://www.w3.org/2000/svg">
        <path d="M24.911 22.814l-5.057-4.457c1.487-1.98 2.292-4.403 2.292-6.95 0-3.05-1.156-5.909-3.245-8.065C16.812 1.186 14.03 0 11.073 0c-2.957 0-5.74 1.19-7.829 3.342C1.152 5.494 0 8.357 0 11.407c0 3.045 1.155 5.912 3.244 8.064 2.09 2.156 4.869 3.343 7.829 3.343 2.473 0 4.82-.83 6.743-2.358l5.058 4.453a.3.3 0 00.214.091.294.294 0 00.214-.091l1.61-1.654a.312.312 0 00.088-.22.319.319 0 00-.089-.221zM16.92 17.43c-1.565 1.608-3.639 2.494-5.846 2.494-2.207 0-4.282-.886-5.847-2.494a8.603 8.603 0 01-2.42-6.023c0-2.274.86-4.415 2.42-6.023 1.565-1.608 3.64-2.494 5.847-2.494 2.207 0 4.285.882 5.846 2.494a8.602 8.602 0 012.422 6.023c0 2.274-.86 4.414-2.422 6.023z" fill="#fff" />
    </svg><svg class="gsocial-icon-vk" fill="none" viewBox="0 0 30 30" id="vk" xmlns="http://www.w3.org/2000/svg">
        <path d="M15 0C6.716 0 0 6.716 0 15c0 8.284 6.716 15 15 15 8.284 0 15-6.716 15-15 0-8.284-6.716-15-15-15zm7.609 16.622c.699.683 1.439 1.326 2.066 2.08.278.333.54.677.74 1.065.285.553.027 1.159-.467 1.192l-3.073-.001c-.794.066-1.426-.255-1.958-.797-.425-.433-.82-.894-1.229-1.342a2.871 2.871 0 00-.553-.492c-.42-.272-.783-.189-1.023.249-.245.445-.3.939-.324 1.434-.033.725-.252.914-.979.948-1.553.073-3.028-.163-4.398-.946-1.208-.69-2.144-1.666-2.959-2.77-1.587-2.152-2.803-4.514-3.895-6.944-.246-.547-.066-.84.538-.85a85.522 85.522 0 013.009-.002c.408.007.678.24.835.625.542 1.334 1.206 2.603 2.039 3.78.222.313.448.625.77.846.357.245.628.164.796-.233.107-.253.154-.523.177-.794.08-.927.09-1.854-.049-2.777-.086-.578-.41-.951-.987-1.06-.293-.056-.25-.165-.108-.332.248-.29.48-.47.944-.47h3.472c.547.107.67.353.744.904l.003 3.859c-.006.213.107.845.49.985.307.101.51-.145.693-.34.833-.883 1.426-1.926 1.957-3.005.235-.476.437-.969.634-1.462.146-.365.373-.545.785-.539l3.343.004c.099 0 .199.001.296.018.564.097.718.339.544.889-.275.863-.808 1.583-1.329 2.304-.558.772-1.154 1.517-1.707 2.293-.508.709-.468 1.066.163 1.681z" fill="#CACACA" />
    </svg>
</svg>


Источник

Ответы (1 шт):

Автор решения: Dev18

у вас в svg файле цвет иконки указан статически fill="#CACACA" -что говорит, о том, что независимо от изменений в css, иконки будут оставаться серыми-#CACACA

Уберите fill вообще из svg и добавьте в css path{ fill:inherit; stroke:inherit; } отличное объяснение

также я разделила классы для разных иконок, чтоб дистангировать цвета .social__link--vk + .social__link--ok

ul li {
  list-style-type: none;
}

.social__link--ok {
  color: orange;
  /* для ОК */
}

.social__link--ok:hover {
  color: darkorange;
  /* темнее для ОК */
}

.social__link--vk {
  color: blue;
  /* для ВК */
}

.social__link--vk:hover {
  color: darkblue;
  /* темнее синего для ВК */
}


/* стиль всех иконок через через наследование */

.social__link svg {
  width: 60px;
  height: 60px;
  fill: currentColor;
}


/* еще стили для всех элементов path */

path {
  fill: inherit;
  stroke: inherit;
}
<ul class="social footer__social" aria-label="Соцсети">
  <li class="social__item">
    <a href="#" class="social__link social__link--ok" aria-label="Одноклассники">
      <svg viewBox="0 0 30 30" width="20" height="20">
        <g>
          <path d="M12.853 9.99a2.24 2.24 0 104.478 0 2.24 2.24 0 00-4.478 0z" />
          <path fill-rule="evenodd" clip-rule="evenodd" d="M15 30c8.284 0 15-6.716 15-15 0-8.284-6.716-15-15-15C6.716 0 0 6.716 0 15c0 8.284 6.716 15 15 15zM9.675 9.99a5.417 5.417 0 1110.834 0 5.417 5.417 0 01-10.834 0zm10.866 8.204c-.069.055-1.368 1.082-3.537 1.524l3.274 3.244a1.473 1.473 0 11-2.082 2.085l-3.178-3.095-2.886 3.075c-.29.3-.675.45-1.06.45a1.473 1.473 0 01-1.06-2.495l3.107-3.247c-2.23-.431-3.583-1.485-3.653-1.541a1.473 1.473 0 011.843-2.298c.014.01 1.429 1.074 3.71 1.075 2.28-.001 3.666-1.064 3.68-1.075a1.473 1.473 0 011.842 2.298z" />
        </g>
      </svg>
    </a>
  </li>

  <li class="social__item">
    <a href="#" class="social__link social__link--vk" aria-label="ВКонтакте">
      <svg viewBox="0 0 30 30" width="20" height="20">
        <path d="M15 0C6.716 0 0 6.716 0 15c0 8.284 6.716 15 15 15 8.284 0 15-6.716 15-15 0-8.284-6.716-15-15-15zm7.609 16.622c.699.683 1.439 1.326 2.066 2.08.278.333.54.677.74 1.065.285.553.027 1.159-.467 1.192l-3.073-.001c-.794.066-1.426-.255-1.958-.797-.425-.433-.82-.894-1.229-1.342a2.871 2.871 0 00-.553-.492c-.42-.272-.783-.189-1.023.249-.245.445-.3.939-.324 1.434-.033.725-.252.914-.979.948-1.553.073-3.028-.163-4.398-.946-1.208-.69-2.144-1.666-2.959-2.77-1.587-2.152-2.803-4.514-3.895-6.944-.246-.547-.066-.84.538-.85a85.522 85.522 0 013.009-.002c.408.007.678.24.835.625.542 1.334 1.206 2.603 2.039 3.78.222.313.448.625.77.846.357.245.628.164.796-.233.107-.253.154-.523.177-.794.08-.927.09-1.854-.049-2.777-.086-.578-.41-.951-.987-1.06-.293-.056-.25-.165-.108-.332.248-.29.48-.47.944-.47h3.472c.547.107.67.353.744.904l.003 3.859c-.006.213.107.845.49.985.307.101.51-.145.693-.34.833-.883 1.426-1.926 1.957-3.005.235-.476.437-.969.634-1.462.146-.365.373-.545.785-.539l3.343.004c.099 0 .199.001.296.018.564.097.718.339.544.889-.275.863-.808 1.583-1.329 2.304-.558.772-1.154 1.517-1.707 2.293-.508.709-.468 1.066.163 1.681z" />
      </svg>
    </a>
  </li>
</ul>

в вашем примере вы используете иконки из файла "img/sprite.svg#ok", я изменила этот момент для тестов

главное обратите внимание на цвет иконки в САМОМ файле svg

→ Ссылка

licensed under cc by-sa 3.0 with attribution.