我正在尝试使用SVG滤镜，同时尝试创建晕影效果。
我在一个旧的存储库中找到了一个片段，作者是这样做的，但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>
SVG 滤镜 feFlood 'flood-color' 属性是否支持渐变作为输入？
不。
我从该存储库的一个分支中分叉并尝试修复这些过滤器。请看一看。
通过填充在形状上绘制渐变，并对形状应用滤镜。
这适用于基于 Chromium 的浏览器，但在 Firefox 中不适用于，因为这个错误："SVG 过滤器feImagexlink:href不适用于片段"。
作为 Firefox 的解决方法，您可以尝试这样使用它：
<feImage xlink:href='data:image/svg+xml;charset=utf-8,<svg width="100" height="100"><rect width="50" height="50 /></svg>' /