移动电话上的SVG背景渐变不像我的桌面那样显示

Question

根据需要更新SVG代码！

我在网站上使用以下CSS代码：

#page-body {
background: url("/images/background/map_gradient.svg") repeat fixed 50% 0 / 100% 1500px, url("/images/background/map_img.jpg") no-repeat scroll 50% 0 / 2060px 1010px rgba(0, 0, 0, 0);
}

SVG：

<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.2" baseProfile="tiny" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100px" height="100px"     viewBox="0 0 100 100" preserveAspectRatio="none" xml:space="preserve">
<radialGradient id="SVGID_1_" cx="50" cy="0" r="50" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color:#000000;stop-opacity:0"/>
<stop offset="0.5" style="stop-color:#000000;stop-opacity:0"/>
<stop offset="1" style="stop-color:#000000;stop-opacity:0.3"/>
</radialGradient>
<rect y="-50" fill="url(#SVGID_1_)" width="100" height="100"/>
<rect y="50" width="100" height="50" fill-opacity="0.3"/>
</svg>

桌面屏幕截图：

手机屏幕截图：

我知道这不是一个响应式CSS代码问题，因为当我将窗口从pc显示器拖动到旧的hdmi电视显示器时，我可以得到相同的结果。你能告诉我一个解决方法吗？