对于我正在尝试使用（vanilla）javascript，css和svg进行编程的游戏，我有以下SVG来显示一扇门：
<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>
有些面板不可见，但这是有目的的，因为我将通过CSS动画打开门面板，以便SVG中的其他背景元素变得可见。但这不是问题的重点。
当我在Chrome中查看此内容时，它看起来就像我希望它看起来一样。然而，在Firefox（以及IE）中，它看起来都比较暗，我无法真正看到应用斜角效果。我尝试了与此主题相关的其他stackoverflow问题中的多个内容，例如将过滤器放在样式属性中或将文件名添加到过滤器属性中的url，但这些解决方案都不起作用。有没有人知道如何在所有三个浏览器中使这个SVG看起来一样？ （最好让它们看起来像Chrome一样）
答案 0 :(得分：1)
我认为问题是那些filterUnits =＆＃34; objectBoundingBox＆＃34;其次是您必须打算成为userSpace单位的维度（37等）。 Chrome已经发现你必须指的是单位，但Firefox相信你知道自己在做什么，而你真的想让你的滤波器宽度达到边界框的3700％。
只需删除该声明，Firefox和Chrome就会看起来更像是彼此。 （照明设备在浏览器中也可能存在问题 - 但我不认为这是问题所在。）