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

Question

我有以下 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

非常感谢

Answer 1

Firefox 不是无视效果，只是很微弱。如果增加 surfaceScale 并使点光源更靠近绘图表面，您将能够更清楚地看到它。

跨浏览器的光源实现存在很多不一致之处 - 例如 FireFox 默认使用 sRGB 颜色 space 作为光源，因此您必须设置 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>

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

SVG filter lightsources not working in Firefox

firefox

svg

svg-filters