求助：ios系统不显示svg的linearGradient

react项目webpack打包

svg源文件

<svg
  viewBox="0 0 10 10"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <linearGradient id="myGradient" gradientTransform="rotate(90)">
      <stop offset="5%" stop-color="gold" />
      <stop offset="95%" stop-color="red" />
    </linearGradient>
  </defs>

  <!-- using my linear gradient -->
  <circle cx="5" cy="5" r="4" fill="url('#myGradient')" />
</svg>

使用webpack-svgstore-plugin将svg文件生成了精灵图

处理代码

import path from 'path';
import fs from 'fs';
import SvgStorePlugin from 'webpack-svgstore-plugin';
import sha256 from 'crypto-js/sha256';
const svgSpritesHelper = ({
  inputPaths, baseOutputPath, srpiteOutputPath, assetsJsonPath,
}) => {
  const spriteBuilders = [];
  const svgManifest = {};

  inputPaths.map((input) => {
    // Group SVGs by folders
    getSprites(input).map((folder) => {
    	.........
    	.........

      // Store the SVGs into one chunk
      spriteBuilders.push(new SvgStorePlugin(path.join(input, `${folder}/*.svg`), srpiteOutputPath, {
        name: `${folder}-${hash}.svg`,
        chunk: 'svgs',
        prefix: '',
      }));
      return true;
    });

    return true;
  });

  // Save manifest
  saveHash(svgManifest, assetsJsonPath);

  // Hand over to the Webpack
  return spriteBuilders;
};

export default svgSpritesHelper;

生成的精灵图，这里面有linearGradient

...</style><mask id="icon-fancy-loading-a"> <rect x="5%" y="5%" width="90%" height="90%" fill="#fff"></rect><text dy=".01em" x="50%" y="50%" text-anchor="middle" dominant-baseline="central" font-weight="900" font-size="20" font-family="arial"><![CDATA[Loading]]></text></mask><linearGradient x1="0%" y1="0%" y2="0%" id="icon-vip-medium"> <stop stop-color="#FFE899" offset="0%"></stop><stop stop-color="#FFC600" offset="100%"></stop></linearGradient><linearGradient x1="0%" y1="0%" y2="0%" id="icon-vip-round-a"> <stop stop-color="#FFE899" offset="0%"></stop><stop stop-color="#FFC600" offset="100%"></stop></linearGradient><linearGradient x1="0%" y1="0%" y2="0%" id="icon-vip-small-a"> <stop stop-color="#FFE899" offset="0%"></stop><stop stop-color="#FFC600" offset="100%"></stop></linearGradient><style id="icon-loading-icon-id"> </style><style id="icon-send-out-icon-id"> </style><style id="icon-transit-icon-id"> </style><style id="icon-triangle-arrow-icon-id"> </style>...

生成的精灵图在苹果系统不显示渐变，或者渐变颜色为黑色，但在Windows和安卓系统下正常显示

如果直接在js中使用svg源文件可以正常显示

我猜测是webpack-svgstore-plugin造成的问题？
有大佬告诉我下解决思路吗？