Vue+Nuxt+Ionic中SVG图标随机消失的原因解析

问题本质 #

• SVG里的linearGradient是靠唯一ID和path的fill属性绑定的。在Vue/Nuxt/Ionic项目里，组件复用、页面跳转或者刷新时，DOM里很容易出现多个ID相同的linearGradient。
• 浏览器渲染SVG时，只会认第一个出现的同名ID渐变。要是组件多次实例化，或者路由切换后缓存的旧DOM没清干净，新插的SVG又用了一样的ID，后面的path就找不到正确的渐变，直接变成空的，图标自然就消失了。
• 尤其是Ionic的路由缓存机制，旧页面的DOM没完全销毁，新页面再渲染同个图标组件，ID冲突的概率更高，导致图标随机消失。

修复方案的原理 #

给linearGradient设唯一ID #

• 给每个linearGradient生成独一无二的ID（比如加随机字符串），同时让对应path的fill属性精准引用这个ID（fill="url(#唯一ID)"）。这样每个SVG实例的渐变定义都是独一份的，不会和其他实例的ID撞车，path就能准确找到自己要的渐变。

给path和linearGradient绑带随机字符串的key #

• Vue的key是用来标记DOM节点唯一性的。如果给这些元素绑上带随机字符串的key，Vue渲染组件时就会知道每个实例的DOM都是全新的，不会去复用旧的DOM节点。这样就从根源上避免了旧DOM里的重复ID渐变干扰新实例，保证每个图标都能正常渲染渐变。

内容的提问来源于stack exchange，提问作者Peter Plevko