Safari 中 url(#fragment) shadowTree 错误的解决方法？

Question

在 SVG 中，当祖先 SVG 位于 shadowTree 中时，url(#fragment) 在某些情况下在 Safari 中失败。这意味着自定义元素中的过滤器和模式有时会停止工作。

基本上，当有两个从模板创建的 SVG 实例，并且一个实例被隐藏时，other 实例中的片段引用停止工作，例如

<template>
  <svg>
    ...
    <filter id="blur">
  ...
</>

...

(attach cloned template to new shadows etc... )

...


templateUsingInstance1.style.display = "none"

// And then the following doesn't work.

templateUsingInstance2.shadowRoot.querySelector("g").style.filter = "url(#blur)" 

完整示例：https://jsfiddle.net/InBllm/dw4vhax0/2/

该错误已被报告，但我很好奇是否有其他人遇到过此问题并知道解决方法。

我试过了

• 在主文档中内嵌带有相关模式/过滤器的 SVG 并引用它。
• 在阴影树中使用相关的模式/过滤器内联另一个 SVG 并引用它。
• 使用相对路径和绝对路径引用 external SVG 中的过滤器/模式。 （看起来这本身就是一个单独的错误。）
• 直接改变style属性（与defs>style相反）。
• 在根 HTML 文档中添加基本标记。
• 从模板创建一个额外的实例，隐藏它（不使用display:none），永远保留它。 （如果其他实例被创建和销毁，问题又回来了。）

放弃 shadowDom 可以避免这个问题，但这不是一种选择。

Answer 1

我得到的最好的就是这个 hack：

1. 从模板创建一个额外的实例，隐藏它（不使用display:none），永远保留它。

2. 每当从有问题的模板构建的实例被删除时，闪现粘贴实例。 el.style.display = "none"; setTimeout(()=>{ele.style.display = "initial"},0)

这可以防止中断片段引用卡住，但可能会导致缺少过滤器/模式的一帧闪烁...