почему не может изменить стиль моих собственных иконок SVG

Question

Я создал svg изображение, используя CorelDraw (экспорт - svg).

Пытаясь следовать принятому ответу здесь

внутри головы

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href='navt.css' rel='stylesheet'>
<script>
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) {
        var $svg = jQuery(data).find('svg');
        if(typeof imgID !== 'undefined') {
            $svg = $svg.attr('id', imgID);
        }
        if(typeof imgClass !== 'undefined') {
            $svg = $svg.attr('class', imgClass+' replaced-svg');
        }
        $svg = $svg.removeAttr('xmlns:a');
        $img.replaceWith($svg);
    }, 'xml');
});
</script>

navt.css

.navtsvg{
    float:left;  // this works
    height:21px;  // this works
}

.navtsvg rect{
    fill:white;  // doesn't work
    color:white; // doens't work
    background:white;  // doesn'twork
}

.navtsvg path{
    fill:white;  // doesn't work
    color:white; // doens't work
    background:white;  // doesn'twork
}

внутри тела

<img class='svg navtsvg' id='navthome' src='svg/home-01.svg' alt='img'>

Любая помощь?

Answer 1

Что код, который вы используете, делает, ищет все значки SVG, встроенные с помощью <img> элементов ...

<img src="something.svg"/>

и загружает соответствующий файл SVG (например, что-то.s.sgg)") и внедряем его непосредственно в HTML-страницу ...

<svg ...>
   <... whatever ...>
</svg>

, чтобы вы могли стилизовать его.Вы не можете стилизовать SVG, встроенные как <img>.

Если у вас нет веских причин для этого, тогда не делайте этого.Просто вставьте свой SVG в HTML самостоятельно.Выполнение вышеуказанного способа просто замедляет время запуска вашего сайта.

Если у вас много значков, то вы можете рассмотреть возможность использования SVG-таблицы «spritesheet».См .: https://css -tricks.com / svg-symbol-good-choice-icons /

Answer 2

Это просто потому, что вы используете тег изображения.Если вы хотите стилизовать свой SVG, вам нужно встроить его в свой HTML, используя встроенные теги SVG.так что в вашем случае вам нужно будет экспортировать svg-код в CorelDraw, а не файл. здесь дает достойное разъяснение различных способов внедрения svg в html.