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”），并将其直接内联注入HTML页面中...

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

以便您可以设置样式。您无法设置嵌入<img>的SVG的样式。

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

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

Answer 2

这仅仅是因为您正在使用图片标签。如果您想设置svg的样式，则需要使用嵌入式svg标记将其嵌入html中。因此，根据您的情况，您需要在CorelDraw中导出svg代码，而不是文件中。 here很好地阐明了将svg嵌入html的不同方式。

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

2 个答案: