Img src SVG: изменение стилей с помощью CSS
HTML
<img src="logo.svg" alt="Logo" class="logo-img">
CSS
.logo-img path {
fill: #000;
}
Выше svg загружается и является изначально fill: #fff, но когда я использую вышеуказанный css, чтобы попробовать изменить его на черный, он не изменяется, это мой первый раз, когда я играю с SVG, и я не уверен, почему он не работа.
Ответы
Ответ 1
Вам нужно сделать SVG встроенным 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 ID to the new SVG
if(typeof imgID !== 'undefined') {
$svg = $svg.attr('id', imgID);
}
// Add replaced image 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;
}
Это работает!
Кредиты для вышеуказанного скрипта: Изменение цвета изображений SVG с помощью CSS & jQuery и Как изменить цвет изображения SVG с помощью CSS (замена изображения jQuery SVG)?
Ответ 2
Если ваша цель - просто изменить цвет логотипа, и вам НЕОБХОДИМО использовать CSS, тогда не используйте javascript или jquery, как было предложено в некоторых предыдущих ответах.
Чтобы точно ответить на исходный вопрос, просто:
Например, ваш 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>
... просто измените заливку и сохраните.
Ответ 3
Вы можете установить 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
Ответ 4
Попробуйте чистый 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/
Ответ 5
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)".
Ответ 6
Ответ от @Praveen прочен.
Я не мог заставить его ответить в моей работе, поэтому я сделал для него функцию hquery hover.
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');
});
Ответ 7
Этот ответ основан на ответе fooobar.com/questions/46078/... но с простой версией 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 ID to the new SVG
if(typeof imgID !== 'undefined') {
svg.setAttribute('id', imgID);
}
// Add replaced image 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/
Ответ 8
Почему бы не создать webfont с вашим изображением или изображениями svg, импортировать webfont в css, а затем просто изменить цвет глифа, используя атрибут цвета css?
Нет необходимости в javascript
Ответ 9
Сначала вам нужно внедрить 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:
-
SVG могут быть скрыты до завершения инъекции. Это важно, если стиль уже применяется во время загрузки, что в противном случае могло бы вызвать краткую "флэш-память нестандартного содержимого".
-
Элементы <img> внедряются автоматически. Если вы добавляете SVG динамически, вам не нужно беспокоиться о повторном вызове функции инъекции.
-
Случайная строка добавляется к каждому идентификатору в SVG, чтобы избежать многократного использования одного и того же идентификатора в документе, если SVG вводится более одного раза.
SVGInject представляет собой простой Javascript и работает со всеми браузерами, поддерживающими SVG.
Отказ от ответственности: я являюсь соавтором SVGInject
Ответ 10
Чтобы расширить ответ @gringo, метод Javascript, описанный в других ответах, работает, но требует, чтобы пользователь загружал ненужные файлы изображений, а IMO - раздувает ваш код.
Я думаю, что лучшим подходом было бы перенести всю одноцветную векторную графику в файл веб-шрифта. В прошлом я использовал Fort Awesome, и он прекрасно работает для объединения пользовательских значков/изображений в формате SVG вместе с любыми сторонними значками, которые вы можете использовать (Font Awesome, Bootstrap icons и т.д.), В один файл веб-шрифта. пользователь должен скачать. Вы также можете настроить его, чтобы вы включали только сторонние значки, которые вы используете. Это уменьшает количество запросов, которые должна сделать страница, и ваш общий вес страницы, особенно если вы уже включили какие-либо сторонние библиотеки значков.
Если вы предпочитаете более ориентированный на dev вариант, вы можете использовать Google "npm svg webfont" и использовать один из узловых модулей, наиболее подходящих для вашей среды.
После того, как вы сделали любой из этих двух вариантов, вы можете легко изменить цвет с помощью CSS, и, скорее всего, вы ускорили свой сайт в процессе.
Ответ 11
Если вы просто переключаете изображение между реальным цветом и черно-белым, вы можете установить один селектор как:
{Фильтр: нет;}
а другой как:
{filter:grayscale(100%);}
Ответ 12
Основная проблема в вашем случае заключается в том, что вы импортируете svg из <img> который скроет структуру SVG.
Вам нужно использовать <svg> в сочетании с <use> чтобы получить желаемый эффект. Чтобы заставить его работать, вам нужно <path id='myName'...> 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>
Ответ 13
Поскольку SVG - это в основном код, вам нужно просто содержимое. Я использовал PHP для получения контента, но вы можете использовать все, что захотите.
<?php
$content = file_get_contents($pathToSVG);
?>
Затем я печатал содержимое "как есть" внутри контейнера div
<div class="fill-class"><?php echo $content;?></div>
Чтобы финализировать правило для контейнеров SVG childs на CSS
.fill-class > svg {
fill: orange;
}
Я получил эти результаты с помощью значка материала SVG:
Mozilla Firefox 59.0.2 (64-разрядная версия) Linux
![enter image description here]()
Google Chrome66.0.3359.181 (Build oficial) (64 бит) Linux
![enter image description here]()
Opera 53.0.2907.37 Linux
![enter image description here]()
Ответ 14
Знайте, что это старый вопрос, но недавно мы столкнулись с той же проблемой и решили ее со стороны сервера. Это конкретный ответ php, но я уверен, что другие envs имеют что-то похожее. вместо использования тега img вы визуализируете svg как svg с самого начала.
public static function print_svg($file){
$iconfile = new \DOMDocument();
$iconfile->load($file);
$tag = $iconfile->saveHTML($iconfile->getElementsByTagName('svg')[0]);
return $tag;
}
теперь при рендеринге файла вы получите полный встроенный svg
Ответ 15
Если у вас есть доступ к JQuery, то, переходя к ответу Правэна, можно программно изменить цвет различных вложенных элементов внутри SVG:
$('svg').find('path, text').css('fill', '#ffffff');
Внутри find вы можете указать разные элементы, которые необходимо изменить в цвете.
Ответ 16
Это может быть полезно для людей, использующих PHP в сочетании с изображениями .svg которыми они хотят манипулировать с помощью CSS.
Вы не можете перезаписать свойства внутри тега img с помощью CSS. Но когда исходный код SVG встроен в HTML, вы, безусловно, можете. Мне нравится решать эту проблему с помощью функции require_once я .svg.php файл .svg.php. Это похоже на импорт изображения, но вы все равно можете переписать стили с помощью CSS!
Сначала включите файл SVG:
<?php require_once( '/assets/images/my-icon.svg.php' ); ?>
И это включает в себя этот значок, например:
<svg xmlns="http://www.w3.org/2000/svg" width="20.666" height="59.084" viewBox="0 0 20.666 59.084"><g transform="translate(-639.749 -3139)"><path d="M648.536,3173.876c0-2.875-1.725-3.8-3.471-3.8-1.683,0-3.49.9-3.49,3.8,0,3,1.786,3.8,3.49,3.8C646.811,3177.676,648.536,3176.769,648.536,3173.876Zm-3.471,2.341c-.883,0-1.437-.513-1.437-2.341,0-1.971.615-2.381,1.437-2.381.862,0,1.438.349,1.438,2.381,0,1.907-.616,2.339-1.438,2.339Z" fill="#142312"/><path d="M653.471,3170.076a1.565,1.565,0,0,0-1.416.9l-6.558,13.888h1.2a1.565,1.565,0,0,0,1.416-.9l6.559-13.887Z" fill="#142312"/><path d="M655.107,3177.263c-1.684,0-3.471.9-3.471,3.8,0,3,1.766,3.8,3.471,3.8,1.745,0,3.49-.9,3.49-3.8C658.6,3178.186,656.851,3177.263,655.107,3177.263Zm0,6.139c-.884,0-1.438-.514-1.438-2.34,0-1.972.617-2.381,1.438-2.381.862,0,1.437.349,1.437,2.381,0,1.909-.616,2.34-1.437,2.34Z" fill="#142312"/><path d="M656.263,3159.023l-1.49-14.063a1.35,1.35,0,0,0,.329-.293,1.319,1.319,0,0,0,.268-1.123l-.753-3.49a1.328,1.328,0,0,0-1.306-1.054h-6.448a1.336,1.336,0,0,0-1.311,1.068l-.71,3.493a1.344,1.344,0,0,0,.276,1.112,1.532,1.532,0,0,0,.283.262l-1.489,14.087c-1.7,1.727-4.153,4.871-4.153,8.638v28.924a1.339,1.339,0,0,0,1.168,1.49,1.357,1.357,0,0,0,.17.01h17.981a1.366,1.366,0,0,0,1.337-1.366v-29.059C660.414,3163.893,657.963,3160.749,656.263,3159.023Zm-8.307-17.349h4.274l.176.815H647.79Zm9.785,43.634v10.1H642.434v-17.253a4.728,4.728,0,0,1-2.028-4.284,4.661,4.661,0,0,1,2.028-4.215v-2c0-3.162,2.581-5.986,3.687-7.059a1.356,1.356,0,0,0,.4-.819l1.542-14.614H652.1l1.545,14.618a1.362,1.362,0,0,0,.4.819c1.109,1.072,3.688,3.9,3.688,7.059v9.153a5.457,5.457,0,0,1,0,8.5Z" fill="#142312"/></g></svg>
Теперь мы можем легко изменить цвет заливки с помощью CSS:
svg path {
fill: blue;
}
Сначала я попытался решить эту проблему с помощью file_get_contents() но решение, описанное выше, гораздо быстрее.
