CSS SVG背景图像作为data-uri：是否有一种方法可以使用＆＃x27;外部＆＃x27; CSS

发布于 2025-02-08 05:00:42 字数 1924 浏览 1 评论 0原文

我有一个使用不同颜色主题的网站 /应用程序。这些主题是在CSS-Custom-Properties中提供的：

类似：

:root{
   --main-color: red;
   --lighht-color: gray;
   --dark-color: brown;
    ...
}

这些主题是为灵活性提取的：

:root{
   --main-text-color: var(--dark-color);
   ....
}

现在我有了Check-Boxbes，应该使用SVG-Background Uri-s这样：

input[type=checkbox]:checked{
   --check-color: blue;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' style='enable-background:new 0 0 100 100' xml:space='preserve'%3E%3Cstyle type='text/css'%3E%0A%23check%7B%0Astroke: var(--check-color);%0A%7D%0A%3C/style%3E%3Cpath id='check' style='fill:none;stroke-width:18;stroke-miterlimit:10' d='m24.3 36.8 20.9 29.3 45.7-41.8'/%3E%3C/svg%3E");
   stroke: red !important;
}

您已经可以看到我试图更改的颜色从URI弦乐外的检查标记以几种方式而没有成功。

我也尝试了：

:root{
stroke: green;
--check-color: lime;
}

没有

#check{
stroke: pink;
}

成功。

我进行了大量研究，发现所有这些方法都不起作用，data-uri中的svg基本上被视为独立文档/dom-ructucture，是IS的主要文档 中

使用

CSS在... 我在这里给出的轮廓，并拥有一个以上的SVG元素以揭示理想的多种颜色会非常棘手和复杂。

sass ：如果有一种（不是过于复杂的）方法可以读取css-custom属性的值，例如 root.var（ - check-color）从字面上将其编译到CSS（在SVG-uri内部）中，这将是有益的，但并不理想。（可以说 - ＃{$ sassvar}的相反，可以说）。我还找不到那个大道的开口，并且随着CSS-Custom-Properties的灵活范围（以及它们被嵌套），我想这并不容易。

javascript / dom < / strong>：我可以将SVG代码的跨度注入文档中，但是由于可访问性 /清晰的语义和HTML有效性的原因，我根本不喜欢此。我也可以尝试通过CSSStyleDeclaration读取URI并获取属性，更换字符串内的颜色并将其设置回。我猜。这可能需要

检查一个取消选中的框以获取声明（不想依靠在CSS中对其进行编码的固定方式）
替换一个非常常见的字符串例如或多或少复杂的字符串中的“＃000”或“黑色”。（我不会想要放一个'$！her-goes-color！$'SVG，因为如果它会破坏它未替换...）
处理URL编码和 - 编码，并且
必须使用任何样式和/或图形更新调整该脚本...

根本不是理想的。

但是，在大多数时候，我相信你们中的一些伟大而知识渊博的人可能会为我提供灵感或解决方案。谢谢！

原文

I have a website / application that uses different color themes.
Those themes are provided in css-custom-properties:

like:

:root{
   --main-color: red;
   --lighht-color: gray;
   --dark-color: brown;
    ...
}

those are abstracted for flexibility like:

:root{
   --main-text-color: var(--dark-color);
   ....
}

Now I have check-boxes that should use SVG-Background uri-s like this:

input[type=checkbox]:checked{
   --check-color: blue;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' style='enable-background:new 0 0 100 100' xml:space='preserve'%3E%3Cstyle type='text/css'%3E%0A%23check%7B%0Astroke: var(--check-color);%0A%7D%0A%3C/style%3E%3Cpath id='check' style='fill:none;stroke-width:18;stroke-miterlimit:10' d='m24.3 36.8 20.9 29.3 45.7-41.8'/%3E%3C/svg%3E");
   stroke: red !important;
}

you can already see that I tried to change the color of the check-mark from outside the uri-string in several ways without success.

I also tried:

:root{
stroke: green;
--check-color: lime;
}

and

#check{
stroke: pink;
}

with no success.

I did a lot of research and found out that all of those methods will not work, ass the svg in the data-uri is essentially treated as an independent document/dom-sructure form the main document that the is CSS used in...

I can think of three other ways to work around my problem:

CSS-masking: Will likely work, but my actual situation is more complex than the outline I give here and having more than one svg-element to reveal ideally more than one color will be very tricky and complicated.

SASS: If there is a (not overly complex) way to read the value of a css-custom property like root.var(--check-color) into sass and compile it literally into the CSS (inside the svg-uri), that would be helpfully while not ideal; (The opposite of --my-var: #{$sassVar} so to speak). I couldn't find an opening in to that avenue yet, and with the flexible scoping of css-custom-properties (and them being nested) I guess it will be not easy.

JavaScript / DOM: I could go about to inject spans with SVG-Code into the document, but for reasons of accessibility / clear semantics and validity of my html I don't like this at all.
I could also try to read the uri via CSSStyleDeclaration and get the Property, replace the color inside the string and set it back. I guess.
That would probably require to

check an uncheck a box to get the declaration (not wanting to rely on
a fixed way of it being coded in css)
replace a very common string
like '#000' or 'black' in a more or less complex string. (I wouldn't
want to put a '$!her-goes-color!$' the svg, as that would break it if
not replaced...)
deal with url-encoding and -decoding and
would have to adjust that script with any style and/or graphic update...

Not ideal at all.

But as most times I'm confident that some of you great and knowledgeable people might have an inspiration or solution for me.
THX!

分享到QQ

分享到微博