Safari 11中SVG重新添加Image节点时闪烁问题求助

嘿，我太懂你遇到的这个Safari专属头疼问题了——老版本Safari在SVG资源缓存的处理逻辑上，确实和Chrome、Firefox有不小差异，尤其是Safari 11这版。下面给你几个亲测有效的解决技巧：

技巧1：用隐藏/显示替代节点移动 #

与其频繁把Image节点从SVG里移除再重新添加，不如让节点一直留在SVG结构里，通过CSS控制显示状态。这样完全不会触发Safari的重新加载逻辑：

.hidden {
  display: none;
}

// 需要显示图像时
document.getElementById("img").classList.remove("hidden");

// 需要隐藏图像时
document.getElementById("img").classList.add("hidden");

技巧2：预加载并转换为DataURL缓存 #

把图像转换成DataURL存在内存里，这样不管怎么操作节点，Safari都不会发起网络请求。可以用Canvas实现这个转换：

// 预加载图像并转为DataURL
const img = document.getElementById("img");
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);

// 替换原src为DataURL
img.src = canvas.toDataURL('image/png'); // 根据你的图像格式调整

// 之后再执行appendChild操作就不会闪烁了
document.getElementById("svg").appendChild(img);

技巧3：使用SVG的元素复用资源 #

利用SVG的<defs>和<use>机制复用Image节点，Safari只会加载一次图像资源，后续复用不会重复请求：

<svg id="svg">
  <defs>
    <!-- 定义一次图像资源 -->
    <image id="img-source" xlink:href="your-image-url.png" width="100" height="100" />
  </defs>
</svg>

// 需要添加图像时，创建use元素引用定义好的资源
const useEl = document.createElementNS("http://www.w3.org/2000/svg", "use");
useEl.setAttributeNS("http://www.w3.org/1999/xlink", "href", "#img-source");
document.getElementById("svg").appendChild(useEl);

这些方法都能避开Safari 11的缓存bug，你可以根据自己的业务场景选最适合的～

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