Chrome v93及以上版本SVG feImage引用内部文档元素不生效问题

应用场景 #

通过FeImage、FeComposite的in模式滤镜，为SVG路径或图形填充纯色、渐变、图案或图片。

实现逻辑 #

若要通过滤镜为源矩形填充粉色，可先在defs中定义一个填充为粉色的矩形，使用feImage引用该矩形，再通过feComposite的in模式将feImage结果与源图形（SourceGraphic，即目标源矩形）合成。

问题说明 #

该实现此前运行正常，将Chrome升级到v93版本后出现失效，经确认该实现可在Safari及Chrome v88版本中正常运行。

已尝试操作 #

由于原始HTML结构复杂，已提取最简逻辑生成测试用例，测试了调整<filter>的尺寸以及各类元素的不同参数，但该示例HTML逻辑非常简单，可调整的空间有限。

现象观察 #

在开发者工具中检查defs内的矩形时，Chrome高亮显示其位置正确，与源矩形重叠，但其实际渲染位置似乎在(0,0)坐标点。如果将两个矩形的坐标逐步向(0,0)移动，粉色会逐渐出现。将两个矩形的x、y属性均改为0即可验证该现象。

复现代码 #

<html>
  <body style="background: black">
    <svg
      version="1.1"
      id="editor_srdXQldLJ3O0111"
      width="450"
      height="450"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      style="z-index: 1"
    >
      <defs>
        <rect
          x="195.64463806152344"
          y="31.770639419555664"
          width="184.6571807861328"
          height="185.97244262695312"
          id="fillrect"
          fill="pink"
        ></rect>
        <filter
          id="main-filter"
          x="0"
          y="0"
          height="100%"
          width="100%"
          filterUnits="userSpaceOnUse"
          color-interpolation-filters="sRGB"
        >
          <feImage href="#fillrect" result="fe-img"></feImage>
          <feComposite
            operator="in"
            in="fe-img"
            in2="SourceGraphic"
          ></feComposite>
        </filter>
      </defs>
      <g filter="url(#main-filter)">
        <rect
          x="195.64463806152344"
          y="31.770639419555664"
          width="184.6571807861328"
          height="185.97244262695312"
        />
      </g>
    </svg>
  </body>
</html>

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