【发布时间】：2023-04-11 00:22:01
【问题描述】：
对于我尝试使用（原版）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 中的样子）
【问题讨论】：
标签： firefox svg svg-filters