时间戳

首页 > 解决方案 > SVG FeImage 引用的文档元素在最新的 Chrome 中不起作用

svg - SVG FeImage 引用的文档元素在最新的 Chrome 中不起作用

问题描述

用例：在“in”模式下使用过滤器 FeImage 和 FeComposite 用填充/渐变/图案/图像填充 SVG 路径或形状。

示例：要使用过滤器用粉红色填充源矩形，请用粉红色填充另一个矩形（放置在 defs 内）。使用 feImage 引用该矩形并将 feImage 的“in”模式 feComposite 放入作为源矩形的 SourceGraphic 中。这在下面的小提琴中得到了证明。

问题：直到最近我将 Chrome 升级到 v93 时，此实现才有效。可以确认此实现在 Safari 和 Chrome v88 中有效。

我尝试过的：我的原始 HTML 很复杂，所以我以最简单的形式创建了一个小提琴。我在 <filter> 上尝试了不同的维度，并在所有元素上尝试了一大堆不同的参数。小提琴 HTML 非常简单，所以没有太多尝试。

观察：当我在开发工具中检查 defs rect 时，chrome 突出显示它位于源 rect 重叠上方的正确位置。但看起来实际渲染发生在 0,0。如果我将矩形慢慢移向 0,0，颜色就会开始出现。要看到这一点，请将两个矩形的 x 和 y 分别更改为 0 和 0。

这是一个显示问题的小提琴。在 Safari 或旧版本的 Chrome 中打开相同的内容。

<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>

标签： svgsvg-filters

解决方案

推荐阅读