@DeniSidorenko

Почему не стилизуется img SVG?

Всем привет. Надо использовать SVG иконку. Экспортировал из PSD и вставил через тег img. Прочитал что требуется обработать через JavaScript, что бы был виден код в HTML. Но fill никак не хочет работать. Мне надо при ховере менять заливку.
Прошу внимание на код

код SVG картинке
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="19" height="23" viewBox="0 0 19 23">
  <metadata><?xpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d"?>
<x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 5.6-c138 79.159824, 2016/09/14-01:09:01        ">
   <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
      <rdf:Description rdf:about=""/>
   </rdf:RDF>
</x:xmpmeta>
<?xpacket end="w"?></metadata>
<image id="Vector_Smart_Object" data-name="Vector Smart Object" width="19" height="23" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAXCAQAAABDyLxRAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAKqNIzIAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAHdElNRQfhBx4UAjgSMU+LAAABJklEQVQoz4XTvUsDMRzG8W9yxSJFHMRFsA4F7SxIVbgMjp0cRPBlkYo6dXWQIhb/AHXRUXDTXTtY6RUHX/AF7CDdhNJJxA4O3ok6pPWWM3nGh09+JCERHpHpZYNF5qkoAGKRaIgyKaDZKWQkOyIFPFI3MYULBKyGVRRzgTemuQkr0T5CD1nSvFOmxgRprhlnhE/uOVV+hy2wS1974TPnjJH5G9Qkp0rCgzX2MeWbjCTJDuYUuYuRJ25Ex2oLJFnLrG19IcNGFFDTzDEyX/1o1jKyRHVQs4ZlbyuaXVrYenUKnKU4s0bmMPcSCK+LBv2WiQ8SnwNs2RMeJKgzYEBPjErgg2UDCsipL/0szyj+y/LqNvwym7Qo0M0FJ1zh4DLDJK8U1CHAL/9aRCBZBw0JAAAAAElFTkSuQmCC"/>
</svg>



в хтмл прописал img src='path to svg'' но благодаря скрипту через инспектор вижу код из img.svg

JS CODE
jQuery('img.svg').each(function(){
			var $img = jQuery(this);
			var imgID = $img.attr('id');
			var imgClass = $img.attr('class');
			var imgURL = $img.attr('src');

			jQuery.get(imgURL, function(data) {
					// Get the SVG tag, ignore the rest
					var $svg = jQuery(data).find('svg');

					// Add replaced image's ID to the new SVG
					if(typeof imgID !== 'undefined') {
							$svg = $svg.attr('id', imgID);
					}
					// Add replaced image's classes to the new SVG
					if(typeof imgClass !== 'undefined') {
							$svg = $svg.attr('class', imgClass+' replaced-svg');
					}

					// Remove any invalid XML tags as per http://validator.w3.org
					$svg = $svg.removeAttr('xmlns:a');

					// Replace image with new SVG
					$img.replaceWith($svg);

			}, 'xml');

	});




но как не стараюсь fill не рабоает
. Посмотрел примеры странно что у меня в коде svg нету
  • Вопрос задан
  • 311 просмотров
Решения вопроса 1
@cssfish
Плохое знание основ - причина больших бед
используйте symbol+ use
https://css-tricks.com/svg-symbol-good-choice-icons/
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы