Question

向所有人致意，

这个特殊的svg（背景光线）没有在firefox中显示（41.0.2）但是，徽标，也是一个svg也正确显示。一世无法弄清楚问题。光线在铬和铬中可见戏
徽标缩放动画在chrome中非常流畅但是很不稳定火狐

DEMO - http://codepen.io/shubhra/full/gavvoM/

DEMO RAYS SVG - http://codepen.io/shubhra/full/jbzPea/

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

感谢您的帮助。

Answer 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。

在Firefox中看不到SVG（41.0.2）

1 个答案: