Css 为什么'；t Firefox显示我的SVG图标，以及如何做到这一点？

上下文
我正在创建一个只使用HTML、CSS和JS的静态网站（用于学习目的）。我成功地实现了两个主题。为了改变它，我在

按钮

元素中添加了一个

SVG

图标。svg然后根据主题（月亮或太阳）进行更改

问题
虽然在chromium浏览器中一切都运行良好，但SVG在Firefox中根本不显示，但按钮按预期工作。我怀疑这是因为我使用CSS变量在

悬停

上更改SVG的

路径。然而，在我的例子中，使用变量是非常重要的

输出

以下是我在基于铬的浏览器中得到的（预期）结果：


以下是我在Firefox中得到的一个：


问题

如何使用CSS变量在Firefox中显示SVG

MWE

这里有一个例子。如您所见，在Firefox中，除非路径设置为第三个svg图标中的内联路径，否则不会显示任何内容


：根目录{
--正方形：“m00h50v50h0z”；
--三角形：“M 0 V 50 H 50 Z”；
--颜色1：红色；
--颜色2：绿色；
--颜色3：蓝色；
}
/*在FF中不起作用*/
#路径1{
d：路径（var（--square））；
}
/*在FF中也不起作用*/
#路径2{
d：路径（“M 25 0 L 50 25 L 25 50 L 0 25 Z”）；
}
/*悬停时的行为*/
#btn1：悬停路径{
d：路径（var（--三角形））；
填充：var（--color1）；
}
#btn2：悬停路径{
d：路径（var（--三角形））；
填充：var（--color2）；
}
#btn3：悬停路径{
d：路径（var（--三角形））；
填充：var（--color3）；
}
/*更多（离题）样式*/
按钮：悬停{
光标：指针；
}
svg{
宽度：25；
身高：25；
最大宽度：50px；
最大高度：50px；
}

因为d是一个属性，而不是CSS属性。
它在chromium浏览器中工作，作为一个实验实现。
但它被讨论过，然后被拒绝了



“如何使用CSS变量在Firefox中显示SVG”

将整个SVG指定为CSS变量，并将其作为“背景”或“背景图像”。
您可以通过在base64中编码来保存整个SVG（糟糕的做法），或者为SVG使用URL编码器

如何做到这一点：

SVG代码（原件）：

现在，我将创建一个代码段并使用该字符串


：根目录{
--encodedSVG:url("数据：image/svg+xml，%3Csvg version='1.1'id='Layer_1'xmlns='1http://www.w3.org/2000/svg'xmlns:xlink='1！'http://www.w3.org/1999/xlink“x='0px'y='0px'viewBox='0 0 10 10'style='0 10'启用背景：新的0 0 10 10；'xml:space='保留'%3E%3Cstyle type='text/css'%3E.st0%7b填充：%23FF00FF；%7D%0A%3C/样式%3E%3Cg%3E%3rect x='3'y='3'class='st0'宽度='4'h八个='4'/%3E%3C路径d='M6.5,3.5v3h-3v-3H6.5M7.5,2.5h-5v5h5V2.5L7.5,2.5z'/%3E%3C/g%3E%3C/svg%3E%0A'）；
--svgOnHover:url（“数据：image/svg+xml，%3Csvg version='1.1'id='Layer_1'xmlns='1http://www.w3.org/2000/svg'xmlns:xlink='1！'http://www.w3.org/1999/xlink“x='0px'y='0px'viewBox='0 0 10 10'style='0 0 10 10'启用背景：新的0 0 10 10；'xml:space='保留'%3E%3Cstyle type='text/css'%3E.st0%7b填充：%23FF00FF；%7D%0A%3C/样式%3E%3Cg%3E%3C多边形class='st0'点='3.95,6.08 1。5.4 6.7 7 7.7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 5 5.5 5 5 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 0.6l-0.2-1.22l0.98,0.54L5,3.18l0.48-0.27L6.46,2.37 M7.78,0.5L5,2.04L2.22,0.5l0.53,3.26 L0.5,6.06l3.11,0.48L5,9.5l1.39-2.96L9.5,6.06L7.25,3.76L7.78,0.5L7.78,0.5z'/%3E%3C/g%3E%3C/svg%3E%0A”）；
}
h1{
文本对齐：居中；
}
.svg背景{
身高：100%；
最小高度：200px；
宽度：30%；
保证金：0自动；
外形：2倍实心；
背景图像：var（--encodedSVG）；
背景重复：无重复；
}
.svg背景：悬停{
背景图像：var（--svgonhave）；
}
示例
我认为您需要将CSS变量转换为基于SMIL的方法。这在Chrome和Firefox上都适用。@RobertLongson您能详细说明一下吗？您能给我举个例子吗？我尝试过应用您的技术，但我的尝试没有成功。Thanksexample已经准备好了！这意味着如果我想更改悬停时的填充颜色，我需要o硬编码？因为如果我想使用变量，那将是一个麻烦。无论如何，感谢您提供的示例！如果您需要使用SVG，我建议只将其放在HTML中。没有理由在CSS变量对您不利的情况下使用它。也就是说，您可以在悬停时简单地更改SVG。没有o修改原始文件的原因。为了能够“切换/替换”SVG元素（例如SVG的viewbox）内的一些路径标记，有很多东西必须匹配。在悬停示例中添加
.bg {
  background: url(var(--yourCSSVar)); // or background-image even better
}

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 10 10" style="enable-background:new 0 0 10 10;" xml:space="preserve">
<style type="text/css">
    .st0{fill:#FF00FF;}
</style>
<g>
    <rect x="3" y="3" class="st0" width="4" height="4"/>
    <path d="M6.5,3.5v3h-3v-3H6.5 M7.5,2.5h-5v5h5V2.5L7.5,2.5z"/>
</g>
</svg>

    "data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg'
xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 10 10' style='enable-background:new 0 0 10 10;'
xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23FF00FF;%7D%0A%3C/style%3E%3Cg%3E%3Crect x='3' y='3'
class='st0' width='4' height='4'/%3E%3Cpath d='M6.5,3.5v3h-3v-3H6.5
M7.5,2.5h-5v5h5V2.5L7.5,2.5z'/%3E%3C/g%3E%3C/svg%3E%0A"