Css Sass混合使用SVG作为背景并更改颜色

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

我的出发点是：

$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>');

}

---

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

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

$filename

是svg文件的名称

$imagedir

是svg文件的路径

$color

很明显

在SASS中，您可以通过以下命令访问变量内容：

{$varName}

标记用于agroup对象，您可以通过以下链接了解：

---

无论是通过

img[src]

在HTML中加载，还是通过

URL（
URL”）在
CSS
中加载，都不可能纯粹通过CSS对通过URL加载的SVG应用样式调整https://image-path）

为了纯粹通过CSS改变SVG的样式，它必须是内联的，可以是HTML，也可以是mixin通过数据URI实现的方式


在HTML中设置SVG的样式
SVG是一种基于XML的标记语言

SVG标记被认为是有效的HTML，因此可以将
.SVG
文件的文件内容复制并直接粘贴到HTML文档中

这意味着您不必在HTML中使用
img[src]
加载svg，通过直接在HTML中加载内容，您可以使用CSS选择器将CSS样式应用于svg


在CSS中设置SVG的样式
正如您的mixin所演示的，SVG的内容已经被复制并粘贴到一个文件中。采取一些措施，包括正确的编码和转义奇怪的字符，以确保浏览器正确解释表示SVG图像的数据


关于svg xmlns属性
当前混音中的这段代码有问题：

<svg xmlns='#{$imagedir}#{$filename}'>



此
xmlns
属性未用作svg图像的路径！它用于告诉SVG中使用的浏览器，因此它应该指向标准的
xmlns=”http://www.w3.org/2000/svg“
谢谢，但是我应该把这种特殊语法的url放在哪里呢？backgroundSVGandColor（'./assets/imgs/'、'image.svg'、#c0c0c0）如果答案正确，请检查我。
backgroundSVGandColor($imagedir,$filename,$color:red)...

<svg xmlns='#{$imagedir}#{$filename}'>