css - 为什么 Firefox 不显示我的 SVG 图标，怎么办？

Question

语境
我正在创建一个仅使用 HTML、CSS 和 JS 的静态网站(用于学习目的)。我成功地实现了两个主题。为了改变它，我添加了一个 SVG button 中的图标元素。然后 svg 根据主题(月亮或太阳)发生变化。
问题
虽然一切在 Chrome 浏览器中运行良好，但使用 Firefox 时 SVG 根本不显示，但按钮按预期工作。我怀疑这来自我使用 CSS 变量更改 path 的方式。 SVG 上的 hover .但是，在我的情况下，使用变量是相当的目标。
输出
这是我在基于 Chrome 的浏览器中得到的(预期)结果:

这是我在 Firefox 中得到的:

问题
如何使用 CSS 变量使 SVG 出现在 Firefox 中？
MWE
这是一个例子。如您所见，在 Firefox 中，除非路径像第三个 svg 图标一样设置为内联，否则不会显示任何内容。

:root {
  --square: "M 0 0 H 50 V 50 H 0 Z";
  --triangle: "M 0 0 V 50 H 50 Z";
  --color1: red;
  --color2: green;
  --color3: blue;
}


/*Doesn't work in FF*/
#path1 {
  d: path(var(--square));
}


/*Doesn't work in FF either*/
#path2 {
  d: path("M 25 0 L 50 25 L 25 50 L 0 25 Z");
}


/*Behaviour when hovered*/
#btn1:hover path {
  d: path(var(--triangle));
  fill: var(--color1);
}

#btn2:hover path {
  d: path(var(--triangle));
  fill: var(--color2);
}

#btn3:hover path {
  d: path(var(--triangle));
  fill: var(--color3);
}


/*Some more (off-topic) styling*/

button:hover {
  cursor: pointer;
}

svg {
  width: 25;
  height: 25;
  max-width: 50px;
  max-height: 50px;
}

<button id="btn1">
  <svg>
    <path id="path1" />
  </svg>
</button>

<button id="btn2">
  <svg>
    <path id="path2" />
  </svg>
</button>

<button id="btn3">
  <svg>
    <path id="path3" d="M 0 0 H 50 V 50 Z";/>
  </svg>
</button>

Answer 1

因为 d 是一个属性，而不是 CSS 属性。
它在 Chrome 浏览器中工作，作为一个实验性的实现。
但它被讨论过，然后被拒绝了。
https://github.com/w3c/svgwg/issues/49
https://github.com/w3c/svgwg/issues/119

"How can I make the SVGs appear in Firefox using CSS variable" ?

将整个 SVG 分配为 CSS 变量并将其作为“背景”或“背景图像”。
您可以通过以 base64 编码(不好的做法)或使用 URL 编码器来保存整个 SVG like this one .

.bg {
  background: url(var(--yourCSSVar)); // or background-image even better
}

如何做到:
SVG 代码(原始):

<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>

复制您的 SVG 代码并在 google 上搜索 SVG 的 URL 编码器或 base64 编码器
( URL encoder 的示例， base64 encoder 的示例)。复制输出，你应该有一个看起来像这样的字符串:

    "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"

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

:root {
--encodedSVG: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_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");
--svgOnHover: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_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%3Cpolygon class='st0' points='3.95,6.08 1.54,5.71 3.28,3.92 2.88,1.44 5,2.61 7.12,1.44 6.72,3.92 8.46,5.71 6.05,6.08 5,8.32 '/%3E%3Cpath d='M6.46,2.37L6.26,3.6l-0.08,0.5l0.35,0.36l0.89,0.91L6.24,5.55L5.71,5.63L5.49,6.11L5,7.15L4.51,6.11L4.29,5.63L3.76,5.55 L2.57,5.37l0.89-0.91l0.35-0.36L3.74,3.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 {
  text-align: center;
}

.svg-background {
  height: 100%;
  min-height: 200px;
  width: 30%;
  margin: 0 auto;
  outline: 2px solid;
  background-image: var(--encodedSVG);
  background-repeat: no-repeat;
}


.svg-background:hover {
  background-image: var(--svgOnHover);
}

<h1> Example </h1>
<div class="svg-background"></div>