scss 插入svg作为背景图像,并能够修改其填充
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了scss 插入svg作为背景图像,并能够修改其填充相关的知识,希望对你有一定的参考价值。
@function str-replace($string, $search, $replace: '') {
$index: str-index($string, $search);
@if $index {
@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
}
@return $string;
}
@mixin background-svg($color) {
// Firefox doesn't like un-encoded characters
// So we need to encode #
$color: str-replace($color, '#', '%23');
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 15'><defs><style>.secondary-brand-color{fill:#{$color};}</style></defs><title>ico-check--colored</title><polygon class='secondary-brand-color' points='15.167 0 7.333 8.458 3.5 4 0 7.333 7.25 15 19 3.042 15.625 0 15.167 0'/></svg>");
}
以上是关于scss 插入svg作为背景图像,并能够修改其填充的主要内容,如果未能解决你的问题,请参考以下文章
如何使用 CSS 填充 SVG [重复]
如何将 SVG 的填充颜色更改为背景图像? [复制]
是否可以使用 javascript 和/或 css 修改背景 svg 图像?
更改通过背景图像加载的 SVG 图像的填充颜色 [重复]
将 SVG 组件作为背景图像反应到 div
使用背景图像填充 SVG 路径元素,无需平铺或缩放