3

我在尝试创建晕影效果时尝试使用 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>
4

1 回答 1

1

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

不。

我从该存储库的一个分支中分叉并尝试修复这些过滤器。请看一看。

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

这适用于基于 Chromium 的浏览器，但不适用于 Firefox，因为这个错误：“SVG filters feImagewith xlink:hrefdoesn't work with fragment”。

作为 Firefox 的解决方法，您可以尝试像这样使用它：

<feImage xlink:href='data:image/svg+xml;charset=utf-8,<svg width="100" height="100"><rect width="50" height="50 /></svg>' /
于 2020-04-01T22:20:01.987 回答