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

если ваша цель-просто изменить цвет логотипа, и вам не обязательно использовать 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>

... просто измените заливку и сохранить.

вы можете установить 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

ответ от @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');
});

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

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

вам нужно сделать SVG встроенный 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/

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

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

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

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

попробуйте чистый 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/

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

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

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

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

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

.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 соответствующего элемента.

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

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

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

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

для finnaly установить правило SVG childs контейнера на CSS

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

я получил эти результаты с помощью значка материала SVG:

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

Google Chrome66.0.3359.181 (Build oficial) (64 бита) Linux

Opera 53.0.2907.37 Linux

сначала вам нужно будет ввести 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. Свгс могут быть скрыты до инъекций закончила. Это важно, если стиль уже применяется во время загрузки, что в противном случае вызовет краткую "незаполненную вспышку содержимого".

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

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

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

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

Если у вас есть доступ к JQuery, то, расширяя ответ Praveen, можно программно изменить цвет различных вложенных элементов внутри SVG:

$('svg').find('path, text').css('fill', '#ffffff');

в find вы можете указать различные элементы, которые необходимо изменить в цвете.