For a game I am trying to programming using (vanilla) javascript, css and svg, I have the following SVG to display a door:
<svg width="125" height="100" viewBox="0 0 125 100" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="floorblur" filterUnits="objectBoundingBox" x="0" y="0" width="4" height="4">
<feGaussianBlur in="SourceAlpha" stdDeviation="4.1" result="blur"/>
</filter>
<filter id="doorblur" filterUnits="objectBoundingBox" x="0" y="0" width="19" height="33">
<feGaussianBlur in="SourceAlpha" stdDeviation="6.27" result="blur"/>
</filter>
<filter id="kozijnblur" filterUnits="objectBoundingBox" x="0" y="0" width="12" height="7">
<feGaussianBlur in="SourceAlpha" stdDeviation="1.1" result="blur"/>
</filter>
<filter id="doorbevel" filterUnits="objectBoundingBox" x="0" y="0" width="37" height="79">
<feGaussianBlur in="SourceAlpha" stdDeviation="0.812" result="blur"/>
<feSpecularLighting in="blur" surfaceScale="2" specularConstant="0.8" specularExponent="4" result="specOut" lighting-color="rgb(235, 235, 187)">
<fePointLight x="-1000" y="-2000" z="90"/>
</feSpecularLighting>
<feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut2"/>
<feComposite in="SourceGraphic" in2="specOut2" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="litPaint" />
</filter>
<filter id="kozijnbevel" filterUnits="objectBoundingBox" x="0" y="0" width="125" height="100">
<feGaussianBlur in="SourceAlpha" stdDeviation="3.335" result="blur"/>
<feSpecularLighting in="blur" surfaceScale="2" specularConstant="0.8" specularExponent="4" result="specOut" lighting-color="rgb(202,205,130)">
<fePointLight x="-90" y="-70" z="53"/>
</feSpecularLighting>
<feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut2"/>
<feComposite in="SourceGraphic" in2="specOut2" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="litPaint" />
</filter>
<pattern id="backgroundwallpattern" x="0" y="0" width="30" height="10" patternUnits="userSpaceOnUse">
<rect x="0" y="0" width="30" height="10" fill="#9B9D59" fill-opacity="1.0" />
<rect x="0" y="0" width="29" height="4" fill="rgb(202,205,130)" fill-opacity="1.0" />
<rect x="0" y="5" width="14" height="4" fill="rgb(202,205,130)" fill-opacity="1.0" />
<rect x="15" y="5" width="15" height="4" fill="rgb(202,205,130)" fill-opacity="1.0" />
<rect x="15" y="5" width="15" height="4" fill="rgb(202,205,130)" fill-opacity="1.0" />
</pattern>
<pattern id="backgroundfloor" x="0" y="0" width="7" height="7" patternUnits="userSpaceOnUse">
<rect x="0" y="0" width="7" height="7" fill="rgb(236, 238, 168)" />
<circle cx="1" cy="1" r="1" fill="rgb(202,205,130)" fill-opacity="1.0" filter="url(#floorblur)" />
<circle cx="3" cy="2" r="1" fill="rgb(202,205,130)" fill-opacity="1.0" filter="url(#floorblur)" />
<circle cx="2" cy="5" r="2" fill="rgb(202,205,130)" fill-opacity="1.0" filter="url(#floorblur)" />
<circle cx="6" cy="6" r="1" fill="rgb(202,205,130)" fill-opacity="1.0" filter="url(#floorblur)" />
<circle cx="4" cy="0" r="2" fill="rgb(202,205,130)" fill-opacity="1.0" filter="url(#floorblur)" />
</pattern>
<pattern id="doorpanels" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
<rect x="0" y="0" width="20" height="20" fill="rgb(179, 181, 140)" fill-opacity="1.0" />
<path d="M 5 10 L 8 13 L 12 13 L 15 10 L 12 7 L 8 7 L 5 10" fill="rgb(202, 205, 130)" fill-opacity="1.0" filter="url(#doorblur)" />
<path d="M 0 5 L 0 13 L 3 13 L 8 7 L 0 5" fill="rgb(202, 205, 130)" fill-opacity="1.0" filter="url(#doorblur)" />
<path d="M 20 0 L 20 8 L 17 8 L 12 0 L 20 0" fill="rgb(202, 205, 130)" fill-opacity="1.0" filter="url(#doorblur)" />
<path d="M 2 20 L 2 12 L 7 12 L 15 20 L 2 20" fill="rgb(202, 205, 130)" fill-opacity="1.0" filter="url(#doorblur)" />
<path d="M 20 18 L 18 12 L 15 12 L 12 18 L 20 18" fill="rgb(202, 205, 130)" fill-opacity="1.0" filter="url(#doorblur)" />
</pattern>
<pattern id="kozijn" x="0" y="0" width="12" height="7" patternUnits="userSpaceOnUse">
<rect x="0" y="0" width="12" height="7" fill="rgb(149, 151, 110)" fill-opacity="1.0" />
<rect x="0" y="1" width="12" height="3" fill="rgb(109, 111, 80)" fill-opacity="1.0" filter="url(#kozijnblur)" />
<rect x="0" y="4" width="12" height="1" fill="rgb(189, 191, 150)" fill-opacity="1.0" filter="url(#kozijnblur)" />
</pattern>
</defs>
<g class="svg-earth-door" fill="none" fill-rule="evenodd">
<rect x="25" y="20" width="75" height="58" style="stroke: none; fill: url(#backgroundwallpattern)" />
<rect x="25" y="78" width="75" height="21" style="stroke: none; fill: rgb(127, 131, 70)" />
<path d="M 40 99 L 85 99 L 82 88 L 43 88 L 40 99" style="fill: url(#backgroundfloor)" />
<path d="M 43 87 L 82 87 L 80 79 L 45 79 L 43 87" style="fill: url(#backgroundfloor)" />
<path d="M 39 99 L 25 99 L 25 88 L 42 88 L 39 99" style="fill: url(#backgroundfloor)" />
<path d="M 42 87 L 25 87 L 25 79 L 44 79 L 42 87" style="fill: url(#backgroundfloor)" />
<path d="M 86 99 L 100 99 L 100 88 L 83 88 L 86 99" style="fill: url(#backgroundfloor)" />
<path d="M 83 87 L 100 87 L 100 79 L 81 79 L 83 87" style="fill: url(#backgroundfloor)" />
<rect x="25" y="20" width="37" height="79" style="stroke: rgb(127, 131, 70); stroke-width: 1; fill: url(#doorpanels)" filter="url(#doorbevel)" />
<rect x="63" y="20" width="37" height="79" style="stroke: rgb(127, 131, 70); stroke-width: 1; fill: url(#doorpanels)" filter="url(#doorbevel)" />
<path d="M 0 100 L 15 0 L 110 0 L 125 100 L 100 100 L 100 20 L 25 20 L 25 100 L 0 100" style="fill: url(#kozijn)" filter="url(#kozijnbevel)" />
</g>
There are panels that are not visible but that is done on purpose, as I will animate through CSS the door panels being opened so that the other background elements in the SVG become visible. But that is not the point of the question here.
When I look at this in Chrome, it looks the way I want it to look. However, in Firefox (and also IE) it all looks much darker and I can't really see a bevel effect applied on it. I have tried multiple things seen in other stackoverflow questions related to this topic, like putting filter in the style attribute or adding the file name to the url in the filter attribute but neither of those solutions work. Has anybody got any idea how to make this SVG look the same in all three browsers? (preferably make them look the way it does in Chrome)
I think the problem is those filterUnits="objectBoundingBox" followed by dimensions that you must intend to be userSpace units (37 etc.). Chrome has figured out that you must mean units, but Firefox trusts that you know what you're doing and you really did want to make your filter width 3700% of the bounding box.
Just delete that declaration and Firefox and Chrome start to look more like each other. (Lighting units can be also be problematic across browsers - but I don't think that's the problem here.)