Не могу поменять fill с помощью метода .css примененый к svg объекту. Как исправить?

Question

[Snowfall_Zh]

Я менял fill у svg объекта с помощью такого скрипта.

$('img.img-svg').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-svg path{
		fill: #fff;
		transition: all .3s;
	}

Затем хотел поменять ее обратно с помощью такого скрипта. Но что-то не получается.

$(window).on('scroll', function () {
		headerScroll();
	});

	function headerScroll() {
if ($(window).scrollTop() > 20) {
			$('.img-svg path').css('fill:#000', 'transition: all .3s');
		} else {
			$('.img-svg path').css('fill:#fff');
		}
}

Answer 1

[Петр]

У атрибута в svg приоритет выше, чем через стиль. Задавайте первоначальное значение также через стили.

Comments

[Snowfall_Zh]

Так он через стили и задан.
.img-svg path{
fill: #fff;
transition: all .3s;
}
Это в стилях записано. Или мы о разном?

[Петр]

Я вот об этом атрибуте. Пока не уберете работать не будет

[Snowfall_Zh]

Петр, я и до этого убирал их. Не работает.

Но, вот елси убрать галочку с fill. То все работает. А вот если через код убрать, то нет.

[Петр]

Snowfall_Zh, Удалите указанный атрибут и установите первоначальное значение через стиль и все будет работать

[Snowfall_Zh]

А как это сделать? Я кажется не понимаю вас. Можете по подробнее.