html - 为什么不能更改我自己的 svg 图标的样式

Question

我使用 CorelDraw(导出 - svg)创建了一个 svg 图像。

尝试遵循已接受的答案 here

头部内部

<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

您正在使用的代码正在寻找通过 <img> 嵌入的所有 SVG 图标。元素...

<img src="something.svg"/>

并加载关联的 SVG 文件(例如“something.svg”)并将其直接内联注入(inject)到您的 HTML 页面中...

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

这样你就可以设计它了。您不能将嵌入的 SVG 样式设置为 <img> .

除非你有充分的理由这样做，否则不要这样做。只需自己将 SVG 放入 HTML 中即可。以上述方式进行只会减慢网站的启动时间。

如果您有很多图标，那么您可能要考虑使用 SVG“spritesheet”。请参阅:https://css-tricks.com/svg-symbol-good-choice-icons/