1
<style>

.icon-button:hover svg path,
.icon-button:hover {
  fill: red !important;
  color: red !important;
}

</style>


<div class="icon-button">
    <a href="#">
        <object type="image/svg+xml" class="icon-md" data="http://localhost/wordpress.project/wp-content/themes/project-child/assets/images/back.svg"></object>
    </a>
</div>

пытаюсь закрасить svg картинку при наведении на нее, но не получается

3 ответа 3

2

Вы пытаетесь закрасить не картинку а блок .icon-button:

<div class="icon-button"></div>

Вы неправильно используете fill, и вообще не так вставляете svg в html. Вижу что вы еще пытаетесь сделать ссылкой текущую svg элемент. SVG - это не картинка, это документ, который можно встроить с помощью тега img, как сделали вы, но толк svg тогда пропадает. Откройте эту картинку с помощью любого текстового редактора и вы увидите xml документ. Скопируйте его полностью и вставьте в ваш блок .icon-button:

<div class="icon-button">
    <svg>
        <!-- Тут "конфигурация svg" -->
    </svg>
</div>

Теперь вы можете динамически управлять этой картинкой, в этом и состоит различие, чего тег img вам сделать не даст.

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

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
    <a xlink:href="http://example.com/link/" class="svg-link">
        <path d="<!-- Сюда вам нужно перенести атрибут 'd' из вашего svg документа-->" class="svg-item" />
    </a>
</svg>

Все что осталось это задать правильные классы, и прописать свойство fill для path:

/*Можете стилизовать соответствующими свойствами ваш svg документ*/
.svg-item {
    fill: blue;
}

/*При наведении на родительский блок-ссылку, меняем fill у дочернего*/
.svg-link:hover .svg-item {
    fill: red;
}

Так же можете ознакомиться с данной статьей про создание svg-ссылок.

6
  • иногда вставка напрямую это плохо - из-за огромных размеров разметки внутри svg, или трилиарда одинаковых картинок на странице 28 авг 2019 в 7:31
  • Согласен, тут надо будет использовать object. Но к сожалению <img src="..."> не даст возможности динамически изменять svg-документ, ведь на то он и документ, чтобы его встраивать, он как отдельная сущность.
    – Mully
    28 авг 2019 в 7:34
  • в этом случае остаются фильтры, иногда помогает, зпвисит от svg 28 авг 2019 в 7:36
  • я вот только что вставил как img, так как некоторые места нужно просто img , и у меня этот svg нереально огромен. , чтобы его уменьшить , мне надо ему самому width и height прописать в стилях ?
    – XXXXXX
    28 авг 2019 в 8:03
  • Это уже другой вопрос, касающийся размеров, и да width height. Так же есть атрибут viewbox, который делает некий "адаптив" svg
    – Mully
    28 авг 2019 в 8:05
1

Для того, чтобы заработало css правило для элемента path необходимо добавить код svg в тело документа.

В Вашем же случае можно попробовать воспользоваться фильтром:

.icon-button:hover img {
  filter: invert(0.5) sepia(5) saturate(9);
}

.icon-button img {
  transition: 500ms;
}
<div class="icon-button">
  <img width=50px src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='check' viewBox='0 0 20 20'%3E%3Cpath d='M10 1c-4.962 0-9 4.038-9 9 0 4.963 4.038 9 9 9 4.963 0 9-4.037 9-9 0-4.962-4.037-9-9-9zm0 16.615c-4.2 0-7.615-3.416-7.615-7.615C2.385 5.8 5.8 2.385 10 2.385c4.2 0 7.615 3.416 7.615 7.615 0 4.2-3.416 7.615-7.615 7.615z' fill='currentColor'%3E%3C/path%3E%3Cpath d='M13.664 6.74l-5.05 5.05-2.278-2.28c-.27-.27-.71-.27-.98 0s-.27.71 0 .98l2.77 2.77c.135.134.312.202.49.202.177 0 .354-.068.49-.203l5.537-5.54c.27-.27.27-.708 0-.98-.27-.27-.708-.27-.98 0z'%3E%3C/path%3E%3C/svg%3E">
</div>

более точный диагноз можно было бы поставить если увидеть svg

2
  • браузер его потом добавляет
    – XXXXXX
    28 авг 2019 в 7:13
  • @XXXXXX и тем не менее внешний стиль не может повлиять на object или embed 28 авг 2019 в 7:20
0

Чтобы иметь возможность перекрашивать SVG-иконки, нужно открыть файл SVG-иконки в текстовом редакторе и вставить содержимое в HTML-документ.

Через файл стилей можно будет обращаться к тегу path со свойством fill, перекрашивая заливку.

Пример

path:hover {
  fill: #ff0000;
}
<h1>Наведите на иконку</h1>

<svg xmlns="http://www.w3.org/2000/svg" width="100" viewBox="0 0 492 492">
    <path d="M464.344 207.418l.768.168H135.888l103.496-103.724c5.068-5.064 7.848-11.924 7.848-19.124 0-7.2-2.78-14.012-7.848-19.088L223.28 49.538c-5.064-5.064-11.812-7.864-19.008-7.864-7.2 0-13.952 2.78-19.016 7.844L7.844 226.914C2.76 231.998-.02 238.77 0 245.974c-.02 7.244 2.76 14.02 7.844 19.096l177.412 177.412c5.064 5.06 11.812 7.844 19.016 7.844 7.196 0 13.944-2.788 19.008-7.844l16.104-16.112c5.068-5.056 7.848-11.808 7.848-19.008 0-7.196-2.78-13.592-7.848-18.652L134.72 284.406h329.992c14.828 0 27.288-12.78 27.288-27.6v-22.788c0-14.82-12.828-26.6-27.656-26.6z"/></svg>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.