Sass Mixin 使用 SVG 作为背景并改变颜色

Question

我想使用 SVG 作为背景，并能够通过 css 方式更改颜色。所以在搜索之后，我找到了这个线程，但我不确定将 svg url 放在我的 mixin 中的哪里。

SVG 作为 MIXIN 中的背景图像通过 SASS 变量设置颜色

我的出发点：

$imagedir:'../images/'; // definir ici le chemin vers le dossier image
@mixin backgroundSVGandColor($filename,$color:red) {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns='#{$imagedir}#{$filename}'><g stroke="#{$color}" ... /></g></svg>');

}

但是这个“g”元素是什么？它应该包含我的 svg url 吗？

谢谢

编辑：我的 mixin 的新版本，受到您的评论的启发

@mixin backgroundSVGandColor($filename,$color:red) {
background-image: url("data:image/svg+xml,<'svg xmlns="http://www.w3.org/2000/svg" "'#{$imagedir}#{$filename}",{$color}'></svg>");

    }

URI 是否位于正确的位置？

EDIT2：新版本

   @mixin backgroundSVGandColor($filename,$color:red) {
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="url('#{$imagedir}#{$filename}')" color='$color');

        }

Answer 1

很简单，但是该函数需要其他参数，有 $filename 和 $color 但需要 $imagedir，它应该是这样的：

backgroundSVGandColor($imagedir,$filename,$color:red)...

$filename是你的svg文件的名称 $imagedir是你的svg文件的路径 $color很明显......

在 SASS 中，您可以通过以下方式访问变量内容：#{$varName}

该<g>标签适用于一组对象，您可以在此链接中了解这一点：

https://developer.mozilla.org/es/docs/Web/SVG/Element/g