def id 重复引发的 svg 复用的一些思考

svg def 的作用域是整个 document ,导致把 svg 直接导入作为xml使用时,会发生 两个 svg 实例互相影响的情况:

document 中靠上的 svg 实例本身 display none(或祖先元素)导致的隐藏,会把 def 中预定义的渐变色(或其他东西)也给隐藏掉,导致第二个 svg 实例显示异常

方案1

使用 image + url ,仅有颜色变更的 svg 状态切换需要出两个 png

  • 坑:切成png,不要切svg,在 ios safari 上遇到了初始化渲染 svg 图片空白的问题,很迷,怎么都没法救

方案2

仍然使用 svg for ReactComponent,但是转化为组件导出,每个实例使用不同的 id

ts 复制代码
export default function AIIcon() {
  const uidClip = useRef(uniqueId('_icon_id'));
  const uidFill = useRef(uniqueId('_icon_id'));
  const uidFilter = useRef(uniqueId('_icon_id'));

  return (
    <svg
      fill="none"
      version="1.1"
      viewBox="0 0 16 16"
    >

方案3

是否可以将所有的 svg def 统一管理?设计工具导出的 svg def 如果 id 一致,理论上来说内容也会是一致的

如何统一管理?

loader?

如何管理导入?

创建一个单纯的 <svg><def>...</def></svg>来管理预定义内容?

统一导入如何解决冗余问题?

是否可以分开导入?

构建为 tsx ?做一个插件转换设计工具自动导出的svg代码?或者写loader?

ts 复制代码
<>
  {/* def */}
  <svg><def>...</def></svg>
  {/* 实际内容 */}
  <svg><g>...</g></svg>
</>

实测失败,会响应 flex gap,有没有什么更好的方案?有空问问gpt

ts 复制代码
<svg viewBox="0 0 0 0" width="0" height="0" style="width: 0;height: 0;">
  <defs>...</defs>
</svg>

更新:

思路总体上没错,gpt推荐了一个方案,后面研究一下

方案二:用 Sprite 图(集中管理 <defs>

这是一种更"集中管理"的方式,将所有 SVG 的 <defs> 提前注入到 HTML 中的一个隐藏 <svg>,然后所有引用通过 <use xlink:href="#gradient-a"> 来使用,避免重复。

工具有:

  • svg-sprite-loader(适合 webpack)
  • vite-plugin-svg-icons
  • svgstore(结合 vite 或 webpack)

这个方案适合你要彻底解决所有 SVG 重复 defs 的问题,并减少 HTML 体积。

更新2:

svg 雪碧图 这个库还是会影响分包优化,而且似乎和svgr是冲突的,没有仔细研究

整理了现有的东西,在没有引入新的库的前提下,目前确定了一个比较麻烦的方案

  1. 不需要变色 & 要复用的 优先用 png + img

  2. 需要变色 & 不需要复用的 直接用原本的 svg 方案

  3. 需要变色 & 要复用的 转组件,目前实践了两套方案

    a. 直接转化为tsx(就是上面的方案),缺点是 def 内的内容较多时要生成比较多的id;服务端渲染和客户端渲染会水合错误,useRef 会跑两次

    b. 使用 createPortal 将 def 注入到 body(head没用),每个 icon 都注入一次

ts 复制代码
const BgSvgContent = (props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) => {
  return (
    <>
      {createPortal(
        <svg fill="none" version="1.1" width="731" height="731" viewBox="0 0 731 731" style={{ position: 'fixed', top: '-100vh', left: '-100vw' }}>
          <defs>
            <!-- ... -->
          </defs>
        </svg>,
        document.body
      )}
      <svg fill="none" version="1.1" width="" height="" viewBox="" {...props}>

或许应该重新审视 svg 方案本身的价值,就像 svg / canvas 比对时一样

更新3:

反正都已经是 React Component 了,干脆直接处理成

ts 复制代码
import { uniqueId } from 'lodash-es';
import { SVGProps, useEffect } from 'react';

const svgId = uniqueId('svg_');

const svgContent = `
  <svg id="${svgId}"
    ....
    style="position: fixed; top: -100vh; left: -100vw; z-index: -1;"
  >
    <defs>
      ...
    </defs>
  </svg>`;

// 组件内
  useEffect(() => {
    // Ensure the SVG is only rendered once
    if (document.getElementById(svgId)) {
      return;
    }

    document.body.insertAdjacentHTML('beforeend', svgContent);
  }, []);
相关推荐
爱分享的程序员9 分钟前
前端面试专栏-工程化:29.微前端架构设计与实践
前端·javascript·面试
上单带刀不带妹13 分钟前
Vue3递归组件详解:构建动态树形结构的终极方案
前端·javascript·vue.js·前端框架
-半.14 分钟前
Collection接口的详细介绍以及底层原理——包括数据结构红黑树、二叉树等,从0到彻底掌握Collection只需这篇文章
前端·html
90后的晨仔35 分钟前
📦 Vue CLI 项目结构超详细注释版解析
前端·vue.js
@大迁世界35 分钟前
用CSS轻松调整图片大小,避免拉伸和变形
前端·css
一颗不甘坠落的流星35 分钟前
【JS】获取元素宽高(例如div)
前端·javascript·react.js
白开水都有人用37 分钟前
VUE目录结构详解
前端·javascript·vue.js
if时光重来1 小时前
axios统一封装规范管理
前端·vue.js
m0dw1 小时前
js迭代器
开发语言·前端·javascript
烛阴1 小时前
别再让 JavaScript 卡死页面!Web Workers 零基础上手指南
前端·javascript