Значение атрибута для фильтра <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>