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

Question

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

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 网址吗？

谢谢

编辑：我的混音的新版本，灵感来自您的评论

@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 是否在正确的位置？

编辑2：新版本

@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

无法将样式调整纯粹通过 CSS 应用于通过 URL 加载的 SVG，无论它是通过img[src]加载到 HTML 中还是通过url('https://image-path')加载到CSS

中为了纯粹通过CSS更改SVG的样式，它必须内联，无论是在HTML中，还是以mixin通过data-URI的方式内联。

---

在 HTML 中设置SVG的样式

SVG 是一种基于 XML 的标记语言。

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

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

---

在 CSS 中设置SVG样式

正如您的mixin所示，SVG的内容已被复制并粘贴为数据URI。请特别注意包含正确的编码并转义奇怪的字符，以确保浏览器正确解释表示 SVG 图像的数据。

---

关于 svg xmlns 属性

您当前的 mixin 中的这段代码存在问题：

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

此xmlns属性不用作 svg 图像的路径！它用于告诉浏览器如何解释 SVG 中使用的 XML 标记，因此它应该指向标准xmlns="http://www.w3.org/2000/svg"

Answer 2

它很容易，但函数需要其他参数，有$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