0 Пользователей и 1 Гость просматривают эту тему.
  • 14 Ответов
  • 641 Просмотров
*

Forgiving

  • Захожу иногда
  • 60
  • 6 / 0
Как задать цвет SVG?
« : 11.05.2020, 14:41:22 »
Здравствуйте, кто подскажет почему не меняется цвет?
В HTML загрузил иконку <img src="https://пвпвпаавпв/search.svg" class="search">
В CSS   .search { fill: #ffffff; }
И фиг там
*

gartes

  • Завсегдатай
  • 1546
  • 123 / 5
  • Е = mс²
Re: Как задать цвет svg?
« Ответ #1 : 11.05.2020, 14:54:07 »
Цитировать
И фиг там
Код
img.search svg {
    vertical-align: middle;
    stroke: #fcc10a;
    stroke-width: 2px;
    fill: #fff;
}
А так  ? Не Фиг ? ))))
*

gartes

  • Завсегдатай
  • 1546
  • 123 / 5
  • Е = mс²
Re: Как задать цвет svg?
« Ответ #2 : 11.05.2020, 14:55:59 »
Хотя нет!
А  ссылку Дайте на файлик !
*

gartes

  • Завсегдатай
  • 1546
  • 123 / 5
  • Е = mс²
Re: Как задать цвет svg?
« Ответ #3 : 11.05.2020, 15:00:56 »
А... Вот Вам !
Код
<svg height="19" width="14" style="fill:#ff7878;">
*

Forgiving

  • Захожу иногда
  • 60
  • 6 / 0
Re: Как задать цвет svg?
« Ответ #4 : 11.05.2020, 15:07:34 »
Спасибо, но что-то никак не получается всё-равно)
*

gartes

  • Завсегдатай
  • 1546
  • 123 / 5
  • Е = mс²
Re: Как задать цвет svg?
« Ответ #5 : 11.05.2020, 15:08:39 »
Спасибо, но что-то никак не получается всё-равно)
Ссылку на файл  - Давайте !
*

Forgiving

  • Захожу иногда
  • 60
  • 6 / 0
Re: Как задать цвет svg?
« Ответ #6 : 11.05.2020, 15:16:25 »
Ссылку на файл  - Давайте !

Не на сайте делаю
*

Forgiving

  • Захожу иногда
  • 60
  • 6 / 0
Re: Как задать цвет svg?
« Ответ #7 : 11.05.2020, 15:30:19 »
Понял, не получится так поменять. Если чисто ссылкой грузить svg
*

Forgiving

  • Захожу иногда
  • 60
  • 6 / 0
Re: Как задать цвет svg?
« Ответ #8 : 11.05.2020, 15:58:34 »
Код
<svg class="search__icon" viewBox="0 0 26 28">
            <path d="M18 13c0-3.859-3.141-7-7-7s-7 3.141-7 7 3.141 7 7 7 7-3.141 7-7zm8 13c0 1.094-.906 2-2 2a1.96 1.96 0 0 1-1.406-.594l-5.359-5.344a10.971 10.971 0 0 1-6.234 1.937c-6.078 0-11-4.922-11-11s4.922-11 11-11 11 4.922 11 11c0 2.219-.672 4.406-1.937 6.234l5.359 5.359c.359.359.578.875.578 1.406z">
            </path>
           </svg>

Надо код cvg вставлять, теперь можно менять
*

fireman

  • Захожу иногда
  • 326
  • 10 / 0
  • в цель...
Re: Как задать цвет svg?
« Ответ #9 : 11.05.2020, 17:27:40 »
Надо код cvg вставлять, теперь можно менять

Я вот так делаю:

Код
<svg class="search__icon" viewBox="0 0 26 28">
            <path d="M18 13c0-3.859-3.141-7-7-7s-7 3.141-7 7 3.141 7 7 7 7-3.141 7-7zm8 13c0 1.094-.906 2-2 2a1.96 1.96 0 0 1-1.406-.594l-5.359-5.344a10.971 10.971 0 0 1-6.234 1.937c-6.078 0-11-4.922-11-11s4.922-11 11-11 11 4.922 11 11c0 2.219-.672 4.406-1.937 6.234l5.359 5.359c.359.359.578.875.578 1.406z" fill="#КОД НУЖНОГО ЦВЕТА"/>
           </svg>

Смотреть на окончание строки с path...
*

beliyadm

  • Легенда
  • 9512
  • 1651 / 66
  • Севастополь == Россия
Re: Как задать цвет svg?
« Ответ #10 : 11.05.2020, 17:45:11 »
img src="https://пвпвпаавпв/search.svg - не сработает, либо полный код вставлять (что крайне неудобно и громоздко), либо JS
Вот простенькая функция, вставляем картинку в HTML как обычно (как выше), а уже скрипт отработает её в объект
Код
	$('img.imgsvg').each(function(){
  var $img = $(this);
  var imgClass = $img.attr('class');
  var imgURL = $img.attr('src');
  $.get(imgURL, function(data) {
    var $svg = $(data).find('svg');
    if(typeof imgClass !== 'undefined') {
      $svg = $svg.attr('class', imgClass+' replaced-svg');
    }
    $svg = $svg.removeAttr('xmlns:a');
    if(!$svg.attr('viewBox') && $svg.attr('height') && $svg.attr('width')) {
      $svg.attr('viewBox', '0 0 ' + $svg.attr('height') + ' ' + $svg.attr('width'))
    }
    $img.replaceWith($svg);
  }, 'xml');
});

И уже в стилях мы можем для img.imgsvg указывать fill и остальные параметры
Все истины, которые я хочу вам изложить, — бесстыдная ложь. Записки нетрезвого кодера
Skype: beliyadm_pb
*

Forgiving

  • Захожу иногда
  • 60
  • 6 / 0
Re: Как задать цвет svg?
« Ответ #11 : 11.05.2020, 18:56:38 »
Я вот так делаю:

Код
<svg class="search__icon" viewBox="0 0 26 28">
            <path d="M18 13c0-3.859-3.141-7-7-7s-7 3.141-7 7 3.141 7 7 7 7-3.141 7-7zm8 13c0 1.094-.906 2-2 2a1.96 1.96 0 0 1-1.406-.594l-5.359-5.344a10.971 10.971 0 0 1-6.234 1.937c-6.078 0-11-4.922-11-11s4.922-11 11-11 11 4.922 11 11c0 2.219-.672 4.406-1.937 6.234l5.359 5.359c.359.359.578.875.578 1.406z" fill="#КОД НУЖНОГО ЦВЕТА"/>
           </svg>

Смотреть на окончание строки с path...

Если так делать то помоему через CSS уже не поменять его, цвет я имею в виду
*

fireman

  • Захожу иногда
  • 326
  • 10 / 0
  • в цель...
Re: Как задать цвет svg?
« Ответ #12 : 11.05.2020, 19:16:16 »
Не могу сказать. А зачем его менять в CSS? Открыл файл через редактор кода, поменял цвет и залил svg-файл на хостинг...
*

beliyadm

  • Легенда
  • 9512
  • 1651 / 66
  • Севастополь == Россия
Re: Как задать цвет svg?
« Ответ #13 : 11.05.2020, 19:20:11 »
Не могу сказать. А зачем его менять в CSS? Открыл файл через редактор кода, поменял цвет и залил svg-файл на хостинг...
А когда нужно иметь один файл в разных вариациях цвета - плодить сущности?
Или иконка черная на белом фоне, по ховеру должна стать белой на черном.

Приведенный мной скрипт позволяет вставлять SVG как обычное изображение в код (через img src) и работать с ним на уровне стилей.
Все истины, которые я хочу вам изложить, — бесстыдная ложь. Записки нетрезвого кодера
Skype: beliyadm_pb
*

fireman

  • Захожу иногда
  • 326
  • 10 / 0
  • в цель...
Re: Как задать цвет svg?
« Ответ #14 : 11.05.2020, 19:38:20 »
Приведенный мной скрипт позволяет ...
Кто бы спорил, а я нет...
Согласен. Ваше решение функционально и если будет необходимость - воспользуюсь им.
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Как поменять цвет текста в CSS если они связаны одним label?

Автор zeni1agent

Ответов: 2
Просмотров: 664
Последний ответ 23.05.2018, 13:54:22
от zeni1agent
Как изменить цвет заголовка материала?

Автор wahrenz

Ответов: 3
Просмотров: 1806
Последний ответ 19.04.2017, 14:34:59
от wahrenz
Поменять цвет в шаблоне Zoka Transports

Автор MoriartyBes

Ответов: 31
Просмотров: 1716
Последний ответ 22.01.2017, 14:00:54
от vipiusss
Не могу найти где закодирован цвет

Автор olderman

Ответов: 2
Просмотров: 819
Последний ответ 15.12.2016, 11:50:58
от darkghost
Как задать :hover{ и :active { Для одной кнопки?

Автор RicoID

Ответов: 2
Просмотров: 1278
Последний ответ 18.11.2016, 16:34:43
от ProtectYourSite