html

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

css

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

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


当前回答

我只想改变特定的路径和/或颜色,甚至不同的路径上色。此外,在我的情况下,一些CSS被应用到img标签直接,因此我想让它是原始的img元素,而不是混乱的定位和对齐。

感谢这个答案的启发:https://stackoverflow.com/a/43015413/1444589,这对我来说很有效:

let img = document.querySelector('img[class^="YourClassName"]');
let imgURL = img.src;

fetch(imgURL)
  .then(response => response.text())
  .then(text => {
    let parser = new DOMParser();
    let xmlDoc = parser.parseFromString(text, 'text/xml');
    let svg = xmlDoc.getElementsByTagName('svg')[0];
    let paths = xmlDoc.getElementsByTagName('path');

    // access individual path elements directly
    let leftShape = paths[0];
    leftShape.setAttribute('fill', '#4F4F4F');

    // or find specific color
    const pathsArr = Array.from(paths);
    let skirtShape = pathsArr.find(path => path.getAttribute('fill') === '#F038A5');
    skirtShape.setAttribute('fill', '#0078D6');

    // Replace old SVG with colorized SVG
    // positioning and alignment is left untouched
    let base64Str = btoa(new XMLSerializer().serializeToString(svg));
    img.src = 'data:image/svg+xml;base64, ' + base64Str;
  });

其他回答

如果你的形状总是一种纯色,而且你有两个以上的纯色,你可以使用Fontello,用你自己的一系列自定义SVG形状制作一个自定义图标字体。然后你可以单独用CSS设置/动画它们的大小和颜色。

对于这个问题的所有可能的用例,这是一个需要考虑的基本范例。我在很多项目中都使用过它。无论如何,如果你没有听说过Fontello,你需要去了解一下。如果你知道一个类似的更好的解决方案,我很想知道。

可能的失败:

众所周知,图标/形状字体会干扰屏幕阅读器,所以这可能需要一些处理。 Fontello在导入形状时可能很挑剔,在创建和导出形状时可能需要一些尝试和错误。 避免任何和所有分组,只使用单一的非嵌套复合形状。

我建议你选好颜色,去这支笔 https://codepen.io/sosuke/pen/Pjoqqp 它将十六进制转换为css过滤器,例如:#64D7D6

平等的

filter: invert(88%) sepia(21%) saturate(935%) hue-rotate(123deg) brightness(85%) contrast(97%);

最后一个片段

.filterit { 宽度:270 px; 滤镜:反转(88%)棕褐色(21%)饱和(935%)色调旋转(123deg)亮度(85%)对比度(97%); } < img src = " https://www.flaticon.com/svg/static/icons/svg/1389/1389029.svg " 类= " filterit />

您可以将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

因为SVG基本上是代码,所以您只需要内容。我使用PHP来获取内容,但您可以使用任何您想要的内容。

<?php
$content    = file_get_contents($pathToSVG);
?>

然后,我已经打印内容“是”在一个div容器

<div class="fill-class"><?php echo $content;?></div>

最后将规则设置为CSS上的容器的SVG子元素

.fill-class > svg { 
    fill: orange;
}

我用SVG材质图标得到了这个结果:

Firefox 59.0.2(64位)Linux

谷歌Chrome66.0.3359.181 (Build official)(64位)Linux

Opera 53.0.2907.37 Linux

尝试纯CSS:

.logo-img {
  /* to black */
  filter: invert(1);
  /* or to blue */
  filter: invert(0.5) sepia(1) saturate(5) hue-rotate(175deg);
}

更多信息请参见本文https://blog.union.io/code/2017/08/10/img-svg-fill/