为什么我不能在 Firefox 中使用一些 svg？答案

【问题标题】：Why i cannot use some svg in firefox?为什么我不能在 Firefox 中使用一些 svg？
【发布时间】：2018-01-05 18:12:20
【问题描述】：

问题是我根本不能使用一些内联 SVG。我注意到 FF 中的 <object > 和 SVG 问题。但事实是许多其他的都在工作。

我遇到了来自设计师的 2 个不工作的图标。甚至没有fill 财产。它只是看不见的。没有什么帮助。

我无法提供更多有用的信息。所有图标都按原样工作。除了这个 2. 在 chrome 中没有问题。

更新： https://jsfiddle.net/u0t4tupu/4/ 这里举个例子。这两个 svg 使用不同的clip-path。但由于某种原因，第一个使第二个不可见。在 FF 中试试这个例子。删除第一个图标或将它们设置为相同clip-path - url(#svgicon-h)。然后它工作。但为什么呢？

【问题讨论】：

将fill 应用于<svg> 不会做任何事情。它应该在<path>。
@NiettheDarkAbsol 我也试过了。正如我所说，它可以在其他浏览器中运行。
它在其他浏览器中工作的事实并不能使它有效，Fortael。您不应该期望无效属性在浏览器中工作，并指望它们继续在它们当前工作的那些中工作也是错误的，因为当浏览器停止在网站上工作时，您不会收到来自浏览器制造商的电子邮件你编码。电子邮件将来自客户，他们不会很高兴。
“对 fill 这样的样式属性可以从祖先那里继承。
请发帖minimal reproducible example。我们无法帮助您调试缺少一半的代码图片。

标签： css firefox svg

【解决方案1】：

你有两个元素

id="svgicon-a"

每个 SVG 一个。

id 属性在文档中必须是唯一的。如果页面上有多个，则结果取决于浏览器。这就是为什么您在 Chrome 上得到的结果与在 Firefox 中不同的原因。

解决方法是更改其中一个 SVG 中的 id。

https://jsfiddle.net/u0t4tupu/5/

【讨论】：

请原谅我的疏忽。并感谢您的帮助。这个html是由js组件自动生成的。所以我什至没想到会出现这种问题。