@smithana

Как с помощью css изменить цвет svg картинки, если она вставлена тегом img?

собственно сабж в вопросе.

допустим в html код в ставленна svg картинка:
<img src="img/myPic.svg">

Можно изменить её заливку (параметр fill) используя только css? Или без js тут никак не обойтись?

Знаю, что можно поменять заливку, если в html сразу вставлять код svg (path). Но уж очень не хочется этого делать(

Спасибо.
  • Вопрос задан
  • 12569 просмотров
Пригласить эксперта
Ответы на вопрос 2
webinar
@webinar
Учим yii: https://youtu.be/-WRMlGHLgRg
Svg как картинка в img - не управляется через css. Или код или как объект.
https://habrahabr.ru/post/99248/
Ответ написан
Добавляете код:
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');

  });

Для картинки пишем класс .svg, после чего в css пишем
.svg path { fill: #fff;}
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы