SVG 未在 Mozilla、IOS 上显示

如何解决SVG 未在 Mozilla、IOS 上显示

此 SVG 在 Chrome 上正确显示，但在 Mozilla 和 iOS 上消失。你能告诉我一些关于它有什么问题的见解吗？

    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="450" height="616" viewBox="0 0 450 616" fill="none">

    <g filter="url(#filter1_b)" style="&#10;">
        <rect x="63.352" y="24.3788" width="376.5" height="544.5" rx="59.25" transform="rotate(5 63.352 24.3788)" stroke="url(#paint1_radial)" stroke-width="3.5" style="&#10;    /* display: none; */&#10;"/>
        <rect x="63.352" y="24.3788" width="376.5" height="544.5" rx="59.25" transform="rotate(5 63.352 24.3788)" stroke="url(#paint2_radial)" stroke-width="3.5"/>
        <rect x="63.352" y="24.3788" width="376.5" height="544.5" rx="59.25" transform="rotate(5 63.352 24.3788)" stroke="url(#paint3_radial)" stroke-width="3.5"/>
    </g> 
    <defs>
        <filter id="filter0_b" x="-22.9194" y="-14.4363" width="500.154" height="652.872" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
            <feGaussianBlur in="BackgroundImage" stdDeviation="21"/>
            <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur"/>
            <feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur" result="shape"/>
        </filter>
        <filter id="filter1_b" x="-22.9194" y="-14.4363" width="500.154" height="652.872" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
            <feGaussianBlur in="BackgroundImage" stdDeviation="21"/>
            <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur"/>
            <feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur" result="shape"/>
        </filter>
        <pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1.31579" height="1.31387">
            <use xlink:href="#image0" transform="scale(0.00263158 0.00182482)"/>
        </pattern>
        <linearGradient id="paint0_linear" x1="73.1612" y1="38.0857" x2="463.816" y2="606.864" gradientUnits="userSpaceOnUse">
            <stop stop-color="white" stop-opacity="0.4"/>
            <stop offset="1" stop-color="white" stop-opacity="0"/>
        </linearGradient>
        <radialGradient id="paint1_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(114.681 86.3485) rotate(55.7067) scale(886.206 408.172)">
            <stop stop-color="white"/>
            <stop offset="1" stop-color="white" stop-opacity="0"/>
        </radialGradient>
        <radialGradient id="paint2_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(251.761 296.483) rotate(58.5326) scale(410.938 284.945)">
            <stop stop-color="#48E6D8"/>
            <stop offset="1" stop-color="#48E6D8" stop-opacity="0"/>
        </radialGradient>
        <radialGradient id="paint3_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(414.269 42.5193) rotate(124.907) scale(676.798 469.762)">
            <stop stop-color="#002421"/>
            <stop offset="0.635417" stop-color="#002421" stop-opacity="0.364583"/>
            <stop offset="1" stop-color="#002421" stop-opacity="0"/>
        </radialGradient>
    </defs>
</svg>

此处示例：https://codepen.io/burianovata_i/pen/WNoeaLd

解决方法

正如@RobertLongson 所评论的，Firefox 不支持 BackgroundImage 伪输入。所以我删除了那些行并且它起作用了！