使用 root:将 svg 的填充属性作为来自 css 变量的 data-uri 进行管理 [英] Using root: to manage fill attribute for svg as data-uri from css variables

问题描述

我不知道该怎么做.

我在这里试图找到一个可行的答案，但我仍然不知道如何在我的代码中实现它.

I looked on here to try to find an answer that will work and I still can't figure out how to implement it in my code.

我需要帮助来做这件事.

I need help doing this.

我正在尝试的任何东西都不起作用.

Nothing I am trying is working.

https://jsfiddle.net/2n3zvwxh/

:root {
--color-a: teal;
--color-b: black;
--color-c: orange;
--color-d: black;
}

--variableSVGFill: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='165' height='165' viewBox='0 0 165 165'><rect x='0' y='0' width='165' height='165' fill='var(--color-a)' /><rect x='5' y='5' width='160' height='160' fill='var(--color-b)' /><rect x='10' y='10' width='150' height='150' fill='var(--color-c)' /><rect x='15' y='15' width='140' height='140' fill='var(--color-d)' /><rect x='20' y='20' width='130' height='130' fill='var(--color-a)' /><rect x='25' y='25' width='120' height='120' fill='var(--color-b)' /><rect x='30' y='30' width='110' height='110' fill='var(--color-c)' /><rect x='35' y='35' width='100' height='100' fill='var(--color-d)' /><rect x='40' y='40' width='90' height='90' fill='var(--color-a)' /><rect x='45' y='45' width='80' height='80' fill='var(--color-b)' /><rect x='50' y='50' width='70' height='70' fill='var(--color-c)' /><rect x='55' y='55' width='60' height='60' fill='var(--color-d)' /><rect x='60' y='60' width='50' height='50' fill='var(--color-a)' /><rect x='65' y='65' width='40' height='40' fill='var(--color-b)' /><rect x='70' y='70' width='30' height='30' fill='var(--color-c)' /><rect x='75' y='75' width='20' height='20' fill='var(--color-d)' /><rect x='80' y='80' width='10' height='10' fill='var(--color-a)' /></svg>");

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}

body {
  
  var(--variableSVGFill);
}

Snippet 包含 svg 数据 uri 没有变量.

The Snippet features the svg data uri without the variables inside.

https://jsfiddle.net/0qwa6rbz/

我正在尝试向颜色添加变量.

I'm trying to add variables to the colors.

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}
body {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='165' height='165' viewBox='0 0 165 165'><rect x='0' y='0' width='165' height='165' fill='teal' /><rect x='5' y='5' width='160' height='160' fill='black' /><rect x='10' y='10' width='150' height='150' fill='orange' /><rect x='15' y='15' width='140' height='140' fill='black' /><rect x='20' y='20' width='130' height='130' fill='teal' /><rect x='25' y='25' width='120' height='120' fill='black' /><rect x='30' y='30' width='110' height='110' fill='orange' /><rect x='35' y='35' width='100' height='100' fill='black' /><rect x='40' y='40' width='90' height='90' fill='teal' /><rect x='45' y='45' width='80' height='80' fill='black' /><rect x='50' y='50' width='70' height='70' fill='orange' /><rect x='55' y='55' width='60' height='60' fill='black' /><rect x='60' y='60' width='50' height='50' fill='teal' /><rect x='65' y='65' width='40' height='40' fill='black' /><rect x='70' y='70' width='30' height='30' fill='orange' /><rect x='75' y='75' width='20' height='20' fill='black' /><rect x='80' y='80' width='10' height='10' fill='teal' /></svg>");
}

推荐答案

我能够让它与 SASS/SCSS 一起工作.我认为使用 vanilla CSS 是不可能的

I was able to get this to work with SASS/SCSS. I don't think it will be possible with vanilla CSS

这是笔:https://codepen.io/OSquiddy/pen/KKmEVNM

这是使用的 CSS:

$color-a: teal;
$color-b: black;
$color-c: orange;
@mixin element-color($color1, $color2, $color3) {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='165' height='165' viewBox='0 0 165 165' ><rect x='0' y='0' width='165' height='165' fill='#{$color2}' /><rect x='5' y='5' width='160' height='160' fill='#{$color1}' /><rect x='10' y='10' width='150' height='150' fill='#{$color2}' /><rect x='15' y='15' width='140' height='140' fill='#{$color3}' /><rect x='20' y='20' width='130' height='130' fill='#{$color2}' /><rect x='25' y='25' width='120' height='120' fill='#{$color1}' /><rect x='30' y='30' width='110' height='110' fill='#{$color2}' /><rect x='35' y='35' width='100' height='100' fill='#{$color3}' /><rect x='40' y='40' width='90' height='90' fill='#{$color2}' /><rect x='45' y='45' width='80' height='80' fill='#{$color1}' /><rect x='50' y='50' width='70' height='70' fill='#{$color2}' /><rect x='55' y='55' width='60' height='60' fill='#{$color3}' /><rect x='60' y='60' width='50' height='50' fill='#{$color2}' /><rect x='65' y='65' width='40' height='40' fill='#{$color1}' /><rect x='70' y='70' width='30' height='30' fill='#{$color2}' /><rect x='75' y='75' width='20' height='20' fill='#{$color3}' /><rect x='80' y='80' width='10' height='10' fill='#{$color1}' /></svg>");
}

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}
body {
  @include element-color($color-a, $color-b, $color-c);
}

你可以切换sass变量的值，SVG的颜色也会随之变化

You can switch the values of the sass variable, and the colors of the SVG will change accordingly

这篇关于使用 root:将 svg 的填充属性作为来自 css 变量的 data-uri 进行管理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！