Safari中React引入的SVG图标触发操作后渲染异常如何解决

问题现象 #

• 项目使用SVG图标实现组件的展开、折叠功能，图标初始渲染正常
• 展开组件并执行相关操作后，SVG图标会出现渲染异常
• 后续展开其他组件时，此前渲染异常的SVG图标会自动恢复正常显示
• 该问题在所有使用SVG图标的位置均可复现

已核实信息 #

• SVG组件本身代码未发生任何改动
• 项目基于React技术栈开发，SVG图标以组件形式加载
• 问题仅在Safari浏览器中出现，其他浏览器无此异常

相关代码 #

折叠图标SVG组件代码 #

export const CollapseIcon = () => (<svg
  xmlns="http://www.w3.org/2000/svg"
  xmlnsXlink="http://www.w3.org/1999/xlink"
  width="24"
  height="24"
  viewBox="0 0 24 24"
>
  <defs>
    <path
      id="gt4gdtq39a"
      d="M7.146 9.146c.174-.173.443-.192.638-.057l.07.057L12 13.293l4.146-4.147c.174-.173.443-.192.638-.057l.07.057c.173.174.192.443.057.638l-.057.07-4.5 4.5c-.174.173-.443.192-.638.057l-.07-.057-4.5-4.5c-.195-.196-.195-.512 0-.708z"
    />
  </defs>
  <g fill="none" fillRule="evenodd">
    <g>
      <g transform="translate(-956 -290) translate(956 290)">
        <mask id="reyuf8n5tb" fill="#fff">
          <use xlinkHref="#gt4gdtq39a" />
        </mask>
        <use fill="#000" fillRule="nonzero" xlinkHref="#gt4gdtq39a" />
        <g fill="#F7274A" mask="url(#reyuf8n5tb)">
          <path d="M0 0H24V24H0z" />
        </g>
      </g>
    </g>
  </g>
</svg>
);

SVG组件使用逻辑 #

{expanded ? <CollapseIcon /> : <ExpandIcon />}

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