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

Question

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

SVG as a background-image in MIXIN setting color via a SASS variable

我的出发点：

$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 的新版本，灵感来自你的 cmets

@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

不可能仅通过 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 的内容已被复制并粘贴为 data-URI。使用一些special care 来包含正确的编码并转义奇怪的字符，以确保浏览器正确解释代表您的 SVG 图像的数据。

---

关于 svg xmlns 属性

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

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

xmlns 属性不用作您的 svg 图片的路径！用于告诉浏览器在SVG中使用how to interpret the XML tags，所以应该指向标准的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