【发布时间】：2021-04-19 00:08:51
【问题描述】：
上下文
我正在创建一个仅使用 HTML、CSS 和 JS 的静态网站（用于学习目的）。我成功实现了两个主题。为了改变它，我在button 元素中添加了一个SVG 图标。然后 svg 会根据主题（月亮或太阳）发生变化。
问题
虽然一切都在 chromium 浏览器中运行良好，但 SVG 在使用 Firefox 时根本不显示，但按钮按预期工作。我怀疑这来自我使用 CSS 变量更改 hover 上 SVG 的 path 的方式。然而，在我的案例中，使用变量是相当的目标。
输出
这是我在基于 chromium 的浏览器中得到的（预期的）结果：
这是我在 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>【问题讨论】：
-
我认为您需要将 CSS 变量转换为基于 SMIL 的方法。这将适用于 Chrome 和 Firefox。
-
@RobertLongson 你能详细说明一下吗？
标签： css svg firefox css-variables