Как перекрасить иконку сафари в другой цвет

Как изменить цвет фона и текста веб-страницы?

Для изменения цвета фона применяется свойство background добавленное к селектору body , а для цвета текста используется свойство color , как показано в примере 1.

Пример 1. Изменение цвета веб-страницы

HTML5 CSS 2.1 IE Cr Op Sa Fx

    Цвет фона   Эскапизм устойчиво дает материалистический комплекс, независимо от психического состояния пациента.

Результат данного примера показан на рис. 1.

Рис. 1. Вид страницы, с измененным цветом фона и текста

Рекомендуем задавать цвет фона, даже если он белый. Дело в том, что некоторые пользователи устанавливают в браузере цвет фона по умолчанию отличный от белого. Так что если цвет явно не задан, то он меняется на другой, причем, совсем не тот, который бы хотелось в итоге получить.

Изменить цвет SVG — изображения

Вношу правки в верстку сайта на Laravel , весь CSS код билдится из SCSS . Код добавления SVG картинки выглядит так:

Почему то не срабатывает

До этого верстал только на голом HTML + CSS сейчас пытаюсь постигнуть новые фишки, сразу видны пробелы в знаниях. Можете подсказать что я делаю не так? Я так понял беда в том, что сначала картинка подтягивается на сайт в своем исходном, а затем я пытаюсь его изменить обычным CSS. Обязательно прибегать к помощи JS? Внес исправления, смена цвета заработала, но 1) :hover таким же образом прописанный не работает. В чем может быть дело? 2) object оборачивается в ссылку, но по клику на него переход не происходит, как это можно исправить?

 [. ] slug]) >>" title="title >>"> Читать дальше   
 //код svg теперь выглядит так

Отслеживать
Сергей Курамшин
задан 12 фев 2018 в 7:14
Сергей Курамшин Сергей Курамшин
207 1 1 золотой знак 4 4 серебряных знака 13 13 бронзовых знаков

Это не пробелы в знаниях, а пробелы в технологиях) Проблема в том, что svg работает как отдельный документ, и кажется что js тоже не поможет. Есть поход через якорную ссылку указывать стиль внутри svg и там менять цвет, но не работает в сафари и может еще где-то.

12 фев 2018 в 7:30

Странно, читал много статей, где явно говорилось что именно в таком формате как у меня svg-изображение реально перекрасить, только почему то именно в моем случае их примеры не работали

12 фев 2018 в 7:52

@СергейКурамшин добавьте код иконки svg, от её кода, точнее её стилей на 100% зависит решение ваших проблем. Пока информации мало, вы привели код стандартного добавления svg в HTML

12 фев 2018 в 9:04

3 ответа 3

Сортировка: Сброс на вариант по умолчанию

Наверное полезно дать ответ и на более широкий круг вопросов стилизации иконок.
Есть очень полезная статья Styling SVG Content with CSS — перевод,- оригинал

Для решения вашей задачи, полезен раздел статьи — Каскадирование стилей

Из этого раздела можно сделать вывод, что наивысшим приоритетом обладает внутренние стили svg.

Чтобы устранить доминирование приоритета внутренних стилей svg необходимо:

Удалить в коде иконки все атрибуты стилизации у патчей, полигонов и т.д все инлайновые стили — fill , stroke
Добавить во внешней таблице стилей path
Стилизацию иконок уже делать в таблице стилей на уровне классов иконок
В шапку файлов *.svg иконок добавить строчку, указывающую на внешнюю таблицу стилей
Файл таблицы стилей и файлы SVG лучше разместить в одной папке, так как браузеры чувствительны к этому, больше других chrome

Update

Добавляете спрайт с иконками в HTML

вызываете иконку из спрайта по её id с помощью команды

Вот более подробно о нюансах добавления и стилизации иконки из спрайта

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

Отслеживать
ответ дан 12 фев 2018 в 9:36
Alexandr_TT Alexandr_TT
109k 23 23 золотых знака 112 112 серебряных знаков 374 374 бронзовых знака

В моем случае картинки в формате svg просто лежат в папке images, такие мне отдал дизайнер. А так как я в первый раз имею дело с svg то даже не знаю как их встраивать. Почитал несколько статей, в одной было написано, что вставка через object со ссылкой на картинку — является одним из лучших решений. Как то так. Можно ли поменять стиль если грузить просто картинкой.svg?

13 фев 2018 в 0:31

Воспользовался вашей инструкцией и все получилось) Спасибо большое. Надоедает, правда идти по всем svg и дописывать xml-stylesheet, но зато раз и навсегда. Можно делать с иконками что угодно. Упустил из виду, что svg это просто path’ы прописанные в коде)

13 фев 2018 в 1:51
Ховер таким же образом прописанный не работает(
13 фев 2018 в 6:03

@СергейКурамшин код иконки добавь в вопрос пожалуйста, не понимаю, почему до сих пор не сделали этого. Проще же будет понять причину

13 фев 2018 в 6:38

@СергейКурамшин Видите, как слова можно понимать по разному.:) Я аж три ответа написал, основываясь на ваших комментариях. А был бы код весь сразу в вопросе, то был бы один, конкретный ответ сразу. Сейчас вижу, что вы смешали два способа вместе 1. инлайн — непосредственное добавление svg кода в Html и добавление спрайта с иконками svg через тег object . Не стоит их смешивать или инлайн или object

13 фев 2018 в 8:22

Ответ #2

Для быстрого решения проблем со стилизацией иконок.
Данная техника подойдет, если нужно быстро добавить иконки в свой проект, которые можно раскрасить в любой цвет из внешнего файла CSS .
Причём иконки высокого качества, практически полный набор на все случаи.
Иконки адаптивны и не теряют качества при масштабировании, так как это иконки SVG из которых состоит символьный шрифт — Google Material Icons

Выбирать иконки по названиям можно здесь

Выбираем нужную иконку с именем — favorite

Подключение иконки к HTML странице:

favorite , где

material-icons — общий класс для всех иконок
red — дополнительный класс, задающий цвет окраски иконки

Ниже пример с тремя одинаковыми иконками, которые раскрашены в разные цвета Добавлена анимация увеличения иконок при hover .

.material-icons < transform: scale(2); >i < margin: 100px 50px 50px 80px; transition: transform 1s ease-in-out; >i:hover < transform: scale(10); >.red .green .blue

 favorite favorite backup

Размер иконок также можно менять, здесь удвоенный исходный размер:

.material-icons

Отслеживать
ответ дан 12 фев 2018 в 12:14
Alexandr_TT Alexandr_TT
109k 23 23 золотых знака 112 112 серебряных знаков 374 374 бронзовых знака
Александр, а иконки обязательно помещать в тег i или можно реализовать в любом теге?
12 фев 2018 в 12:28
@Air попробуй, я пробовал в тег

Читать:

Как отображается скрытый номер в телеграмм

— получилось, но решил для себя, что лучше в , как в оригинале

12 фев 2018 в 12:30
Ну видать можно)))
12 фев 2018 в 12:32

Вот именно такие иконки были до меня) Сказали поменять на десигнерские) А десигнерские являют собой просто картинку в формате SVG и никакие манипуляции с ней не канают(

13 фев 2018 в 0:28

Ответ #3

Ответ на комментарии

Вот именно такие иконки были до меня) Сказали поменять на десигнерские) А десигнерские являют собой просто картинку в формате SVG и никакие манипуляции с ней не канают

Ховер таким же образом прописанный не работает

Стилизация изображений в формате image/png;base64 при наведении курсора

Представьте такую ситуацию,- дизайнер нарисовал очень красивую картинку, лого и т.д. Выполнил вашу просьбу, чтобы она была в векторном формате.
Но, рисовал её в растровом редакторе и сохранил её, как бы вектор, в формате base64.
То есть встроил растр в векторный формат. Обычная стилизация не работает.
Перерисовать вам в чистом векторе затруднительно.
В этом случае можно заменить стилизацию на обработку SVG фильтрами.

Основная идея — в исходном состоянии на изображение накладывается один фильтр

А при наведении курсора применяются другие цветные фильтры id=»RedFilter» , id=»GreenFilter»

.R1:hover < filter:url(#RedFilter); >.G1:hover < filter:url(#GreenFilter); >.B1:hover

Нативный способ покрасить SVG-иконки

Когда вам нужна возможность менять цвет иконок через CSS, что вы делаете? Вариантов не так много.

Обычно используются либо шрифты иконок, либо исходный код SVG скачивается и вставляется в HTML вручную. Шрифт нужно оптимизировать, иначе пользователь загрузит разом все иконки без надобности. Работа с исходным кодом требует тяжелых DOM-операций и потенциально опасна.

Чтобы защититься от вредоносного кода SVG нужно «почистить». Встроенный в Angular санитайзер, к примеру, не работает с SVG и превращает их в пустую строку. Можно воспользоваться проверенным инструментом DOMPurify и подключить его с помощью нашей библиотеки ng-dompurify, о чем я подробно рассказывал.

Давайте посмотрим на еще один способ, доступный в современных браузерах, — тэг USE.

Чем нам полезен USE?

Этот тэг задуман для переиспользования символов и целых SVG-блоков на странице. Но в современных браузерах (прости, IE) он может даже доставать внешние ресурсы!

Внешние SVG должны быть на том же домене, так что CDN не подойдет. Пока.

Это позволяет нативным образом вставить SVG в Shadow DOM, почти как тэг IMG с атрибутом src , только с возможностью использовать CSS. И оно даже само работает с кэшем! Но нужно слегка подготовить иконки. Вот что надо сделать:

Сначала в каждой иконке нужно сделать символ с уникальным id и переместить viewBox в него.

Затем надо назначить fill (или stroke ) на currentColor , чтобы потом использовать CSS-правило color для задания цвета. Можно также задать эти атрибуты в inherit на других элементах, что позволит сделать двухцветные иконки (подробнее — в примере ниже).

Когда наши иконки подготовлены, остается только скинуть их в папку assets и использовать:

Компонент именованных иконок для Angular

Писать путь и обращаться к символу каждый раз утомительно. Давайте сделаем Angular-компонент, который будет находить иконки по имени. С помощью Dependency Injection это сделать очень просто.

Нам понадобится токен для предоставления пути до всех наших иконок и простой компонент. Он будет формировать href исходя из имени и заданного пути. Мы даже можем повесить его на нативный SVG с помощью селектора: так мы вынесем наружу заботу о размере.

Надо иметь в виду, что Safari до 12.1 поддерживает только устаревший синтаксис xlink:href . Так что лучше использовать оба варианта.

Сделаем stroke и fill прозрачными для использования нескольких цветов в CSS:

Заключение

У этого подхода есть ограничения — отсутствие поддержки IE и кросс-доменности. Однако, если они для вас не критичны, данное решение может стать хорошей альтернативой другим способам.

Вам не придется включать иконки в бандл приложения или скачивать их запросами. Вы можете положиться на кэш для ускорения загрузки, а отсутствие DOM-операций делает этот подход быстрее и безопаснее ручной вставки исходников. Всем ярких решений!

Блог компании TINKOFF
CSS
Работа с векторной графикой
HTML
Angular

Как установить цвет посещённой ссылки?

Как только пользователь открывает документ, на который указывает ссылка, она помечается как посещённая и меняет свой цвет на фиолетовый, установленный по умолчанию. Чтобы задать вид оформления посещенных ссылок, используйте псевдокласс :visited , который добавляется к селектору A , как показано в примере 1.

Пример 1. Цвет посещенных ссылок

HTML5 CSS 2.1 IE Cr Op Sa Fx

    Цвет ссылок   Посещённой ссылка становится после того, как на неё щёлкнули и перешли по ней на новую страницу.

Результат данного примера показан ни рис. 1.

Цвет посещённой ссылки

Рис. 1. Цвет посещённой ссылки

В примере рядовая текстовая ссылка имеет красный цвет, а посещённая — оливковый.

HTML по теме

CSS по теме

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.