html - 在后台使用精灵中的 SVG

Question

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

据我的理解SVG，它不能作为一个外部文件（background:url(image.svg)），因为那样我就不能改变它的CSS属性fill。另一方面，SVG不能在HTML( <svg>...</svg>) 中内联，因为这样我就无法在background属性中使用/引用它。

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

标签： htmlcsssvg

Answer 1

就我对 SVG 的理解而言，它不能作为外部文件 (background:url(image.svg)) 进行加载，因为这样我就无法更改 CSS 属性，比如它的填充属性。

考虑使用CSS 过滤器来改变 svg 的颜色，而不是fill

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

background-image: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>