SVG斜角滤镜在Firefox中似乎不起作用(SVG Bevel filter doesn't seem to work in Firefox)

SVG斜角滤镜在Firefox中似乎不起作用(SVG Bevel filter doesn't seem to work in Firefox)

对于我正在尝试使用（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一样）

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)

最满意答案

我认为问题是那些filterUnits =“objectBoundingBox”后跟维度，你必须打算成为userSpace单位（37等）。 Chrome已经发现你必须指的是单位，但Firefox相信你知道你正在做什么，而你真的想让你的滤波器宽度达到边界框的3700％。

只需删除该声明，Firefox和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.)