我有一个简单的内联SVG元素，其中包含一个填充图像模式的矩形。在IE11和Chrome中，每次都会正确显示矩形。但是，在Firefox中，图像在第一次尝试时不可见，但在第二次加载页面时变为可见。根据我的测试，Firefox仅在缓存时显示图像。我在Windows上看到了Firefox 51和52中的问题;我还没有测试过其他版本或其他操作系统。
要在Firefox中重现此问题，您应该在运行代码段之前清除缓存并重新启动浏览器：
选项|高级|网络|缓存的Web内容|立即清除
<div style="left: 0px; top: 0px; width: 240px; height: 180px;">
<svg height="100%" width="100%" x="0%" y="0%" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<pattern id="pattern1" patternUnits="objectBoundingBox" preserveAspectRatio="xMidYMid slice" width="1" height="1" x="0" y="0" viewBox="0 0 4000 3000">
<image xlink:href="http://www.public-domain-photos.com/free-stock-photos-3/landscapes/lakes/archipelago-4.jpg" width="4000" height="3000" x="0" y="0" preserveAspectRatio="xMidYMid slice"></image>
</pattern>
</defs>
<rect fill="url('#pattern1')" stroke="black" stroke-width="2" x="0%" y="0%" width="100%" height="100%" fill-opacity="1.0" />
</svg>
</div>
在我当前的代码中，SVG元素被动态添加到页面中，我通过在设置图像模式之前预加载图像来解决问题。它有效，但我想知道是否有更好的解决方案来解决这个问题。可以将许多SVG元素添加到页面中，每个元素都可以具有填充图像模式的形状。