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是冲突的,没有仔细研究
整理了现有的东西,在没有引入新的库的前提下,目前确定了一个比较麻烦的方案
-
不需要变色 & 要复用的 优先用 png + img
-
需要变色 & 不需要复用的 直接用原本的 svg 方案
-
需要变色 & 要复用的 转组件,目前实践了两套方案
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);
}, []);