html - 在后台使用 Sprite 中的 SVG

Question

我的目标是使用SVG在重复的背景中，但我需要能够更改其 fill颜色 CSS用于网站的不同部分。

据我对SVG的理解，它不能作为外部文件( background:url(image.svg) )加载，因为那样我就无法更改 CSS 。属性如 fill它的属性(property)。另一方面，SVG无法内联于 HTML ( <svg>...</svg> ) 因为那时我无法在 background 中使用/引用它属性。

如果我错了，请纠正我，或者你有什么解决办法吗？

Answer 1

As far as my understanding of the SVG, it can't be laoded as anexternal file (background:url(image.svg)), because then I am not ableto change the CSS property like fill proeprty of it.

考虑使用CSS filters更改 svg 颜色而不是 fill

在下面的示例中，svg 文件作为外部文件加载:

背景图像:url(https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/android.svg);

使用 CSS 过滤器组合，鼠标悬停时其颜色将发生变化

您可以使用该实用程序获得特定颜色所需的滤镜组合

https://codepen.io/sosuke/pen/Pjoqqp

悬停以更改颜色

.android {
display:inline-block;
width:96px;
height:105px;
background-image:url(https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/android.svg);
}
.android.blue:hover {
 filter: invert(8%) sepia(99%) saturate(7454%) hue-rotate(248deg) brightness(100%) contrast(143%);
} 

.android.red:hover {
 filter: invert(25%) sepia(100%) saturate(7420%) hue-rotate(6deg) brightness(98%) contrast(122%);
} 

.android.gold:hover {
 filter: invert(50%) sepia(31%) saturate(3357%) hue-rotate(113deg) brightness(99%) contrast(101%);
}

<div class="android blue">
</div>
<div class="android red">
</div>
<div class="android gold">
</div>