如何以可接受的性能在 Safari 上使用简单的 SVG 过滤器并且不会崩溃？

Question

免责声明：这篇文章是我在试图找到解决方案时的实验的一半问题和一半报告。

任务：单色矩形上的简单 SVG 过滤器

使用过滤器更改或修改 SVG 中单色形状的颜色非常简单。这是如何做到的：

<svg viewBox="0 0 460 130">
  <defs>
    <filter id="filter1">
      <feColorMatrix values="0.5 0 0 0 0 0 0.5 0 0 0 0 0 0.5 0 0 0 0 0 1 0" />
    </filter>
  </defs>
  <g transform="translate(20, 0)">
    <text x="0" y="35">Original</text>
    <rect x="0" y="50" width="200" height="80" fill="red" />
  </g>
  <g transform="translate(240, 0)">
    <text x="0" y="35">Filtered</text>  
    <rect x="0" y="50" width="200" height="80" fill="red" filter="url(#filter1)" />
  </g>
</svg>

 

问题：在 Safari 上运行缓慢，在 Safari Mobile 上崩溃

这样做的小问题是它在 Safari 上真的很慢。在下面的代码段中，每半秒就会向 SVG 添加一个新的过滤矩形。这将最终在 10-80 个周期后在 Safari 移动设备上崩溃，具体取决于您的设备。此外，它是令人无法忍受的缓慢。相比之下，在运行 Chrome 的入门级 Android 手机上，这几乎永远以 50 fps 的速度运行。

var rectCount = 1;
var svgRectElem = document.getElementById('svg-rect');
var rectCountElem = document.getElementById('rect-count');
var fpsElem = document.getElementById('fps');

(function insertRect() {
  window.requestAnimationFrame(function() {
    var start = new Date().getTime();
  
    var clonedSvgRectElem = svgRectElem.cloneNode();

    // insert cloned rect SVG element
    svgRectElem.parentNode.appendChild(clonedSvgRectElem);

    rectCountElem.textContent = ++rectCount;

    window.requestAnimationFrame(function() {
      var fps = Math.round(100000 / (new Date().getTime() - start)) / 100;
      fpsElem.textContent = fps;
      window.setTimeout(insertRect, 500);
    }, 100);
  });
})();

<p>SVG Rect Count: <span id="rect-count">1</span></p>
<p>fps: <span id="fps"></span></p>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="512" height="512" viewBox="0,0,1024,1024">
  <defs>
    <filter id="filter-1">
      <feColorMatrix values="0.5 0 0 0 0 0 0.5 0 0 0 0 0 0.5 0 0 0 0 0 1 0" />
    </filter>
  </defs>
  <rect id="svg-rect" fill="red" filter="url(#filter-1)" x="0" y="0" width="1024" height="1024" />
</svg>

    CodePen 上的片段

 

可能的解决方案：到目前为止我想出了什么

我尝试了几种方法，但正如您将看到的。正如您将看到的，其中一些适用于 Safari，每个都有一个问题。

 

1. 等待 WebKit 团队修复

tl;dr 也许有效，也许无效

这将是最方便的选择，但如果您考虑到 SVG 过滤器是 15 年前推出的，我不会屏住呼吸，因为这个问题很快就会得到解决。是的，我写了一个错误报告。

 

2. 使用 filterRes

tl;dr 有效，但仅在下一个 Safari 版本发布之前

在 SVG 1.1filterRes中定义了该属性。这指定了过滤器的分辨率。值为 1 意味着过滤器的源将被视为单个像素。因此，不是运行所有像素，过滤器必须仅应用于一个像素。由于我们使用单色矩形作为输入图像，因此在我们的例子中将整个图像视为一个像素是可以的。

在我们的示例中，过滤器将如下所示：

<filter id="filter1" filterRes="1">
  <feColorMatrix values="0.5 0 0 0 0 0 0.5 0 0 0 0 0 0.5 0 0 0 0 0 1 0" />
</filter>

CodePen 上的片段

这实际上大大提高了性能并且不会发生崩溃！

令人遗憾的是，filterRes它已从 2.0 版的 SVG 标准中删除。WebKit 非常快地适应了 SVG 2.0 的这一部分，并决定在下一个版本中将其删除。如果我们依靠filterRes，同样的问题很快就会再次出现。

 

3.过滤一个小矩形，然后放大

tl;dr 不起作用

上面的方法表明，在小区域上应用过滤器可以大大提高性能。我们在一个小矩形上应用过滤器，然后将结果缩放到所需的大小。对于缩放，我们使用transform属性。如果我们将 rect 设置为所需大小的 1/64，我们将对其进行缩放transform="scale(64)"以达到最终大小 1024。

CodePen 上的片段

不幸的是，这根本不起作用。性能没有改变，它仍然在 Safari 移动设备上崩溃。有趣的是，这不能单独归因于过滤器或变换。只有在组合时，这才会变慢并崩溃。

 

4 过滤一个小矩形，然后使用feTile填充目标矩形

tl;dr 有点作用，但在 Chrome 上有人工制品

这种方法与前面的类似。我们首先将过滤器应用于一个小矩形，然后使用第二个过滤器feTile来填充目标矩形。

CodePen 上的片段

这适用于 Safari 移动版。不如filterRes，但有相当大的改进。

但是对于这种方法，Chrome 是派对的垃圾。如果您在 Chrome 上按比例放大和缩小，则在某些缩放级别中会显示栅格。这是它的外观（正确的是一个大正方形）：

 

5 为过滤器的宽度和高度使用巨大的值

tl;dr 可以工作，但在 Internet Explorer 上被黑客入侵并导致问题

这是一种非常反直觉的方法。将过滤器区域的宽度和高度设置为非常大的值应该会使过滤器变慢，因为必须处理数以百万计的像素。但实际上情况恰恰相反。过滤器在 WebKit 上显着加速并且不会发生崩溃。

以下是如何在我们的示例中实现这一点：

<filter id="filter-1" x="0" y="0" width="102400" height="102400" filterUnits="userSpaceOnUse">
  <feColorMatrix values="0.5 0 0 0 0 0 0.5 0 0 0 0 0 0.5 0 0 0 0 0 1 0" />
</filter>

CodePen 上的片段

我认为这里发生的事情是过滤器首先缩小原始过滤器区域，然后处理将在 SVG 的 viewBox 中可见的部分（缩小后的一个小区域），然后再次放大该区域。这似乎很快。

不幸的是，这是一个相当大的黑客，我们现在不知道未来的浏览器版本将如何处理具有如此大值的 SVG。此外，这会导致 Internet Explorer 出现问题，文档的滚动区域将变得很大（可能是因为过滤器的边界已计算到大小中），使得滚动几乎不可能。如果您选择的值太小，Internet Explorer 将实际显示过滤器边界大小的矩形。

 

解决办法是什么？

其实，我不知道。有一个简单的解决方案，使用filterRes，但它很快就会过期（WebKit 技术预览版已经不支持它），所以这不是一个选项。所有其他方法都会导致其他浏览器出现问题。

你能想到我可以尝试的任何其他方法吗？我不敢相信在 SVG 1.1 规范发布 15 年后跨浏览器使用 SVG 过滤器是一种冒险。

Answer 1

尝试这个：

将所有矩形放入一组，然后将滤镜应用到该组。

var rectCount = 1;
var svgRectElem = document.getElementById('svg-rect');
var rectCountElem = document.getElementById('rect-count');
var fpsElem = document.getElementById('fps');

(function insertRect() {
  window.requestAnimationFrame(function() {
    var start = new Date().getTime();
  
    var clonedSvgRectElem = svgRectElem.cloneNode();

    // insert cloned rect SVG element
    svgRectElem.parentNode.appendChild(clonedSvgRectElem);

    rectCountElem.textContent = ++rectCount;

    window.requestAnimationFrame(function() {
      var fps = Math.round(100000 / (new Date().getTime() - start)) / 100;
      fpsElem.textContent = fps;
      window.setTimeout(insertRect, 500);
    }, 100);
  });
})();

<p>SVG Rect Count: <span id="rect-count">1</span></p>
<p>fps: <span id="fps"></span></p>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="512" height="512" viewBox="0,0,1024,1024">
  <defs>
    <filter id="filter-1">
      <feColorMatrix values="0.5 0 0 0 0 0 0.5 0 0 0 0 0 0.5 0 0 0 0 0 1 0" />
    </filter>
  </defs>
  <g filter="url(#filter-1)">
    <rect id="svg-rect" fill="red" x="0" y="0" width="1024" height="1024" />
  </g>
</svg>