html

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

css

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

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


当前回答

您可以将SVG设置为掩码。通过这种方式设置背景色将充当填充色。

HTML

<div class="logo"></div>

CSS

.logo {
  background-color: red;
  -webkit-mask: url(logo.svg) no-repeat center;
  mask: url(logo.svg) no-repeat center;
}

JSFiddle: https://jsfiddle.net/KuhlTime/2j8exgcb/ MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/mask

请检查您的浏览器是否支持此功能: https://caniuse.com/#search=mask

其他回答

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

因此,您必须将SVG作为内联HTML使用。

说这是你的logo.svg代码(当你在textEditor上打开它):

Logo.SVG

<svg width="139" height="100" xmlns="http://www.w3.org/2000/svg">
    <!-- Note that I've Added Class Attribute 'logo-img' Here -->
    <g transform="translate(-22 -45)" fill="none" fill-rule="evenodd">
        <path
            d="M158.023 48.118a7.625 7.625 0 01-.266 10.78l-88.11 83.875a7.625 7.625 0 01-10.995-.5l-33.89-38.712a7.625 7.625 0 0111.475-10.045l28.653 32.73 82.353-78.394a7.625 7.625 0 0110.78.266z"
            fill="#00000" />
    </g>
</svg>

添加你想要的Class/ID到它(我添加了'logo-img'):

编辑Svg

<svg class="logo-img" width="139" height="100" xmlns="http://www.w3.org/2000/svg">
    <!-- Note that I've Added Class Attribute 'logo-img' Here -->
    ...
</svg>

现在应用你的Css规则:

CSS

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

Pro

通过这种方式,您可以对用户的操作(悬停,选中,…)进行动画化。

Con

你的HTML文件会一团糟。

这里是一个堆栈片段

<style> body { display: flex; justify-content: center; } .logo-img path { transition: .5s all linear; } .logo-img path { fill: coral; } .logo-img:hover path{ fill: darkblue; } </style> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <svg class="logo-img" width="139" height="100" xmlns="http://www.w3.org/2000/svg"> <!-- Note that I've Added Class Attribute 'logo-img' Here --> <g transform="translate(-22 -45)" fill="none" fill-rule="evenodd"> <path d="M158.023 48.118a7.625 7.625 0 01-.266 10.78l-88.11 83.875a7.625 7.625 0 01-10.995-.5l-33.89-38.712a7.625 7.625 0 0111.475-10.045l28.653 32.73 82.353-78.394a7.625 7.625 0 0110.78.266z" fill="#00000" /> </g> </svg> </body> </html>

这个答案是基于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/

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

如果你想要一个动态的颜色,不想使用javascript,也不想使用内联SVG,使用CSS变量。适用于Chrome, Firefox和Safari。编辑:和Edge

<svg>
    <use href="logo.svg" style="--color_fill: #000;"></use>
</svg>

在SVG中,将style="fill: #000"的任何实例替换为style="fill: var(——color_fill)"。