随机（不）出现的 SVG 项目符号答案

【问题标题】：Randomly (dis)appearing SVG bullet points随机（不）出现的 SVG 项目符号
【发布时间】：2019-06-28 18:05:36
【问题描述】：

在尝试为我的网站添加一些漂亮的 SVG 图像作为项目符号时，我遇到了一些真正奇怪的行为，并且似乎是 Firefox 中的一个错误。我已将其调试到以下 MWE：

源代码

我有以下 HTML 文档：

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
        ul {
            list-style-image: url('listImage.svg');
        }
        </style>
    </head>
    <body>
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
        </ul>
    </body>
</html>

我还有一个名为 listImage.svg 的 SVG 文件：

<svg  xmlns="http://www.w3.org/2000/svg">
    <g>
        <circle cx="0" cy="0" r="4" />
    </g>
</svg>

问题

当我在 Firefox 中打开 HTML 文档时，列表按原样显示，SVG 很好地显示为列表的项目符号：

但是当我刷新页面或重新加载页面时，它们有时会消失：

在刷新页面时，看似随机的图像不断出现又消失。执行硬刷新（使用 Ctrl + F5）或删除缓存和离线网站数据不会改变这一点。

特定浏览器

这个问题只发生在 Firefox 中

Firefox Quantum 65.0 (64-bits)
Firefox Developer Edition 66.0b4 (64-bits)

在其他浏览器中我没有任何问题，图像总是出现。

Internet Explorer 11
    Version: 11.523.17134.0
    Updateversions: 11.0.105 (KB4480965)
Edge
    42.17134.1.0
    Microsoft EdgeHTML 17.17134

（如果有人可以提供有关 Google Chrome 的信息，请对其进行编辑并将其添加到问题中。我使用了一些在线工具，结果表明 SVG 在 Google Chrome 中看起来不错，但我不认为这个测试是确凿的证据）

为什么会这样？

相关问题

我发现this question 可能是相关的，但是这个问题是不同的，因为我只在 Firefox 中遇到这个问题，并且该问题的答案并没有解决我的问题。

【问题讨论】：

jsfiddle.net/L41a3fdc 在 chrome 中工作（版本 71.0.3578.98（官方版本）（64 位）），FF Dev Ed 66.0b2 但实际上在 FF QUANTUM 64.0.2（64 位）中，如果你点击 RUN，子弹消失....
gif 表现如预期：jsfiddle.net/k27L6yr5
我深入挖掘并发现：您的 svg-image 既没有定义宽度也没有定义高度，这样做可以解决问题，请参阅更新的答案

标签： html css image firefox svg

【解决方案1】：

我无法回答 FF Dev Ed 66.0b2 中的行为，但有一种变通方法可以让假装的结果在 FF 和 Chrome 中看起来不错（未经 Edge 或 Safari 测试）：

在你的 li 标签中使用 svg 背景图片，而不是 ul list-style-image。设置此背景的位置并为 li 添加填充

ul {
  list-style-type: none;
  margin-left: -20px;
}

li {
  background-image: url('https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/410.svg');
  background-repeat: no-repeat;
  background-position: 0px 6px;
  padding-left: 20px;
  background-size: 5px;
}

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

这是对应的fiddle

编辑： 正如我在评论中所写，*.gif 文件在 FF 和 Chrome 中的行为与预期一样，请检查此fiddle。因此，另一个答案是：

保留您的代码，只需将 svg 转换为 gif 即可

更新：您的 svg-image 既没有定义宽度也没有定义高度，这样做可以解决问题：

<svg width="15" height="15" xmlns="http://www.w3.org/2000/svg">
    <g>
        <circle cx="0" cy="0" r="4" />
    </g>
</svg>

检查：https://jsfiddle.net/zf1hjrav/

【讨论】：

啊。很高兴知道这是因为缺少高度和宽度属性。发生这种情况的原因是因为我从 Adobe Illustrator 生成的一些 SVG 开始，并不断删除 unncecassry 代码，直到我得到没有错误的准系统。我用它自己从代码中制作了 SVG。