SVG 在 Firefox (41.0.2) 中不可见答案

【问题标题】：SVG not visible in firefox (41.0.2)SVG 在 Firefox (41.0.2) 中不可见
【发布时间】：2015-10-23 09:27:49
【问题描述】：

大家好，

此特定 svg（背景光线）未在 firefox (41.0.2) 中显示然而，作为 svg 的标志也能正确显示。一世无法弄清楚问题所在。光线在铬中可见，并且歌剧
徽标缩放动画在 chrome 中非常流畅，但在火狐

演示 - http://codepen.io/shubhra/full/gavvoM/

演示射线 SVG - http://codepen.io/shubhra/full/jbzPea/

射线 SVG

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 498.915 500" enable-background="new 0 0 498.915 500" xml:space="preserve">
<g id="layer1">
    <g id="g3841">

            <radialGradient id="path3768_1_" cx="101464.1797" cy="124353.9453" r="125443.8828" gradientTransform="matrix(0.0101 0 0 0.0101 -745.5999 -1013.1006)" gradientUnits="userSpaceOnUse">
            <stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0.1059"/>
            <stop  offset="0.241" style="stop-color:#FFFFFF;stop-opacity:0.6863"/>
            <stop  offset="0.352" style="stop-color:#FFFFFF;stop-opacity:0.1765"/>
            <stop  offset="0.4618" style="stop-color:#FFFFFF;stop-opacity:0.498"/>
            <stop  offset="0.5702" style="stop-color:#FFFFFF;stop-opacity:0.1647"/>
            <stop  offset="0.6911" style="stop-color:#FFFFFF;stop-opacity:0.2471"/>
            <stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0"/>
        </radialGradient>
        <path id="path3768" fill="url(#path3768_1_)" d="M-997.83,125.275l2494.575,249.45v-249.45L-997.83,374.725V125.275z"/>

            <radialGradient id="path3768-6_1_" cx="101464.8672" cy="124243.2031" r="125540.4063" gradientTransform="matrix(0.0101 0 0 0.0101 -745.5999 -1013.1006)" gradientUnits="userSpaceOnUse">
            <stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0.1059"/>
            <stop  offset="0.241" style="stop-color:#FFFFFF;stop-opacity:0.6863"/>
            <stop  offset="0.352" style="stop-color:#FFFFFF;stop-opacity:0.1765"/>
            <stop  offset="0.4618" style="stop-color:#FFFFFF;stop-opacity:0.498"/>
            <stop  offset="0.5702" style="stop-color:#FFFFFF;stop-opacity:0.1647"/>
            <stop  offset="0.6911" style="stop-color:#FFFFFF;stop-opacity:0.2471"/>
            <stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0"/>
        </radialGradient>
        <path id="path3768-6" fill="url(#path3768-6_1_)" d="M-786.18,956.2l2071.3-1412.4l-160.35-191.1l-1750.6,1794.575L-786.18,956.2z
            "/>

            <radialGradient id="path3768-1_1_" cx="101466.7188" cy="124036.9531" r="125413.8672" gradientTransform="matrix(0.0101 0 0 0.0101 -745.5999 -1013.1006)" gradientUnits="userSpaceOnUse">
            <stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0.1059"/>
            <stop  offset="0.241" style="stop-color:#FFFFFF;stop-opacity:0.6863"/>
            <stop  offset="0.352" style="stop-color:#FFFFFF;stop-opacity:0.1765"/>
            <stop  offset="0.4618" style="stop-color:#FFFFFF;stop-opacity:0.498"/>
            <stop  offset="0.5702" style="stop-color:#FFFFFF;stop-opacity:0.1647"/>
            <stop  offset="0.6911" style="stop-color:#FFFFFF;stop-opacity:0.2471"/>
            <stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0"/>
        </radialGradient>
        <path id="path3768-1" fill="url(#path3768-1_1_)" d="M-482.18,1267.825L981.145-767.8l-216.05-124.725L-266.155,1392.55
            L-482.18,1267.825z"/>

            <radialGradient id="path3768-16_1_" cx="101466.7188" cy="124036.9531" r="125416.25" gradientTransform="matrix(0.0101 0 0 0.0101 -745.5999 -1013.1006)" gradientUnits="userSpaceOnUse">
            <stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0.1059"/>
            <stop  offset="0.241" style="stop-color:#FFFFFF;stop-opacity:0.6863"/>
            <stop  offset="0.352" style="stop-color:#FFFFFF;stop-opacity:0.1765"/>
            <stop  offset="0.4618" style="stop-color:#FFFFFF;stop-opacity:0.498"/>
            <stop  offset="0.5702" style="stop-color:#FFFFFF;stop-opacity:0.1647"/>
            <stop  offset="0.6911" style="stop-color:#FFFFFF;stop-opacity:0.2471"/>
            <stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0"/>
        </radialGradient>
        <path id="path3768-16" fill="url(#path3768-16_1_)" d="M-89.93,1456.675L588.92-956.7L343.245-1000l-187.5,2500L-89.93,1456.675z"
            />

            <radialGradient id="path3768-9_1_" cx="101466.7188" cy="124036.9531" r="125416.4766" gradientTransform="matrix(0.0101 0 0 0.0101 -745.5999 -1013.1006)" gradientUnits="userSpaceOnUse">
            <stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0.1059"/>
            <stop  offset="0.241" style="stop-color:#FFFFFF;stop-opacity:0.6863"/>
            <stop  offset="0.352" style="stop-color:#FFFFFF;stop-opacity:0.1765"/>
            <stop  offset="0.4618" style="stop-color:#FFFFFF;stop-opacity:0.498"/>
            <stop  offset="0.5702" style="stop-color:#FFFFFF;stop-opacity:0.1647"/>
            <stop  offset="0.6911" style="stop-color:#FFFFFF;stop-opacity:0.2471"/>
            <stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0"/>
        </radialGradient>
        <path id="path3768-9" fill="url(#path3768-9_1_)" d="M343.245,1500l-187.5-2500L-89.93-956.675L588.92,1456.7L343.245,1500z"/>

            <radialGradient id="path3768-2_1_" cx="101466.0391" cy="124036.9531" r="125414.2109" gradientTransform="matrix(0.0101 0 0 0.0101 -745.5999 -1013.1006)" gradientUnits="userSpaceOnUse">
            <stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0.1059"/>
            <stop  offset="0.241" style="stop-color:#FFFFFF;stop-opacity:0.6863"/>
            <stop  offset="0.352" style="stop-color:#FFFFFF;stop-opacity:0.1765"/>
            <stop  offset="0.4618" style="stop-color:#FFFFFF;stop-opacity:0.498"/>
            <stop  offset="0.5702" style="stop-color:#FFFFFF;stop-opacity:0.1647"/>
            <stop  offset="0.6911" style="stop-color:#FFFFFF;stop-opacity:0.2471"/>
            <stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0"/>
        </radialGradient>
        <path id="path3768-2" fill="url(#path3768-2_1_)" d="M765.12,1392.55L-266.13-892.55l-216.05,124.725L981.145,1267.8
            L765.12,1392.55z"/>

            <radialGradient id="path3768-8_1_" cx="101464.8672" cy="124242.6172" r="125540.3672" gradientTransform="matrix(0.0101 0 0 0.0101 -745.5999 -1013.1006)" gradientUnits="userSpaceOnUse">
            <stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0.1059"/>
            <stop  offset="0.241" style="stop-color:#FFFFFF;stop-opacity:0.6863"/>
            <stop  offset="0.352" style="stop-color:#FFFFFF;stop-opacity:0.1765"/>
            <stop  offset="0.4618" style="stop-color:#FFFFFF;stop-opacity:0.498"/>
            <stop  offset="0.5702" style="stop-color:#FFFFFF;stop-opacity:0.1647"/>
            <stop  offset="0.6911" style="stop-color:#FFFFFF;stop-opacity:0.2471"/>
            <stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0"/>
        </radialGradient>
        <path id="path3768-8" fill="url(#path3768-8_1_)" d="M1124.795,1147.3L-625.83-647.3l-160.35,191.1l2071.3,1412.4L1124.795,1147.3
            z"/>

            <radialGradient id="path3768-67_1_" cx="101463.5938" cy="124401.7031" r="125442.0547" gradientTransform="matrix(0.0101 0 0 0.0101 -745.5999 -1013.1006)" gradientUnits="userSpaceOnUse">
            <stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0.1059"/>
            <stop  offset="0.241" style="stop-color:#FFFFFF;stop-opacity:0.6863"/>
            <stop  offset="0.352" style="stop-color:#FFFFFF;stop-opacity:0.1765"/>
            <stop  offset="0.4618" style="stop-color:#FFFFFF;stop-opacity:0.498"/>
            <stop  offset="0.5702" style="stop-color:#FFFFFF;stop-opacity:0.1647"/>
            <stop  offset="0.6911" style="stop-color:#FFFFFF;stop-opacity:0.2471"/>
            <stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0"/>
        </radialGradient>
        <path id="path3768-67" fill="url(#path3768-67_1_)" d="M-965.255,559.4l2429.45-618.775l-85.325-234.4l-2258.8,1087.6
            L-965.255,559.4z"/>

            <radialGradient id="path3768-24_1_" cx="101464.8672" cy="124401.1172" r="125440.6953" gradientTransform="matrix(0.0101 0 0 0.0101 -745.5999 -1013.1006)" gradientUnits="userSpaceOnUse">
            <stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0.1059"/>
            <stop  offset="0.241" style="stop-color:#FFFFFF;stop-opacity:0.6863"/>
            <stop  offset="0.352" style="stop-color:#FFFFFF;stop-opacity:0.1765"/>
            <stop  offset="0.4618" style="stop-color:#FFFFFF;stop-opacity:0.498"/>
            <stop  offset="0.5702" style="stop-color:#FFFFFF;stop-opacity:0.1647"/>
            <stop  offset="0.6911" style="stop-color:#FFFFFF;stop-opacity:0.2471"/>
            <stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0"/>
        </radialGradient>
        <path id="path3768-24" fill="url(#path3768-24_1_)" d="M1378.895,793.8L-879.93-293.8l-85.325,234.4l2429.45,618.775
            L1378.895,793.8z"/>
    </g>
</g>
</svg>

感谢您的帮助。

【问题讨论】：

请你创建一个最小的测试用例。
嗨@RobertLongson，我在我的代码上方提供了一个演示链接。是否还需要其他东西？
将其缩减为几行来说明问题，即。 minimal reproducible example。一种渐变，一种形状等。
codepen 对我来说显示在 FF 41.0.2 中。动画有点破。我希望这是由于您使用带有百分比的transform-origin - AFAIK 在 FF 中仍然无法用于 SVG 元素。但我认为这在当前的夜间电影中是固定的。罗伯特会知道更多。
我用一个最小的演示 (DEMO RAYS SVG) 更新了我的问题。它只有 sunburst svg 代码和几行 css。我仍然无法在 Firefox 中看到旭日形 svg。我只看到蓝色背景

标签： firefox svg

【解决方案1】：

你的 CSS 中有这个。

background-image: -webkit-radial-gradient(top, circle cover, #022C4B 0%, #00252b 80%);
background-image: radial-gradient(top, circle cover,  #022C4B 0%, #00252b 80%);

规范的早期草案允许将封面作为关键字，但 w3c 关键字现在是最远的角落（尽管这是默认设置并且可以省略）所以我认为您想要的是这样的......

background-image: radial-gradient(circle at top, #022C4B 0%, #00252b 80%);

如果您查看 Firefox 浏览器控制台，您会看到警告说它无法解释径向渐变。

更多语法细节请见here。

【讨论】：

不幸的是，这没有帮助。这是我在 chrome 中看到的 - imgur.com/GyL60xO 这是我在 Firefox 中看到的 - imgur.com/YJlHVY9
我的 Firefox (41.0.2) 显示与您的 Chrome 屏幕截图相同。
这很奇怪。可能是什么问题？