Why does SVG background display incorrectly in firefox?


Why is the text displayed correctly in chrome, but the background on the text is not displayed in firefox? Tell me who is familiar with svg? An example of an error

<filter id="blur" filterUnits="userSpaceOnUse">
    <feGaussianBlur stdDeviation="2"></feGaussianBlur>
<filter id="blur2" filterUnits="userSpaceOnUse">
    <feGaussianBlur stdDeviation="0 50" in="SourceGraphic">
<pattern id="svg_text" patternUnits="userSpaceOnUse" width="1304" height="705" x="0" y="0">
    <image xlink:href="http://www.saitadmin.ru/faili_na_razdacu/bg_logo_1.jpg" width="1304" height="705"></image>
<text class="fill tx1" dy="0.3em" y="50%" x="50%" style="fill:url(#svg_text) none; filter: url(#blur2);">wood</text>
<text class="tx2" dy="0.3em" y="50%" x="50%" style="filter:url(#blur);">wood</text>
<text class="fill" dy="0.3em" y="50%" x="50%" style="fill:url(#svg_text) none;">wood</text>

What could be wrong here?


An explicit background-size must be specified. Reading: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

Scroll to Top