it-swarm.com.ru

img src SVG Изменение цвета заливки

HTML

<img src="logo.svg" alt="Logo" class="logo-img">

CSS

.logo-img path {
  fill: #000;
}

Приведенный выше svg загружается и изначально fill: #fff, но когда я использую приведенную выше css, чтобы попытаться изменить его на черный, он не меняется, я впервые играю с SVG, и я не уверен, почему он не работает.

235
ngplayground

Вам нужно сделать SVG-символом inline SVG. Вы можете использовать этот скрипт, добавив класс svg к изображению:

/*
 * Replace all SVG images with inline SVG
 */
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');

        // Check if the viewport is set, if the viewport is not set the SVG wont't scale.
        if(!$svg.attr('viewBox') && $svg.attr('height') && $svg.attr('width')) {
            $svg.attr('viewBox', '0 0 ' + $svg.attr('height') + ' ' + $svg.attr('width'))
        }

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

    }, 'xml');

});

И тогда, теперь, если вы делаете:

.logo-img path {
  fill: #000;
}

Или, может быть:

.logo-img path {
  background-color: #000;
}

Это работает!

Скрипка: http://jsfiddle.net/wuSF7/462/

Кредиты для вышеуказанного скрипта: Как изменить цвет изображения SVG с помощью CSS (замена изображения jQuery SVG)?

202
Praveen Kumar Purushothaman

Если ваша цель - просто изменить цвет логотипа, и вам не обязательно использовать CSS, то не используйте javascript или jquery, как предлагалось в предыдущих ответах. 

Чтобы точно ответить на оригинальный вопрос, просто:

  1. Откройте свой logo.svg в текстовом редакторе. 

  2. найдите fill: #fff и замените его на fill: #000 

Например, ваш logo.svg может выглядеть так при открытии в текстовом редакторе:

<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
  <path d="M0 0h24v24H0z" fill="none"/>
  <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" fill="#fff"/>
</svg>

... просто измените заполнение и сохраните. 

105
Rowe Morehouse

Вы можете установить свой SVG в качестве маски. Таким образом, установка цвета фона будет действовать как цвет заливки.

HTML

<div class="logo"></div>

CSS

.logo {
    background-color: red;
    -webkit-mask: url(logo.svg) no-repeat center;
    mask: url(logo.svg) no-repeat center;
}

JSFiddle:https://jsfiddle.net/KuhlTime/2j8exgcb/

Обратите внимание, что этот метод не работает для браузера Edge. Вы можете проверить это, перейдя на этот сайт: https://caniuse.com/#search=mask

42
André Kuhlmann

Попробуйте чистый CSS:

.logo-img {
  // to black
  filter: invert(1);
  // or to blue
  // filter: invert(1) sepia(1) saturate(5) hue-rotate(175deg);
}

больше информации в этой статье https://blog.union.io/code/2017/08/10/img-svg-fill/

22
Feri

Ответ от @Praveen твердый.

Я не мог заставить его отвечать в моей работе, поэтому я сделал для него функцию наведения jquery. 

CSS

.svg path {
   transition:0.3s all !important;
}

JS/JQuery

// code from above wrapped into a function
replaceSVG();

// hover function
// hover over an element, and find the SVG that you want to change
$('.element').hover(function() {
    var el = $(this);
    var svg = el.find('svg path');
    svg.attr('fill', '#CCC');
}, function() {
    var el = $(this);
    var svg = el.find('svg path');
    svg.attr('fill', '#3A3A3A');
});
15
Matt Wujek

Почему бы не создать веб-шрифт с вашим SVG-изображением или изображениями, импортировать веб-шрифт в CSS, а затем просто изменить цвет глифа с помощью атрибута цвета CSS? JavaScript не требуется

11
gringo

2018: если вы хотите динамический цвет, не хотите использовать javascript и не хотите встроенный SVG, используйте переменную CSS. Работает в Chrome, Firefox и Safari. редактировать: и край

<svg>
    <use xlink:href="logo.svg" style="--color_fill: #000;"></use>
</svg>

В вашем SVG замените все экземпляры style="fill: #000" на style="fill: var(--color_fill)".

11
northamerican

Этот ответ основан на ответе https://stackoverflow.com/a/24933495/3890888 но с простой версией JavaScript используемого скрипта.

Вам нужно сделать SVG-символом inline SVG. Вы можете использовать этот скрипт, добавив класс svg к изображению:

/*
 * Replace all SVG images with inline SVG
 */
document.querySelectorAll('img.svg').forEach(function(img){
    var imgID = img.id;
    var imgClass = img.className;
    var imgURL = img.src;

    fetch(imgURL).then(function(response) {
        return response.text();
    }).then(function(text){

        var parser = new DOMParser();
        var xmlDoc = parser.parseFromString(text, "text/xml");

        // Get the SVG tag, ignore the rest
        var svg = xmlDoc.getElementsByTagName('svg')[0];

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

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

        // Check if the viewport is set, if the viewport is not set the SVG wont't scale.
        if(!svg.getAttribute('viewBox') && svg.getAttribute('height') && svg.getAttribute('width')) {
            svg.setAttribute('viewBox', '0 0 ' + svg.getAttribute('height') + ' ' + svg.getAttribute('width'))
        }

        // Replace image with new SVG
        img.parentNode.replaceChild(svg, img);

    });

});

И тогда, теперь, если вы делаете:

.logo-img path {
  fill: #000;
}

Или, может быть:

.logo-img path {
  background-color: #000;
}

JSFiddle: http://jsfiddle.net/erxu0dzz/1/

11
Seb3736

Сначала вам нужно будет внедрить SVG в HTML DOM. 

Существует библиотека с открытым исходным кодом под названием SVGInject , которая делает это для вас. Он использует атрибут onload для запуска внедрения.

Вот минимальный пример использования SVGInject:

<html>
  <head>
    <script src="svg-inject.min.js"></script>
  </head>
  <body>
    <img src="image.svg" onload="SVGInject(this)" />
  </body>
</html>

После загрузки изображения onload="SVGInject(this) запустит инъекцию, а элемент <img> будет заменен содержимым файла SVG, предоставленным в атрибуте src.

Это решает несколько проблем с инъекцией SVG:

  1. SVG могут быть скрыты до завершения инъекции. Это важно, если стиль уже применяется во время загрузки, что в противном случае могло бы вызвать краткую «флэш-память нестандартного содержимого».

  2. Элементы <img> вводят их автоматически. Если вы добавляете SVG динамически, вам не нужно беспокоиться о повторном вызове функции инъекции.

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

SVGInject представляет собой простой Javascript и работает со всеми браузерами, поддерживающими SVG.

Отказ от ответственности: я являюсь соавтором SVGInject

6
Waruyama

Чтобы расширить ответ @gringo, метод Javascript, описанный в других ответах, работает, но требует, чтобы пользователь загружал ненужные файлы изображений, а IMO - раздувает ваш код. 

Я думаю, что лучшим подходом было бы перенести всю одноцветную векторную графику в файл веб-шрифта. Я использовал Fort Awesome в прошлом, и он прекрасно работает для объединения ваших пользовательских значков/изображений в формате SVG вместе с любыми сторонними значками, которые вы можете использовать (Font Awesome, Bootstrap icons и т.д.) В один файл веб-шрифта, который пользователь должен загрузить. Вы также можете настроить его, чтобы вы включали только сторонние значки, которые вы используете. Это уменьшает количество запросов, которые должна сделать страница, и ваш общий вес страницы, особенно если вы уже используете какие-либо сторонние библиотеки значков. 

Если вы предпочитаете более ориентированный на dev вариант, вы можете Google "npm svg webfont" , и использовать один из модулей узла, который наиболее подходит для вашей среды.

После того, как вы сделали любой из этих двух вариантов, вы можете легко изменить цвет с помощью CSS, и, скорее всего, вы ускорили свой сайт в процессе.

5
bpulecio

Основная проблема в вашем случае заключается в том, что вы импортируете svg из тега <img>, который скрывает структуру SVG.

Вам нужно использовать тег <svg> вместе с <use>, чтобы получить желаемый эффект. Чтобы это сработало, вам нужно указать id путь, который вы хотите использовать в SVG-файле <path id='myName'...>, чтобы затем иметь возможность извлечь их из тега <use xlink:href="#myName"/> . Попробуйте отсканированный ниже.

.icon {
  display: inline-block;
  width: 2em;
  height: 2em;
  transition: .5s;
  fill: currentColor;
  stroke-width: 5;
  }
  .icon:hover {
    fill: rgba(255,255,255,0);
    stroke: black;
    stroke-width: 2;
    }

.red {
  color: red;
  }

.blue {
  color: blue;
  }
<svg width="0" height="0">
  <defs>
    <path id="home" d="M100 59.375l-18.75-18.75v-28.125h-12.5v15.625l-18.75-18.75-50 50v3.125h12.5v31.25h31.25v-18.75h12.5v18.75h31.25v-31.25h12.5z"/>
</svg>

  
  <span class="icon red">
          <svg viewbox="0 0 100 100">
            <use xlink:href="#home"/>
          </svg>
        </span>
  
    <span class="icon blue">
          <svg viewbox="0 0 100 100">
            <use xlink:href="#home"/>
          </svg>
        </span>

Обратите внимание, что вы можете поместить любой URL перед фрагментом #, если вы хотите загрузить SVG из внешнего источника (и не встраивать его в ваш HTML). Также обычно вы не указываете заливку в CSS. Лучше рассмотреть возможность использования fill:"currentColor" внутри самого SVG. Значение цвета CSS соответствующего элемента будет использоваться на месте.

2
Flavien Volken

Если вы просто переключаете изображение между реальным цветом и черно-белым, вы можете установить один селектор как:

{Фильтр: нет;}

а другой как:

{filter:grayscale(100%);}
1
wcb1

Поскольку SVG - это в основном код, вам нужно просто содержимое. Я использовал PHP для получения контента, но вы можете использовать все, что захотите.

<?php
$content    = file_get_contents($pathToSVG);
?>

Затем я напечатал содержимое "как есть" внутри контейнера div

<div class="fill-class"><?php echo $content;?></div>

Чтобы окончательно установить правило для SVG-потомков контейнера на CSS

.fill-class > svg { 
    fill: orange;
}

Я получил этот результат с иконкой материала SVG:

Mozilla Firefox 59.0.2 (64-разрядная версия) Linux

 enter image description here

Google Chrome66.0.3359.181 (сборка официальная) (64 бит) Linux

 enter image description here

Опера 53.0.2907.37 Linux

 enter image description here

0
Benjamin

Знайте, что это старый вопрос, но недавно мы столкнулись с той же проблемой и решили ее со стороны сервера. Это специфический для php ответ, но я уверен, что другие envs имеют что-то похожее .. Вместо использования тега img вы выводите svg как svg из get-go.

public static function print_svg($file){
    $iconfile = new \DOMDocument();
    $iconfile->load($file);
    $tag = $iconfile->saveHTML($iconfile->getElementsByTagName('svg')[0]);
    return $tag;
}

теперь при рендеринге файла вы получите полный встроенный svg 

0
nechemya ungar