Firefox 中未显示 svg 噪声

Question

为我的项目制作了一个多云的 svg 背景。它在 MS Edge 中完美运行，在 Google Chrome 中，甚至在 XFCE 中作为桌面背景放置时也能正常运行。但它在 Firefox 中不起作用。既不在 Win 下，也不在 Linux 下。也许需要拐杖？

<svg version="1.2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">      
<defs>
 <radialGradient id="Background"  cx="50%" cy="50%" r="120%">
     <stop offset="0%" stop-opacity="1" stop-color="#369" />
     <stop offset="170%" stop-opacity="1" stop-color="#000"/>
   </radialGradient>  
   <filter id="noise" x="0" y="0" width="100%" height="100%">   
     <feImage xlink:href="#bkgrad" result="image" x="0" y="0"/>    
     <feTurbulence  baseFrequency="0.001" seed="999" type="fractalNoise" numOctaves="8" result="fnoise"/>        
     <feColorMatrix   in="fnoise" result="snoise"
                 type="saturate"
                 values="0" />    
     <feBlend in="SourceGraphics" in2="snoise" mode="multiply"></feBlend>
     <feBlend in="snoise" in2="image" mode="multiply"></feBlend>
    </filter> 
    <polyline id="Hexagon" stroke="#000" stroke-opacity="0.15" fill="none" stroke-width = "1.2px"
       points="0,0 8,0 12,6.9 8,13.8 0,13.8 8,13.8 12,6.9 20,6.9 24,13.8 20,6.9 24,0 32,0 "/>
    <pattern id="Hex_Pattern" patternUnits="userSpaceOnUse" patternTransform="translate(0,0)"
      width="24" height="13.8" >
      <use xlink:href="#Hexagon"/>
    </pattern> 
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="url(#Background)"  id="bkgrad" ></rect>
<rect x="0" y="0" width="100%" height="100%" style="filter:url('#noise')" fill="url(#Background)"/>
<rect x="0" y="0" width="100%" height="100%" fill="url(#Hex_Pattern)" id="hexes"/>
</svg>

Answer 1

<feBlend> 过滤器的属性值为 in="SourceGraphic"，而不是 in="SourceGraphics"。由于该错误，Firefox 没有渲染整个过滤器，而其他浏览器和渲染器使用回退并使用最后一个过滤器结果作为第一个源，有效地将 feColorMatrix 的结果与其自身相乘。（此行为是 CSS filter spec 中的新行为，未在 SVG 1.1 中定义。）

由于过滤器那部分的输出永远不会被使用，因此将其删除。

此外，正如 Robert Longson 所指出的，feImage 不支持在 Firefox 中引用内部片段。但你并不真的需要它。引用图像与过滤器的源图形相同，因此您可以简单地删除该图元并将输入重新路由到其他图元：

<svg version="1.2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">      
<defs>
 <radialGradient id="Background"  cx="50%" cy="50%" r="120%">
     <stop offset="0%" stop-opacity="1" stop-color="#369" />
     <stop offset="170%" stop-opacity="1" stop-color="#000"/>
   </radialGradient>  
   <filter id="noise" x="0" y="0" width="100%" height="100%">   
     <feTurbulence  baseFrequency="0.001" seed="999" type="fractalNoise" numOctaves="8" result="fnoise"/>        
     <feColorMatrix   in="fnoise" result="snoise"
                 type="saturate"
                 values="0" />    
     <feBlend in="snoise" in2="SourceGraphic" mode="multiply"></feBlend>
    </filter> 
    <polyline id="Hexagon" stroke="#000" stroke-opacity="0.15" fill="none" stroke-width = "1.2px"
       points="0,0 8,0 12,6.9 8,13.8 0,13.8 8,13.8 12,6.9 20,6.9 24,13.8 20,6.9 24,0 32,0 "/>
    <pattern id="Hex_Pattern" patternUnits="userSpaceOnUse" patternTransform="translate(0,0)"
      width="24" height="13.8" >
      <use xlink:href="#Hexagon"/>
    </pattern> 
</defs>
<rect x="0" y="0" width="100%" height="100%" style="filter:url(#noise)" fill="url(#Background)"/>
<rect x="0" y="0" width="100%" height="100%" fill="url(#Hex_Pattern)" id="hexes"/>
</svg>

Firefox 中未显示 svg 噪声

svg noise not shown in firefox

firefox

svg

svg-filters