css - 为什么我不能在 firefox 中使用一些 svg?

标签 css firefox svg

问题是我根本无法使用一些内联 SVG。我注意到 <object >和 FF 中的 SVG 问题。但事实是还有许多其他方法正在发挥作用。

我遇到了设计师设计的 2 个图标,但它们不起作用。甚至没有fill属性(property)。它只是看不见的。没有任何帮助。

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

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

enter image description here

最佳答案

你有两个元素

id="svgicon-a"

每个 SVG 中一个。

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

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

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

关于css - 为什么我不能在 firefox 中使用一些 svg?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45394418/

相关文章:

javascript - 你如何解释 d3 event.x 和 event.y 坐标?

html - 如何在每个浏览器/全屏中保持网页大小相同?

css - 为什么在应用过渡后,图标/链接上的 css 过渡会导致它在错误的位置重绘?

javascript - 更改每张幻灯片的容器背景

jquery - 如何一步步改变颜色

javascript - ReactJS 中的 SVG 图标

javascript - Google map 折线上的符号始终旋转

javascript - firefox 为什么以及如何显示其用户处于私有(private)模式?

javascript - 我想关闭通过后端C#进程打开的firefox浏览器

jquery - Firebug 在不再存在的断点处停止