我正在尝试使用 SVG 滤镜来创建晕影效果。
我在一个旧的 repo 中找到了一个片段，作者是这样做的，但是 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>
最佳答案
Does the SVG filter feFlood 'flood-color' property support gradient as input?
没有。
我forked从该存储库的一个分支并尝试修复这些过滤器。请看一下。
Draw a gradient on a shape via fill and apply a filter to the shape too.
这适用于基于 Chromium 的浏览器，但由于此错误而不适用于 Firefox:"SVG filters feImage with xlink:href doesn't work with fragments" .
作为 workaround对于 Firefox，您可以尝试这样使用它:
<feImage xlink:href='data:image/svg+xml;charset=utf-8,<svg width="100" height="100"><rect width="50" height="50 /></svg>' /
关于html - SVG 滤镜 feFlood 'flood-color' 属性是否支持渐变作为输入？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51942027/