SVG 过滤器光源在 Firefox 中不起作用

如何解决SVG 过滤器光源在 Firefox 中不起作用

我有以下 SVG 来在棋盘上渲染棋子，棋盘和棋子都有很好的斜面效果。我对 Chrome（和 Safari）上的效果很满意，但 Firefox 似乎忽略了这个效果。

非常感谢您帮助理解为什么它不能正常工作，因为 Firefox (caniuse.com) 支持的所有原语都显示。

<svg width="800" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <filter id="counter" filterUnits="objectBoundingBox">
    <feGaussianBlur in="SourceAlpha" stdDeviation="2" result="blur" />
    <fespecularLighting in="blur" surfaceScale="2" specularConstant="0.3" specularExponent="10" result="lightingOut" lightingColor="white">
      <fePointLight x="-2000" y="-2000" z="500" />
    </fespecularLighting>
    <feComposite in="lightingOut" in2="SourceAlpha" operator="in" result="composite1" />
    <feComposite in="SourceGraphic" in2="composite1" operator="arithmetic" k1="0" k2="1" k3="1" />
  </filter>

  <rect width="400" height="200" fill="#ffffff" />
  <rect x="50" y="10" width="300" rx="10" ry="10" height="180" fill="#666666" filter="url(#counter)" />
  <circle cx="120" cy="100" r="20" filter="url(#counter)" fill="black" />
  <circle cx="250" cy="100" r="20" filter="url(#counter)" fill="#3333ff" />
</svg>

代码笔：https://codepen.io/jugglingcats/pen/RwWLQjJ

非常感谢

解决方法

Firefox 并没有忽略效果，只是非常微弱。如果您增加surfaceScale并使点光源更靠近绘图表面，您将能够更清楚地看到它。

在跨浏览器的光源实现中有很多不一致的地方——例如，FireFox 默认使用 sRGB 颜色空间作为光源，因此您必须设置 Chrome 以显式使用它。然后，你需要调整一些东西，直到你有一些看起来一样的东西。例如，specularConstant 在 0.3 的每个浏览器中似乎并没有做同样的事情 - 但将其设置为“1”似乎是一致的。这是一个看起来基本相同的过滤器。我不得不将 fePointLight 切换为 feDistantLight 以避免定位计算不一致。

 <filter id="counter2" color-interpolation-filters="sRGB">
    <feGaussianBlur in="SourceAlpha" stdDeviation="2" result="blur" />
    <feSpecularLighting in="blur" surfaceScale="10" specularConstant="1" specularExponent="10" result="lightingOut" lightingColor="white">
      <feDistantLight azimuth="225" elevation="0" />
    </feSpecularLighting>
    <feComposite in="lightingOut" in2="SourceAlpha" operator="in" result="composite1" />
    <feComposite in="SourceGraphic" in2="composite1" operator="arithmetic" k1="0" k2="1" k3="1" />
  </filter>