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噪声

1 个答案: