小编web*_* pf的帖子

我想使用 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');

        }

我可以根据这个 div 的内容更改添加到 div 元素的类吗？如：“如果 div 为空，则添加此类，否则添加此类”并使用 id 或其他内容定位 div。

如果是，我该怎么做？谢谢

编辑：我找到了一个像这样的解决方法

{% set vueBlocArchives_classes = [
'liste-archives',
'type-' ~ node.bundle|clean_class
]%}
{% set vuebloc_classes = [
'liste-vdl',
'type-' ~ node.bundle|clean_class
]%}
{% set vueBlocInfoAdmin_classes = [
'liste-info-admin',
'type-' ~ node.bundle|clean_class
]%}

然后我做：

  {% if node.field_inserer_liste_viewfield is not empty and node.id == 77 %}
      <aside {{ vuebloc_attribute.addClass(vueBlocArchives_classes) }}>
        {{ content.field_inserer_liste_viewfield.0 }}
      </aside>
      {# Change classe selon le Nid - Ici nid de la page Info Admin #}
    {% elseif node.field_inserer_liste_viewfield …