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);
  }, []);
相关推荐
—Qeyser几秒前
Laravel + UniApp AES加密/解密
前端·uni-app·laravel
C++chaofan3 分钟前
游标查询在对话历史场景下的独特优势
java·前端·javascript·数据库·spring boot
cg.family5 分钟前
Vue3 v-slot 详解与示例
前端·javascript·vue.js
FreeBuf_20 分钟前
新型域名前置攻击利用Google Meet、YouTube、Chrome及GCP构建流量隧道
前端·chrome
c0detrend25 分钟前
技术架构设计:如何打造一个高性能的Chrome截图插件
前端·chrome
幽络源小助理30 分钟前
8、幽络源微服务项目实战:前端登录跨域同源策略处理+axios封装+权限的递归查询增删改+鉴权测试
前端·微服务·架构
API开发35 分钟前
apiSQL+GoView:一个API接口开发数据大屏
前端·后端·api·数据可视化·数据大屏·apisql
运维开发王义杰37 分钟前
nodejs:揭秘 npm 脚本参数 -- 的妙用与规范
前端·npm·node.js
我是日安44 分钟前
从零到一打造 Vue3 响应式系统 Day 18 - Reactive:深入 Proxy 的设计思路
前端·vue.js
你的人类朋友1 小时前
🍃说说Base64
前端·后端·安全