SVG 过滤器 feFlood 'flood-color' 属性是否支持渐变作为输入？答案

【问题标题】：Does the SVG filter feFlood 'flood-color' property support gradient as input?SVG 过滤器 feFlood 'flood-color' 属性是否支持渐变作为输入？
【发布时间】：2018-08-21 05:20:24
【问题描述】：

我在尝试创建晕影效果时尝试使用 SVG 滤镜。

我在一个旧的 repo 中找到了一个 sn-p，作者是这样做的，但 feFlood 没有为我选择过滤器。我也试过flood-color="url(#gradient_toaster)"，但没有区别。 W3 文档说这个属性有颜色，比作者可能错了吗？如果是，实现晕影效果的方法是什么？

<html>
  <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">    
     <defs>      
        <radialGradient id="gradient_toaster">
          <stop offset="100%" stop-color="#804e0f" stop-opacity="100%" />
          <stop offset="0%" stop-color="#3b003b" stop-opacity="100%" />
        </radialGradient>

        <filter id="toaster">
          <feFlood flood-color="#gradient_toaster" flood-opacity="0.5" />
          <feBlend mode="screen" in="SourceGraphic" />
        </filter>
     </defs> 

      <rect x="0" y="0" width="300" height="300" filter="url(#toaster)" fill="gray"/>        
  </svg>
</html>

【问题讨论】：

feFlood 需要 colour，而不需要 paint，这是您要通过的。
@RobertLongson 谢谢。想知道，为什么在这个 repo 中，所有过滤器示例都这样使用它：github.com/skrypte/fegram - 我正在扫描文档以理解它，但当然没有这样的东西。还有其他方法可以将渐变包含在滤镜效果中吗？
通过填充在形状上绘制渐变，并对形状应用滤镜。
对不起，这对我来说没有多大意义：codepen.io/vedtam/pen/XPWYvy?editors=1000#0
BackgroundImage 在浏览器中的支持很差，我认为只有 Edge 做得好。

标签： html svg svg-filters radial-gradients vignette

【解决方案1】：

SVG 过滤器 feFlood 'flood-color' 属性是否支持渐变作为输入？

没有。

我 forked 来自该存储库的一个分支，并试图修复这些过滤器。请看一下。

通过填充在形状上绘制渐变，并对形状应用滤镜。

这适用于基于 Chromium 的浏览器，但不适用于 Firefox，因为这个错误："SVG filters feImage with xlink:href doesn't work with fragments"。

作为 Firefox 的 workaround，您可以尝试这样使用它：

<feImage xlink:href='data:image/svg+xml;charset=utf-8,<svg width="100" height="100"><rect width="50" height="50 /></svg>' /

【讨论】：