使用<use>元素时为何<mask>元素未被克隆？

MDN文档提到：

<use>元素会提取SVG文档内的节点并在其他位置复制它们，效果等同于将节点深度克隆到未暴露的DOM中，再粘贴到<use>元素所在位置，类似克隆模板元素。

但实际使用外部SVG资源（已配置正确CORS头）时，发现<mask>元素并未被<use>复制。通过片段标识符克隆包含mask的SVG内容时，mask在Shadow DOM中完全缺失，当前仅显示黑色圆形，预期应呈现黑色圆形内的心形遮罩效果。

解决方案 #

1. 调整外部SVG结构，将依赖资源包含在目标片段内 #

修改外部SVG，把<mask>这类依赖元素放在被<use>引用的目标元素的<defs>中（或直接嵌套在目标元素内部），确保<use>克隆目标元素时，连带依赖资源一起复制。

示例SVG结构：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
  <g id="target-element">
    <defs>
      <mask id="heart-mask">
        <path d="M100,150 C120,120 180,90 100,30 C20,90 80,120 100,150 Z" fill="white"/>
      </mask>
    </defs>
    <circle cx="100" cy="100" r="80" mask="url(#heart-mask)" fill="black"/>
  </g>
</svg>

此时使用<use xlink:href="external.svg#target-element">引用，会同步克隆mask资源。

2. 预加载外部SVG的依赖资源到当前文档 #

若无法修改外部SVG，可通过JavaScript提前加载并提取其中的mask元素，插入到当前文档的SVG<defs>中，让<use>引用的元素能找到依赖资源。

示例代码：

fetch('external.svg')
  .then(res => res.text())
  .then(svgContent => {
    const parser = new DOMParser();
    const svgDoc = parser.parseFromString(svgContent, 'image/svg+xml');
    const targetMask = svgDoc.querySelector('#heart-mask');
    if (!targetMask) return;

    const currentSvg = document.querySelector('svg');
    let currentDefs = currentSvg.querySelector('defs');
    if (!currentDefs) {
      currentDefs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
      currentSvg.prepend(currentDefs);
    }
    currentDefs.appendChild(targetMask);
  });

完成资源预加载后，再使用<use>引用外部SVG元素即可正常显示遮罩效果。

3. 改用内联SVG #

如果场景允许，将外部SVG内容直接内联到当前HTML文档中。此时mask等依赖资源本身就在当前DOM范围内，<use>引用时不会出现资源缺失问题。

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