CSS. Как сделать изменение цвета стрелки при наведении?

Question

[megorit]

В общем, есть кнопки. На кнопках должны быть стрелки. При наведении курсора на кнопку она меняет background-color, но нужно поменять и цвет стрелки. Как это сделать? Какую лучше стрелку брать: растровую или векторную? Может ли векторная (svg) менять цвет?

Answer 1

[Сергей]

Вектор может менять цвет, растр нет ( придется делать картинку). В Векторе изменения цвета картинки можно сделать анимированно.

Comments

[megorit]

А как?

[Сергей]

Егор Марчук: что конкретно тебя интересует?

[Сергей]

Егор Марчук: https://jsfiddle.net/m5m00cxp/

[megorit]

Сергей: спасибо, что-то вроде этого и нужно было. Нарисую в Inskape и нормально будет

[megorit]

Сергей: Не подскажите, как скрыть svg (само определение), чтобы использовать его с помощью use 2 раза?

[Сергей]

Егор Марчук: Не совсем понял вопроса

[megorit]

Сергей: ну у меня 2 стрелки, мне либо 2 картинки вставлять, либо одну вставить и 2 раза использовать, просто применить к одной из rotate(180deg)

[Сергей]

Егор Марчук: https://jsfiddle.net/m5m00cxp/1/ Это не вариант?

[Сергей]

Егор Марчук: Ну или более детально изучать статьюprgssr.ru/development/oformlenie-soderzhimogo-use-...

[megorit]

Сергей: Ладно, спасибо, проще будет вставить 4 изображения

Answer 2

[lnked]

Так это базовый пример работы с svgstore если нужны подробности объясню

Если использовать файл, но лучше помещать код на страницу, это можно автоматизировать с помощью gulp (вот моя реализация svgstore.js)

<svg role="image">
      <use xlink:href="/put/k/failu/file.svg#back"/>
</svg>

Comments

[megorit]

А встраивать в HTML нужно именно кодом или можно из файла путь прописать?

[lnked]

Егор Марчук: Можно файл, сейчас обновлю ответ

[megorit]

lnked: Не подскажите, как скрыть svg (само определение), чтобы использовать его с помощью use 2 раза?

[lnked]

Егор Марчук: В примере svg скрыт take.ms/FMDga

[lnked]

Егор Марчук: https://jsfiddle.net/lnked/cp0mn1u3/

[megorit]

lnked: Ладно. Сойдет и так. Это скрытие при переполнении: overflow -- переполнение