React项目中SVG雪碧图在iOS及Safari浏览器无法显示问题求助

核心原因 #

Safari 对外部引用的 SVG 雪碧图存在兼容性缺陷，不支持直接通过use标签加载外部SVG文件的symbol节点，Chrome、Firefox对该特性支持度更高，所以会出现跨浏览器表现不一致的问题。

可行解决方法 #

• 方案1：将SVG雪碧图内容内联到HTML入口文件的<body>最开头
  把你的雪碧图所有内容直接放到项目HTML入口文件（create-react-app项目为public/index.html）的body标签最顶部，给外层svg加style="display: none;"隐藏，不需要引入外部雪碧图文件，调用的时候symbolId直接写#icon-home即可，不需要拼接雪碧图路径。这是兼容性最好的方案，所有浏览器都支持。
  修改后的调用示例：

<Svg className="image" symbolId="#icon-home" />

• 方案2：添加兼容库支持外部引用
  如果一定要用外部雪碧图的方式，引入svg4everybody兼容库，在项目入口文件初始化即可：
  安装命令：
  npm install svg4everybody
  在index.js入口添加代码：

import svg4everybody from 'svg4everybody';
svg4everybody();

这个库会自动处理Safari下外部SVG雪碧图的引用解析问题。

• 方案3：补充Svg组件适配属性
  除了你已经添加的属性外，给svg标签显式添加width、height属性，以及和对应symbol一致的viewBox属性，同时保留两套引用属性适配不同版本Safari，也可以解决部分场景的渲染问题：
  修改后的Svg组件示例：

const Svg = ({ symbolId, className, width = '1em', height = '1em', viewBox = '0 0 21 21' }) => {
  return (
    <svg 
      xmlns="http://www.w3.org/2000/svg" 
      xmlnsXlink="http://www.w3.org/1999/xlink" 
      className={className}
      width={width}
      height={height}
      viewBox={viewBox}
      aria-hidden="true"
    >
      <use href={symbolId} xlinkHref={symbolId}></use>
    </svg>
  );
};

额外注意点 #

• 不要给symbol内的path节点写死fill、stroke颜色，如果需要动态改色，把fill设为currentColor，通过父级svg的color属性控制颜色，避免Safari下样式不生效。
• 检查雪碧图外层svg是否有多余的宽高、fill属性，尽量保持外层svg只有display: none的隐藏样式，所有展示属性都放到调用的svg标签上。

内容的提问来源于stack exchange，提问作者gkonuralp