随机（DIS）出现SVG要点

Question

当添加了一些不错的SVG图像作为要点为我的网站，我碰到一些真正奇怪的行为，并似乎是在Firefox中的错误。我已经将其调试以下MWE：

Source code

我有以下的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>

我也有以下的SVG文件名为listImage.svg：

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

The problem

当我在Firefox中打开HTML文件时，列表显示，因为它应该与SVG很好地表现为列表的子弹点：

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

虽然刷新页面，图像看似随意的不断出现和再次消失。做一个硬刷新，而不是（用Ctrl + F5）或删除缓存和离线的网站数据不会改变这一点。

Specific browsers

这个问题只在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

（如果有人能提供有关谷歌浏览器的信息，请编辑并把它添加到这个问题。我使用了一些在线工具和这表明，SVG谷歌浏览器显示正常的结果，但我不认为这个测试是确凿的证据为了它）

这究竟是为什么？

Related questions

我发现this question可能是相关的，但是这个问题是不同的，因为我只是有在Firefox这个问题和答案（S）对这个问题还没有解决我的问题。

Answer 1

我不能回答在FF Dev Ed 66.0b2的行为，而是有一个变通，以获得假装结果来看在FF和铬不错（不与边缘或Safari测试）：

使用SVG背景图像的L1标签，而不是UL列表样式图像。设置这样的背景下的位置和填充添加到李

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和铬，检查此fiddle。因此，一个备选答案是：

保持你的代码，只是转换成SVG GIF

更新：您的SVG图像既没有宽度，也没有定义的高度，这样做解决了问题：

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

随机（DIS）出现SVG要点

问题描述投票：2回答：1

Source code

The problem

Specific browsers

这究竟是为什么？

1个回答

最新问题

随机（DIS）出现SVG要点

问题描述 投票：2回答：1

Source code

The problem

Specific browsers

这究竟是为什么？

1个回答

最新问题

问题描述投票：2回答：1