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 路径元素,无需平铺或缩放