SVG шум не отображается в Firefox - PullRequest
0 голосов
/ 27 сентября 2018

Сделал облачный 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>

1 Ответ

0 голосов
/ 27 сентября 2018

Значение атрибута для фильтра <feBlend> равно in="SourceGraphic", а не in="SourceGraphics".Firefox не отображал весь фильтр из-за этой ошибки, в то время как другие браузеры и средства визуализации использовали запасной вариант и использовали результат последнего фильтра в качестве первого источника, эффективно умножая результат feColorMatrix на себя.(Это поведение впервые в спецификации фильтра CSS , оно не было определено в SVG 1.1.)

Поскольку выходные данные этой части фильтра никогда не используются, удалите их.

Кроме того, как указал Роберт Лонгсон, 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>
...