Как правильно залить SVG в CSS?

Question

[TitNIk]

Доброго всем вечера. Прикрепил SVG через background:

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='Capa_1' x='0px' y='0px' viewBox='0 0 477.175 477.175' enable-background='new 0 0 477.175 477.175'%3E%3Cg%3E%3Cpath class='moresvg' fill='%23696969' d='M360.7 229L135.7 4c-5.4-5.3-14-5.3-19.2 0s-5.3 13.8 0 19L332 238.7 116.5 454c-5.3 5.4-5.3 14 0 19.2 2.6 2.6 6 4 9.5 4 3.4 0 7-1.3 9.5-4l225-225c5.4-5.3 5.4-14 .2-19z'/%3E%3C/g%3E%3C/svg%3E");

Подобным образом. Не применяется fill. Мне нужно поменять заливку при наведении.

Comments

[Александр Кузнецов]

Можно просто вставить SVG в HTML в img. Потом заинлайнить через jQuery. Далее применять класс .ico-svg к svg картинке в html. И через CSS уже делать что угодно, через fill. По каскаду svg -> path -> fill и fill задавать цвета. Единственный минус, придётся к fill задавать important.

jQuery('.ico-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 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');

});

Answer 1

[Ankhena]

Нужно вставлять в html.
fill применяется к селекторам. Если Вы написали картинку "инлайном" в css, то никаких селекторов, к которым можно было применить fill нет.

Comments

[TitNIk]

Нету возможности вставить в html. Разве нету вариантов применить к классу?

[TitNIk]

Ankhena W: Как именно?

[Ankhena]

TitNIk: Как из css задать fill для SVG?

Answer 2

[Moskus]

Только если использовать https://github.com/TrySound/postcss-inline-svg

Answer 3

[Егор Живагин]

Недавно сталкивался. Тут либо вставлять в html, либо инлайнить через js / jQuery . Я смотрю, ссылку уже кинули выше) Только fill скорее всего применять надо не к самой svg, а к svg pass (желательно в коде svg прописать классы для pass )

Comments

[Ankhena]

path