Html SVG是否过滤feFlood'；泛光颜色'；属性支持梯度作为输入？_Html_Svg_Svg Filters_Radial Gradients_Vignette

Html SVG是否过滤feFlood'；泛光颜色'；属性支持梯度作为输入？

html svg

Html SVG是否过滤feFlood'；泛光颜色'；属性支持梯度作为输入？,html,svg,svg-filters,radial-gradients,vignette,Html,Svg,Svg Filters,Radial Gradients,Vignette,我正在尝试SVG过滤器，同时尝试创建一个渐晕效果我在一份旧的回购协议中发现了一个片段，作者是这样做的，但是feFlood没有为我选择过滤器。我也尝试了flood color=“url（#gradient_toaster）”，但没有什么不同。W3文档说这个属性采用了一种颜色，但作者可能错了吗？如果是，实现渐晕效应的方法是什么 <html> <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" xml

我正在尝试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，因为存在以下错误：

对于Firefox，您可以尝试这样使用它：

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

feFlood需要a，而不需要a，这正是您试图通过它的地方。@RobertLongson谢谢。奇怪的是，为什么在这个回购协议中，所有的过滤器示例都这样使用它：-我扫描文档以了解它，但当然没有这样的。有没有其他方法可以将渐变包含到过滤效果中？通过填充在形状上绘制渐变，并对形状应用过滤器。对不起，这对我来说没有多大意义：BackgroundImage在浏览器中的支持较差，我认为只有Edge可以很好地实现这一点。