html

<img src="logo.svg" alt="Logo" class="logo-img">

css

.logo-img path {
  fill: #000;
}

上面的svg加载并本机填充:#fff,但当我使用上面的css尝试将其更改为黑色时,它没有改变,这是我第一次使用svg,我不知道为什么它不工作。


当前回答

这是一个老问题,但最近我们遇到了同样的问题,我们从服务器端解决了它。这是一个php特定的答案,但我肯定其他envs有类似的东西。 您从一开始就将SVG呈现为SVG,而不是使用img标记。

public static function print_svg($file){
    $iconfile = new \DOMDocument();
    $iconfile->load($file);
    $tag = $iconfile->saveHTML($iconfile->getElementsByTagName('svg')[0]);
    return $tag;
}

现在呈现文件时,您将得到完整的内联SVG

其他回答

为什么不创建一个webfont与您的svg图像或图像,导入webfont在css,然后只是改变字形的颜色使用css的颜色属性? 不需要javascript

这个答案是基于https://stackoverflow.com/a/24933495/3890888,但是使用了一个简单的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's ID to the new SVG
        if(typeof imgID !== 'undefined') {
            svg.setAttribute('id', imgID);
        }
        // Add replaced image's 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/

这是一个老问题,但最近我们遇到了同样的问题,我们从服务器端解决了它。这是一个php特定的答案,但我肯定其他envs有类似的东西。 您从一开始就将SVG呈现为SVG,而不是使用img标记。

public static function print_svg($file){
    $iconfile = new \DOMDocument();
    $iconfile->load($file);
    $tag = $iconfile->saveHTML($iconfile->getElementsByTagName('svg')[0]);
    return $tag;
}

现在呈现文件时,您将得到完整的内联SVG

首先必须将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>元素将被src属性中提供的SVG文件的内容所取代。

它解决了SVG注入的几个问题:

svg可以隐藏,直到注射完成。如果在加载时已经应用了样式,这就很重要,否则会导致简短的“无样式内容闪光”。 <img>元素自动注入自身。如果动态添加svg,就不必担心再次调用注入函数。 向SVG中的每个ID添加一个随机字符串,以避免在多次注入SVG时在文档中多次使用相同的ID。

SVGInject是纯Javascript,适用于所有支持SVG的浏览器。

声明:我是SVGInject的合著者

为什么不直接使用CSS的filter属性来操作颜色:悬停或其他状态?我发现它可以将SVG图像转换为img标签。至少,它在2020年几乎得到了全面支持。在我看来这是最简单的解决办法。唯一需要注意的是,为了找到目标颜色,必须调整滤镜属性。但是你也有这个非常有用的工具。