iOS/Safari中渲染本地SVG出现闪烁的原因及解决方法

原因 #

Safari的WebKit渲染引擎在处理条件渲染的内嵌SVG时存在行为差异：当通过React条件渲染切换两个独立SVG组件时，WebKit会先卸载旧SVG元素，再重新解析并渲染新SVG元素，这个过程中会触发短暂的重排/重绘，导致出现瞬间空白的闪烁现象。而Chrome、Firefox等浏览器会对这类DOM操作做优化，比如预渲染未激活的SVG元素或更高效地复用DOM资源，因此不会出现明显闪烁。

解决方法 #

1. 预渲染两个SVG并通过CSS切换显示状态 #

避免条件渲染带来的DOM卸载/挂载，同时渲染两个SVG，用CSS类控制显示与隐藏：

// 组件代码
<div className={`icon-wrapper ${isActive ? 'active' : ''}`}>
  <DefaultIcon className="icon default" />
  <ActiveIcon className="icon active" />
</div>

/* CSS样式 */
.icon-wrapper .default { display: block; }
.icon-wrapper .active { display: none; }
.icon-wrapper.active .default { display: none; }
.icon-wrapper.active .active { display: block; }

这种方式让两个SVG始终存在于DOM中，切换时仅修改CSS属性，无DOM操作延迟。

2. 复用单个SVG，动态修改属性 #

如果默认与激活图标仅存在样式（如颜色、填充）差异，无需切换组件，直接修改SVG内部元素的属性：

<svg className="icon" viewBox="0 0 24 24">
  <path 
    fill={isActive ? '#2563eb' : '#9ca3af'} 
    d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"
  />
</svg>

仅更新属性而非替换整个SVG元素，完全避免DOM卸载/挂载操作。

3. 使用SVG Sprite复用图标资源 #

将所有SVG图标定义为Sprite，通过<use>标签引用不同图标，切换时仅修改href属性：

// 先在页面中嵌入Sprite（可放在根组件或HTML模板中）
<svg style={{display: 'none'}}>
  <symbol id="default-icon" viewBox="0 0 24 24">
    {/* 默认图标路径 */}
  </symbol>
  <symbol id="active-icon" viewBox="0 0 24 24">
    {/* 激活图标路径 */}
  </symbol>
</svg>

// 切换组件
<svg className="icon">
  <use href={`#${isActive ? 'active-icon' : 'default-icon'}`} />
</svg>

Sprite中的图标仅加载一次，切换时无需重新解析SVG内容，消除延迟。

4. 用React.memo优化SVG组件（辅助方案） #

如果SVG组件因父组件重渲染而频繁重复渲染，可使用React.memo包裹SVG组件，减少不必要的重绘：

const DefaultIcon = React.memo(() => (
  <svg viewBox="0 0 24 24">...</svg>
));
const ActiveIcon = React.memo(() => (
  <svg viewBox="0 0 24 24">...</svg>
));

此方法需配合前几种方案使用，单独使用无法解决DOM切换带来的闪烁。

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